<!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>
转载请注明原文地址: https://ju.6miu.com/read-675539.html
