Jvascript学习实践案例
- 一个自定义的循环遍历元素文本内容的函数
该函数可以确保在HTML和XML DOM文档中很好的工作，使用该函数，就能够获取任何元素文本内容了
循环遍历元素文本内容
1 <html> 2 <head> 3 <meta http-equiv="Content-type" content="text/html;charset=gb2312"> 4 <title>一个循环遍历元素文本内容的函数</title> 5 </head> 6 <body> 7 <div id="test"> 8 <ul> 9 <li><a href="#">a标签1</a></li> 10 <li><a href="#">a标签2</a></li> 11 <li><a href="#">a标签3</a></li> 12 <li><a href="#">a标签4</a></li> 13 </ul> 14 </div> 15 <script type="text/javascript"> 16 <!-- 17 function text(e){ 18 //如果传入的是元素，则继续遍历其子元素，否则假定他是一个数组 19 e=e.childNodes || e; 20 var t=""; 21 //遍历所有的子节点 22 for(var i=0;i<e.length;i++){ 23 if(e[i].nodeType!=1){//如果不是元素节点，则追加其文本值 24 t+=e[i].nodeValue+"<br>"; 25 }else{ 26 t+=text(e[i].childNodes);//否则，继续递归调用 27 } 28 } 29 return t; 30 } 31 var obj=document.getElementById('test'); 32 var text=text(obj); 33 document.write(text); 34 //--> 35 </script> 36 </body> 37 </html>
- 通常，我们使用previousSibling,nextSibling,firstChild,lastChild等等来遍历DOM文档，但是，往往会将文本节点也遍历出来，一般情况下，我们不大需要遍历文本节点。所以，这里，我们可以使用自定义的几个函数将previousSibling,nextSibling,firstChild,lastChild封装起来，跳过遍历到的文本节点，而直接取得元素节点
查找节点的几个替代函数
1 <html> 2 <head> 3 <meta http-equiv="Content-type" content="text/html;charset=gb2312"> 4 <title>previousSibling,nextSibling,firstChild,lastChild和parentNode的替代函数</title> 5 <script type="text/javascript"> 6 <!-- 7 //查找当前元素的前一个兄弟元素节点（注意是元素节点而不是文本节点） 8 function prev(o){ 9 do{ 10 o=o.previousSibling; 11 }while(o.nodeType!=1 && o);//如果前一个兄弟节点是元素节点则跳出循环 12 return o; 13 } 14 //查找当前元素的下一个兄弟元素节点（注意是元素节点而不是文本节点） 15 function next(o){ 16 do{ 17 o=o.nextSibling; 18 }while(o.nodeType!=1 && o);//如果下一个兄弟节点是元素节点则跳出循环 19 return o; 20 } 21 //查找元素的第一个子元素的函数 22 function first(o){ 23 o=o.firstChild; 24 return o.nodeType!=1 && o ? next(o) : o;//如果第一个子节点是元素节点，则返回，否则调用next函数，查找下一个兄弟元素 25 } 26 //查找元素的最后一个子元素的函数 27 function last(o){ 28 o=o.lastChild; 29 return o.nodeType!=1 && o ? prev(o) : o;//如果最后一个子节点是元素节点，则返回，否则调用prev函数，查找前一个兄弟元素 30 } 31 //--> 32 </script> 33 </head> 34 <body> 35 <div id="test"> 36 <p>大部分的WEB开发者在大多数情况下仅仅需要遍历DOM元素而非相邻的文本节点</p> 37 <p>所以，我们可以自己定义几个函数用于替代<b>previousSibling,nextSibling,firstChild,lastChild和parentNode</b></p> 38 <ul> 39 <li><a href="#">a标签1</a></li> 40 <li><a href="#">a标签2</a></li> 41 <li><a href="#">a标签3</a></li> 42 <li><a href="#">a标签4</a></li> 43 </ul> 44 </div> 45 <script type="text/javascript"> 46 <!-- 47 var obj=document.getElementById('test'); 48 document.write("使用nextSibling返回的div元素的下一个兄弟节点，①节点类型:"+obj.nextSibling.nodeType+"②节点名称:"+obj.nextSibling.nodeName+"<br>"); 49 document.write("使用自定义的next函数返回的div元素的下一个兄弟元素，①节点类型:"+next(obj).nodeType+"②节点名称:"+next(obj).nodeName+"<br>"); 50 document.write("使用firstChild返回的div元素的第一个子节点，①节点类型:"+obj.firstChild.nodeType+"②节点名称:"+obj.firstChild.nodeName+"<br>"); 51 document.write("使用自定义的first函数返回的div元素的第一个子元素，①节点类型:"+first(obj).nodeType+"②节点名称:"+first(obj).nodeName+"<br>"); 52 document.write("使用lastChild返回的div元素的最后一个子节点，①节点类型:"+obj.lastChild.nodeType+"②节点名称:"+obj.lastChild.nodeName+"<br>"); 53 document.write("使用自定义的last函数返回的div元素的最后一个子元素，①节点类型:"+last(obj).nodeType+"②节点名称:"+last(obj).nodeName+"<br>"); 54 //--> 55 </script> 56 </body> 57 </html>
获取表单对象的 7 种方式
多种获取表单对象的方式
1 <html> 2 <head> 3 <title>获取表单对象的 7 种方式</title> 4 </head> 5 <body> 6 <form name="myform"> 7 <input type="text" value="获取表单对象的 7 种方式" name="test"> 8 </form> 9 <script type="text/javascript"> 10 <!-- 11 12 document.write("方式1:"+document.myform.test.value+"<br>");//经常用 13 14 document.write("方式2:"+document.forms[0].test.value+"<br>");//通过下标索引访问，较常用 15 16 document.write("方式3:"+document.forms['myform'].test.value+"<br>"); //方式3和方式4可以切换的，这是源于js访问对象的方式可以采用数组形式来访问的缘故 17 document.write("方式4:"+document.forms.myform.test.value+"<br>"); 18 19 document.write("方式5:"+document['myform'].test.value+"<br>"); 20 21 document.write("方式6:"+document.forms.item(0).test.value+"<br>");//注意 是item()，不是item[] 22 document.write("方式7:"+document.forms.item('myform').test.value+"<br>"); 23 //--> 24 </script> 25 </body> 26 </html>
- 使用javascript实现全选，反选，全不选的功能
View Code
1 <html> 2 <head> 3 <title>全选，反选，全不选</title> 4 </head> 5 <body> 6 <script type="text/javascript"> 7 <!-- 8 for (var i=0;i<20;i++){ 9 document.write('测试'+(i+1)+'<input type="checkbox" name="sel[]"><br>'); 10 } 11 var o=document.getElementsByName("sel[]");//全局变量 12 //全选 13 function selall(){ 14 for(var i=0;i<o.length;i++){ 15 o[i].checked="true"; 16 } 17 } 18 //全不选 19 function noselall(){ 20 for(var i=0;i<o.length;i++){ 21 o[i].checked=""; 22 } 23 } 24 //反选 25 function invert(){ 26 for(var i=0;i<o.length;i++){ 27 if(o[i].checked==true){ 28 o[i].checked=""; 29 }else{ 30 o[i].checked=true; 31 } 32 33 } 34 } 35 //--> 36 </script> 37 <a href="javascript:selall(this)">全选</a> 38 <a href="javascript:noselall(this)">全不选</a> 39 <a href="javascript:invert(this)">反选</a> 40 </body> 41 </html>
- 鼠标移上去，显示子栏目列表
显示隐藏菜单
1 <html> 2 <head> 3 <title>操作菜单</title> 4 <style> 5 li{ 6 list-style:none; 7 } 8 #menu ul li{ 9 float:left; 10 width:75px; 11 height:30px; 12 text-align:center; 13 } 14 #submenu{ 15 clear:both; 16 } 17 #submenu ul li{ 18 background:#888; 19 width:236px; 20 } 21 #submenu ul li a{ 22 color:#fff; 23 text-decoration:none; 24 } 25 .highlight{ 26 background:#888; 27 28 } 29 </style> 30 </head> 31 <body> 32 <div id="menu"> 33 <ul> 34 <li onmouseover="change(0)" class="highlight">Menu1</li> 35 <li onmouseover="change(1)">Menu2</li> 36 <li onmouseover="change(2)">Menu3</li> 37 </ul> 38 </div> 39 <div id="submenu"> 40 <ul> 41 <li> 42 <a href="#">子菜单1</a><br> 43 <a href="#">子菜单1</a><br> 44 <a href="#">子菜单1</a><br> 45 <a href="#">子菜单1</a><br> 46 </li> 47 <li style="display:none"> 48 <a href="#">子菜单2</a><br> 49 <a href="#">子菜单2</a><br> 50 <a href="#">子菜单2</a><br> 51 <a href="#">子菜单2</a><br> 52 </li> 53 <li style="display:none"> 54 <a href="#">子菜单3</a><br> 55 <a href="#">子菜单3</a><br> 56 <a href="#">子菜单3</a><br> 57 <a href="#">子菜单3</a><br> 58 </li> 59 60 </ul> 61 </div> 62 <script type="text/javascript"> 63 <!-- 64 var menu=document.getElementById("menu").getElementsByTagName("li"); 65 var submenu=document.getElementById('submenu').getElementsByTagName('li'); 66 function change(num){ 67 for (var i=0;i<menu.length;i++){ 68 if(i==num){ 69 menu[num].className="highlight"; 70 submenu[num].style.display="block"; 71 }else{ 72 menu[i].className=""; 73 submenu[i].style.display="none"; 74 } 75 } 76 77 } 78 //--> 79 </script> 80 </body> 81 </html>
- 通过for...in循环语句，可以遍历出某个对象中的属性
比如，我们想要看下document对象中的所有属性名和属性值，可以使用如下所示的代码：
View Code
<html> <head> <title>遍历document文档对象的所有属性</title> </head> <body> <script type="text/javascript"> <!-- for (var pro in document){ document.write("document."+pro+"="+document[pro]+"<br>"); } //--> </script> </body> </html>
同理，我们也可以用以上方法遍历window对象，location对象，history对象等的属性，当然，也可以用来遍历自定义对象的属性
多得多
