jquery遍历详细解析

最新推荐文章于 2023-02-23 14:24:52 发布

Demonor_

最新推荐文章于 2023-02-23 14:24:52 发布

阅读量529

点赞数 1

分类专栏： html 文章标签： html jquery遍历 json each

本文链接：https://blog.csdn.net/A13432421434/article/details/70173557

版权

html 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<!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(){
	
	//这是有规律的多花括号JSON
	var 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"}]; //这是无规律的多花括号JSON
	
	for(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>

Demonor_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery遍历详细解析

1.首先注意引入jqueryJquery_ergodic02body{padding-top:40px;}#main{ width:600px; height:800px; text-align:left; padding-left:20px; }a:link{color:#0CF; text-decoration:none}
复制链接

扫一扫

专栏目录