jquery遍历详细解析

来源：互联网发布：你的眼神网络歌手编辑：程序博客网时间：2024/06/05 04:50
<!doctype html><html><head><meta charset="utf-8"><title>Jquery_ergodic02</title><script language="javascript" type="text/javascript" src="jquery-2.1.4.min.js"></script><style>body{padding-top:40px;}#main{width:600px;height:800px;text-align:left;padding-left:20px;}a:link{color:#0CF; text-decoration:none}a:visited{ color:#0CF; text-decoration:none}a:hover{color:#0F0; text-decoration:none;}a:active{color:#93C; text-decoration:none;}</style><script>function f1(){alert("$().each(List,function(index, element) {...}方法可以遍历"+"\n"+"一维数组、单花括号的JSON、有规律的的多花括号JSON"+"\n"+"以及body的任何元素。"+"\n\n"+"但似乎不能遍历出无规律的多花括号JSON。");//遍历一维数组 //var array = ['one','two','three'];         //    $.each(array,function(key,value) {           //   alert(key+' '+value);             //});     //遍历一个花括号的JSON //var json ={"name":"Amy","role":"student","sex":"male","hobit":"game"}; //$.each(json,function(key,value){//  alert(key+":"+value);//   });//遍历有规律的多个花括号的JSON//var json =[{"name":"Amy","role":"student","sex":"female"},{"name":"Tom","role":"student","sex":"male"}];   //$.each(json, function(index, value) {    //alert("index = "+index+"\n"+"name : "+value.name+"\n"+"role : "+value.role+"\n"+"sex : "+value.sex);   //});}function f2(){           var array = ['one','two','three'];             $.each(array,function(index,value) {              alert(index+' '+value);             }); /*    var array =  ['one','two','three'];       for(var i in array ){alert(i+" "+array[i]);}*/}function f3(){ var json ={"name":"Amy","role":"student","sex":"male","hobit":"game"}; $.each(json,function(index,value){  alert(index+":"+value);   });/* for(var i in json){ alert(json[i]); }*/}function f4(){//这是有规律的多花括号JSONvar json =[{"name":"Amy","role":"student","sex":"female"},{"name":"Tom","role":"student","sex":"male"}];  //  for(var i in json){//alert(i);//alert(json[i].name+"\n"+json[i].role+"\n"+json[i].sex);//}$.each(json, function(index, value) {       alert("index = "+index+"\n"+"name : "+value.name+"\n"+"role : "+value.role+"\n"+"sex : "+value.sex);       });}function f5(){//获取id="div"里面所有内容var html="";var elements = $("#div");    $.each(elements,function(){      alert(html+=$(this).html());}); /* //获取id="div"所有子标签的内容   var div=document.getElementById('div');    var elements=div.childNodes;       for(var i=0;i <elements.length;i++){          var e=elements[i].childNodes[0]; //childNodes[0]取第一个子节点         $.each($(e),function(){alert(e.data);        });       }*//*  //获取id="div"所有无标签的内容   var div=document.getElementById('div');    var elements=div.childNodes;        for(var i=0;i <elements.length;i++){            var d=elements[i]           alert(d.data);        }*/}function f5_1(){//获取id="div"所有子标签的内容//获取id="div"所有子标签的内容   var div=document.getElementById('div');    var elements=div.childNodes;       for(var i=0;i <elements.length;i++){          var e=elements[i].childNodes[0]; //childNodes[0]取第一个子节点 //$(e).each(function(){        $.each($(e),function(){alert(e.data);        });       }}function f5_2(){//遍历p标签元素var html="";var elements = $("#div>p");    $.each(elements,function(){      alert(html+=$(this).html());});}function f5_3(){//获取id="div"所有无标签的内容    alert("?");}function f6(){alert("for(var i in array ){...}方法可以遍历一维数组、单花括号JSON"+"\n"+"有规律的的多花括号JSON,无规律的的多花括号JSON");}function f7(){var json =[{"name":"Amy","role":"student"},{"sex":"male","hobit":"game"}]; //这是无规律的多花括号JSONfor(var i=0;i<json.length;i++){for(var j in json[i]){//alert(j);//alert(json[i][j]);alert(j+":"+json[i][j]);}}   }function f8(){var array =  ['one','two','three','1','2','3']; //$.map()、$.grep(),这两个方法主要用来操作数组，选择出数组中符合条件的记录，并返回,即将一个数组转换为另一个数组var arr = $.grep(array,function(n,value){            return isNaN(n)?n:null;             });for (var key in arr){   alert(arr[key]);} }function f9(){   //$.inArray()函数用于在数组中搜索指定的值，并返回其索引值   var array = ['one','two','three'];   var index = $.inArray("two",array);     alert("数组中two 的索引是"+index+"\n"+"array[1] = "+array[index]);//返回该值在数组中的键值，返回1  }</script></head><body><div id="main"><a onClick="f1()">$each(array,function(index,element){...})</a><br><a onClick="f2()">$each(array,function(index,element){...})遍历一维数组</a><br><a onClick="f3()">$.each(array,function(index,element){...})遍历单花括号JSON</a><br><a onClick="f4()">$.each(array,function(index,element){...})遍历有规律的多个花括号的JSON</a><br><a onClick="f5()">$.each(array,function(index,element){...})遍历以下div所有元素</a><br> <div id="div" style="border:1px dashed #CCC; width:150px; height:150px; text-align:center;" ><p>ergodic div element</p><h5>Hello World </h5>  no Label</div><a onClick="f5_1()">$.each(array,function(index,element){...})遍历上面的div的子标签的内容</a><br><a onClick="f5_2()">$.each(array,function(index,element){...})遍历上面的div的 p 标签的内容</a><br><a onClick="f5_3()">$.each(array,function(index,element){...})遍历上面的div的无标签的内容</a><br><br><br><a onClick="f6()">for(var i in array ){...}</a><br><a onClick="f2()">for(var i in array ){...}遍历一维数组</a><br><a onClick="f3()">for(var i in array ){...}遍历单花括号JSON</a><br><a onClick="f4()">for(var i in array ){...}遍历有规律的复杂一点的JSON</a><br><a onClick="f7()">for(var i in array ){...}遍历无规律的复杂一点的JSON （两个for循环）</a><br><br><br><a onClick="f8()">$.map()、$.grep()选择出数组中符合条件的记录，并返回,得到另一个数组</a><br><a onClick="f9()">$.inArray()函数用于在数组中搜索指定的值，并返回其索引值</a><br><br></div></body></html>
1 0