javascript例子教程20120614.docx

用javascript修改html元素的class 实例JavaScript代码 需要注意的是在JavaScript中，如果要修改一个元素的class属性，一定要写为className，因为class是JavaScript的保留字。 script type=text/javascript function over(){ var para = document.getElementById(testPara).className = testOver;  } function out(){ var para = document.getElementById(testPara).className = testNormal;  } /script HTML代码 本例只需要一个段落，并且给它设置了默认的class属性“testNormal”，而鼠标划过和划出会分别触发上面的两个JavaScript函数，从而改变该段落自身的class属性。 p id=testPara class=testNormal onmouseover=over() onmouseout=out() 我是示例段落，鼠标滑过我，就可以改变我的class属性，从而改变应用的CSS规则。 /p CSS CSS代码设置了两个测试用的样式。 .testNormal {  border:1px solid black; }.testOver { background:#999999; border:1px solid black;  font-weight:bold;  padding:3em; } JavaScript重定向 实例JavaScript代码 本例定义了两个JavaScript函数，功能都是重定向到首页，但是第一个函数采用的是直接给href赋值的方式，第二个使用的是replace方法。具体请看下面的代码： script type=text/javascript function goBack(){ location.href = /; } function goBackRep(){ location.replace(/); }/script HTML代码 p 点击后面的按钮就可以使得页面转向首页， 可以点击浏览器的后退按钮返回本页。 使用的方法是直接给location.href赋值。/pbutton onclick=goBack(); return false; value=重定向到首页 重定向到首页/buttonp 点击后面的按钮就同样会跳转到首页，但是 由于是使用location.replace的方法，所以不能 通过浏览器的后退按钮返回本页。/pbutton onclick=goBackRep(); return false; value=重定向到首页(不能返回) JavaScript弹出窗口以及窗口间的通信 本网页JavaScript代码 本网页JS，只有一个函数，它负责打开一个300*300的网页。 script type=text/javascript function test(){ window.open(04_popup_test.html,popup,width=300,height=300) }/script HTML代码 form action=#button onclick=test(); return false; value=test 点击测试/button/form JavaScript对象当作关联数组 HTML代码 本例的HTML代码比较简单，一个select元素用来罗列出来可选的背景色。而按钮则负责触发事件，调用函数。 select id=selectColor name=backgroundColor option value=aquaaqua/option option value=blackblack/option option value=blueblue/option option value=fuchsiafuchsia/option option value=graygray/option option value=greengreen/option option value=limelime/option option value=maroonmaroon/option option value=navynavy/option option value=oliveolive/option