Jvascript学习实践案例(开发常用) |
|
本文标签：学习实践 一个自定义的循环遍历元素文本内容的函数 该函数可以确保在HTML和XML DOM文档中很好的工作，使用该函数，就能够获取任何元素文本内容了 循环遍历元素文本内容 复制代码 代码如下: <html> <head> <meta http-equiv="Content-type" content="text/html;charset=gb2312"> <title>一个循环遍历元素文本内容的函数</title> </head> <body> <div id="test"> <ul> <li><a href="#">a标签1</a></li> <li><a href="#">a标签2</a></li> <li><a href="#">a标签3</a></li> <li><a href="#">a标签4</a></li> </ul> </div> <script type="text/javascript"> <!-- function text(e){ //如果传入的是元素，则继续遍历其子元素，否则假定他是一个数组 e=e.childNodes || e; var t=""; //遍历所有的子节点 for(var i=0;i<e.length;i++){ if(e[i].nodeType!=1){//如果不是元素节点，则追加其文本值 t+=e[i].nodeValue+"<br>"; }else{ t+=text(e[i].childNodes);//否则，继续递归调用 } } return t; } var obj=document.getElementById(test); var text=text(obj); document.write(text); //--> </script> </body> </html> 通常，我们使用previousSibling,nextSibling,firstChild,lastChild等等来遍历DOM文档，但是，往往会将文本节点也遍历出来，一般情况下，我们不大需要遍历文本节点 。所以，这里，我们可以使用自定义的几个函数将previousSibling,nextSibling,firstChild,lastChild封装起来，跳过遍历到的文本节点，而直接取得元素节点 查找节点的几个替代函数 复制代码 代码如下: <html> <head> <meta http-equiv="Content-type" content="text/html;charset=gb2312"> <title>previousSibling,nextSibling,firstChild,lastChild和parentNode的替代函数</title> <script type="text/javascript"> <!-- //查找当前元素的前一个兄弟元素节点（注意是元素节点而不是文本节点） function prev(o){ do{ o=o.previousSibling; }while(o.nodeType!=1 && o);//如果前一个兄弟节点是元素节点则跳出循环 return o; } //查找当前元素的下一个兄弟元素节点（注意是元素节点而不是文本节点） function next(o){ do{ o=o.nextSibling; }while(o.nodeType!=1 && o);//如果下一个兄弟节点是元素节点则跳出循环 return o; } //查找元素的第一个子元素的函数 function first(o){ o=o.firstChild; return o.nodeType!=1 && o ? next(o) : o;//如果第一个子节点是元素节点，则返回，否则调用next函数，查找下一个兄弟元素 } //查找元素的最后一个子元素的函数 function last(o){ o=o.lastChild; return o.nodeType!=1 && o ? prev(o) : o;//如果最后一个子节点是元素节点，则返回，否则调用prev函数，查找前一个兄弟元素 } //--> </script> </head> <body> <div id="test"> <p>大部分的WEB开发者在大多数情况下仅仅需要遍历DOM元素而非相邻的文本节点</p> <p>所以，我们可以自己定义几个函数用于替代<b>previousSibling,nextSibling,firstChild,lastChild和parentNode</b></p> <ul> <li><a href="#">a标签1</a></li> <li><a href="#">a标签2</a></li> <li><a href="#">a标签3</a></li> <li><a href="#">a标签4</a></li> </ul> </div> <script type="text/javascript"> <!-- var obj=document.getElementById(test); document.write("使用nextSibling返回的div元素的下一个兄弟节点，①节点类型:"+obj.nextSibling.nodeType+"②节点名称:"+obj.nextSibling.nodeName+"<br>"); document.write("使用自定义的next函数返回的div元素的下一个兄弟元素，①节点类型:"+next(obj).nodeType+"②节点名称:"+next(obj).nodeName+"<br>"); document.write("使用firstChild返回的div元素的第一个子节点，①节点类型:"+obj.firstChild.nodeType+"②节点名称:"+obj.firstChild.nodeName+"<br>"); document.write("使用自定义的first函数返回的div元素的第一个子元素，①节点类型:"+first(obj).nodeType+"②节点名称:"+first(obj).nodeName+"<br>"); document.write("使用lastChild返回的div元素的最后一个子节点，①节点类型:"+obj.lastChild.nodeType+"②节点名称:"+obj.lastChild.nodeName+"<br>"); document.write("使用自定义的last函数返回的div元素的最后一个子元素，①节点类型:"+last(obj).nodeType+"②节点名称:"+last(obj).nodeName+"<br>"); //--> </script> </body> </html> 获取表单对象的 7 种方式 多种获取表单对象的方式 复制代码 代码如下: <html> <head> <title>获取表单对象的 7 种方式</title> </head> <body> <form name="myform"> <input type="text" value="获取表单对象的 7 种方式" name="test"> </form> <script type="text/javascript"> <!-- document.write("方式1:"+document.myform.test.value+"<br>");//经常用 document.write("方式2:"+document.forms[0].test.value+"<br>");//通过下标索引访问，较常用 document.write("方式3:"+document.forms[myform].test.value+"<br>"); //方式3和方式4可以切换的，这是源于js访问对象的方式可以采用数组形式来访问的缘故 document.write("方式4:"+document.forms.myform.test.value+"<br>"); document.write("方式5:"+document[myform].test.value+"<br>"); document.write("方式6:"+document.forms.item(0).test.value+"<br>");//注意 是item()，不是item[] document.write("方式7:"+document.forms.item(myform).test.value+"<br>"); //--> </script> </body> </html> 使用javascript实现全选，反选，全不选的功能 复制代码 代码如下: <html> <head> <title>全选，反选，全不选</title> </head> <body> <script type="text/javascript"> <!-- for (var i=0;i<20;i++){ document.write(测试+(i+1)+<input type="checkbox" name="sel[]"><br>); } var o=document.getElementsByName("sel[]");//全局变量 //全选 function selall(){ for(var i=0;i<o.length;i++){ o[i].checked="true"; } } //全不选 function noselall(){ for(var i=0;i<o.length;i++){ o[i].checked=""; } } //反选 function invert(){ for(var i=0;i<o.length;i++){ if(o[i].checked==true){ o[i].checked=""; }else{ o[i].checked=true; } } } //--> </script> <a href="javascript:selall(this)">全选</a> <a href="javascript:noselall(this)">全不选</a> <a href="javascript:invert(this)">反选</a> </body> </html> 鼠标移上去，显示子栏目列表
|
