`

JavaScript 一些例子

JavaScriptXHTMLHTMLGo浏览器 
阅读更多
1，列表节点操作 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>brother child demo</title>
<script type="text/javascript">
window.onload = function()
{
	var ul = document.getElementById('parent');
	/*  hack for gecko */
	for(var i = 0; i < ul.childNodes.length; i ++)
	{
		if(ul.childNodes[i].nodeType == 3)
			ul.childNodes[i].parentNode.removeChild(ul.childNodes[i]);//删除纯文本节点
	}
	for(var i = 0; i < ul.childNodes.length; i ++)
	{
		ul.childNodes[i].onmouseover = function()		// 定义当鼠标划过时需要执行的程序
		{
			if(this.previousSibling)		// this指针指向当前对象，这里指ul.childNodes[i]
			{
				this.previousSibling.style.backgroundColor = '#ff0'; //黄色
			}
			if(this.nextSibling)
			{
				this.nextSibling.style.backgroundColor = '#ff0'; //
			}
			this.style.backgroundColor = '#f00'; //自身为红色
		}
		ul.childNodes[i].onmouseout = function()		// 定义当鼠标划离时需要执行的程序
		{
			if(this.previousSibling)		// this指针指向当前对象，这里指ul.childNodes[i]
			{
				this.previousSibling.style.backgroundColor = '#fff';
			}
			if(this.nextSibling)
			{
				this.nextSibling.style.backgroundColor = '#fff';
			}
			this.style.backgroundColor = '#fff';
		}
	}
}
</script>
</head>

<body>
	<ul id="parent">
    	<li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
    </ul>
</body>
</html>


2，子节点操作 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>child node demo</title>
<script type="text/javascript">
window.onload=function(){
var ul=document.getElementById("parent");
ul.firstChild.style.backgroundColor='#FFF';
ul.lastChild.style.backgroundColor='#F00';
for(var i=1;i<ul.childNodes.length-1;i++){
ul.childNodes[i].style.backgroundColor='#eee';
if(ul.childNodes[i].nodeType==3)ul.childNodes[i].parentNode.removeChild(childNodes[i]);
}
}
</script>
</head>

<body>
	<h1>parent</h1>
	<ul id="parent">
    	<li>firstChild</li>
        <li>childNode</li>
        <li>childNode</li>
        <li>childNode</li>
        <li>childNode</li>
        <li>childNode</li>
        <li>childNode</li>
        <li>childNode</li>
        <li>childNode</li>
        <li>lastChild</li>
    </ul>
</body>
</html>


3，网页上时间显示 

<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>网页自动更新日期</title>
<script language="JavaScript">

function getTimeString(){ //
var t = new Date();
var year = t.getFullYear();
var month = t.getMonth()+1; //month从0开始
var d = t.getDate();
var hour = t.getHours();
var minute = t.getMinutes();
var second = t.getSeconds();
var str = year+'-'+month+'-'+d+' '+hour+':'+minute+':'+second;
return str;
}

function refresh(){
document.getElementById("time").innerHTML=getTimeString();
}
window.onload=function(){  //每隔一秒执行一次refresh函数
setInterval(refresh,1000);
}
</script>
</head>
<body>
<h1>自动更新时间,每隔1秒刷新一次</h1>
<div id = "time"></div>
</body>
</html>


4，通过标签名引用文档元素 
<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>通过标签名引用节点</title>
<script language="JavaScript">

function modifyLinkColor(){ //
var links = document.body.getElementsByTagName("a");
for(var i =0 ;i<links.length;i++){
links[i].style.backgroundColor='#FF0';
}
}

</script>
</head>
<body>


<a href ="http://www.sina.com">新浪网站</a>
<a href ="http://www.sina.com">新浪网站</a>
<a href ="http://www.sina.com">新浪网站</a>
<input type = "button" id="btnEdit" value="modify links bgcolor" onclick ="modifyLinkColor

();" />

</body>
</html>


window对象的history属性 

<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>window的history属性得到历史记录</title>
<script language="JavaScript">
function historyBack(){
history.back();
}
function historyForward(){
history.forward();
}
function historyGo(){
var n =parseInt(document.getElementById("txtHistory").value);
history.go(n);
}

</script>
</head>
<body>
<h1>history_demo_1<h1>
history_demo_1.html
<a href="history_demo_2.html">history_demo_2</a>

<input type ="text" id="txtHistory" />

<input type ="button" id="btnGo" value="History.go" onclick="historyGo();" />
<br/>
<input type ="button" id="btnBack" value="History.back" onclick="historyBack();" />
<br/>
<input type ="button" id="btnForward" value="History.forward" onclick="historyForward();" />
</body>
</html>


history_demo_2.html 

<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>window的history属性得到历史记录</title>
<script language="JavaScript">
function historyBack(){
history.back();
}
function historyForward(){
history.forward();
}
function historyGo(){
var n =parseInt(document.getElementById("txtHistory").value);
history.go(n);
}

</script>
</head>
<body>
<h1>history_demo_2<h1>
<a href="history_demo_1.html">history_demo_1</a>
<br/>
<a href="history_demo_3.html">history_demo_3</a>

<input type ="text" id="txtHistory" />

<input type ="button" id="btnGo" value="History.go" onclick="historyGo();" />
<br/>
<input type ="button" id="btnBack" value="History.back" onclick="historyBack();" />
<br/>
<input type ="button" id="btnForward" value="History.forward" onclick="historyForward();" />
</body>
</html>


history_demo_3.html 
<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>window的history属性得到历史记录</title>
<script language="JavaScript">
function historyBack(){
history.back();
}
function historyForward(){
history.forward();
}
function historyGo(){
var n =parseInt(document.getElementById("txtHistory").value);
history.go(n);
}

</script>
</head>
<body>
<h1>history_demo_3<h1>
<a href="history_demo_1.html">history_demo_1</a>
<a href="history_demo_2.html">history_demo_2</a>

<input type ="text" id="txtHistory" />

<input type ="button" id="btnGo" value="History.go" onclick="historyGo();" />
<br/>
<input type ="button" id="btnBack" value="History.back" onclick="historyBack();" />
<br/>
<input type ="button" id="btnForward" value="History.forward" onclick="historyForward();" />
</body>
</html>


事件处理的例子 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>addEventListener demo</title>
<style type="text/css">
#demo {
	width:300px;
	height:300px;
	border:1px solid black;
	margin:30px;
}
</style>
<script type="text/javascript">
var div = document.getElementById('demo'); //在浏览器中没有效果？浏览器的问题?
function init()									//注册div的mouseover和mouseout事件处理程序
{
	
	div.addEventListener('mouseover',setBackgroundColor,false);
	div.addEventListener('mouseover',setBorderStyle,false);
	div.addEventListener('mouseout',removeBackgroundColor,false);
	div.addEventListener('mouseout',removeBorderStyle,false);
}
function setBackgroundColor()					//设置div的背景色为红色
{
	document.getElementById('demo').style.backgroundColor = '#f00';
}
function removeBackgroundColor()				//设置div的背景色为白色
{
	document.getElementById('demo').style.backgroundColor = '#fff';
}
function setBorderStyle()						//设置div的边框粗细为10像素
{
	document.getElementById('demo').style.border = '10px solid black';
}
function removeBorderStyle()					//设置div的边框粗细为1像素
{
	document.getElementById('demo').style.border = '1px solid black';
}
window.addEventListener('load',init,false);		//在window的load事件被触发时执行init函数
</script>
</head>

<body>
<h1>addEventListener demo</h1>
<div id="demo"></div>
</body>
</html>
分享到：
| JavaScript的windows对象，document对象一 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    最新300个JavaScript小例子

    JavaScript例子通常涵盖以下关键知识点： 1. **基础语法**：这是JavaScript学习的起点，包括变量声明（var、let、const），数据类型（字符串、数字、布尔、对象、数组、null、undefined），以及运算符（算术、比较...

    经典的JavaScript小例子

    这个"经典的JavaScript小例子"集合提供了一系列实用的代码片段，旨在帮助开发者理解和应用JavaScript的基本概念，同时激发创新思维，为网站增添互动性和趣味性。 首先，我们要明白JavaScript的主要功能：它可以在...

    JavaScript实用例子

    这个压缩包中的JavaScript实用例子很可能会涵盖以上提到的一些或所有知识点。对于初学者来说，通过实际操作这些示例，可以更好地理解和运用JavaScript，提升编程技能。在学习过程中，结合实践不断试验和调试代码，是...

    javascript 注册小例子

    总的来说，"javascript注册小例子"是一个学习和实践JavaScript前端验证的实例，涵盖了基本的表单处理、数据验证、正则表达式应用以及与服务器的异步交互。通过理解和分析这个例子，开发者可以更好地掌握JavaScript在...

    JavaScript例子——计算

    这个“JavaScript例子——计算”很可能是提供了一些关于使用JavaScript进行计算的实例代码，帮助开发者理解如何利用JavaScript处理数学计算、逻辑运算或者更复杂的算法。 在JavaScript中，计算主要涉及以下几个方面...

    javaScript程序例子

    "JavaScript程序例子"这个标题暗示我们将探讨一些实际的JS代码示例，这些示例可能是用于演示特定功能或解决常见问题。 描述中的“JSP网页设计”提到了JavaServer Pages（JSP），这是Java的一种服务器端技术，用于...

    javascript例子

    以上就是JavaScript例子中涉及的一些核心知识点，涵盖了从基础语法到高级应用的多个层面，同时结合了DTree这一可能的特定应用场景。通过深入理解和实践这些内容，开发者能更有效地利用JavaScript进行各种类型的软件...

    JavaScript基础知识例子

    这个压缩包文件“JavaScript基础知识例子.zip”包含了多个HTML文档，每个文档详细介绍了JavaScript的基础知识，特别是关于数据类型、Object类型以及内置对象的概念。 首先，让我们深入探讨JavaScript的数据类型。在...

    javascript简单例子程序

    在这个"javascript简单例子程序"的压缩包中，我们能够找到一些基础的JavaScript示例，帮助初学者理解和掌握JavaScript的基本用法。 1. **动态显示文字**：在JavaScript中，我们可以使用`document.write()`或`...

    javascript login 例子

    javascript login 例子javascript login 例子

    javascript入门实用例子

    本资源“javascript入门实用例子”是一个针对初学者的实践教程，旨在帮助你快速理解并掌握JavaScript的基础知识和实际应用。通过使用Eclipse这样的集成开发环境（IDE），你可以更方便地管理和调试代码。 首先，让...

    javascript100个小例子

    "javascript100个小例子"这个资源集合了100个JavaScript编程的小实例，涵盖了各种操作和效果，非常适合初学者进行实践学习，同时也为项目开发提供了现成的代码片段。 在JavaScript的学习中，了解和掌握以下几个关键...

    500javascript经典例子

    "500JavaScript经典例子"这个资源集合提供了丰富的示例，覆盖了JavaScript的各种功能和应用，无论你是经验丰富的开发者还是初学者，都能从中受益。 JavaScript语法基础是学习的起点，包括变量、数据类型（如字符串...

    JavaScript 例子（JavaScript 源码html格式）

    这个"JavaScript例子"压缩包提供了一系列的源码示例，旨在帮助学习者深入理解和掌握JavaScript的核心概念与实际应用。 1. **基础语法**：JavaScript的基础语法包括变量声明、数据类型（如字符串、数字、布尔值、...

    Web设计开发常用Javascript例子

    本资源包提供了一些常见的JavaScript例子，帮助开发者更好地理解和应用JavaScript技术。下面，我们将详细探讨这些例子所涵盖的JavaScript知识点。 1. **变量与数据类型**： JavaScript支持动态类型，这意味着变量...

    html5 canvas 例子 javascript

    html5 canvas 例子. javascript写的一个游戏,用canvas 绘制移动的背景,键盘控制蝙蝠飞翔,蝙蝠碰到山洞游戏结束.

    javascript小例子代码

    在这个“javascript小例子代码”压缩包中，我们很可能会找到一系列便于理解和学习JavaScript基本概念、语法和常见功能的小型示例代码。 首先，让我们探讨JavaScript的基本结构。在JavaScript中，代码通常是放在`...

    300个JavaScript小例子

    这个名为"300个JavaScript小例子"的资源包，显然是一份学习JavaScript编程的宝贵资料。它包含了300个独立的JavaScript代码实例，每个例子都代表了一个特定的功能或技巧。通过这些实例，我们可以深入理解JavaScript的...

    javascript实用例子文件

    这个"javascript实用例子文件"的压缩包很可能包含了各种实际应用中的JavaScript代码示例，可以帮助学习者更好地理解和掌握JavaScript的核心概念及实践技巧。 首先，我们来看一下JavaScript的基本特性。JavaScript是...

Magicbox
Global site tag (gtag.js) - Google Analytics