jQuery.each( collection, callback(indexInArray, valueOfElement) )详解+练习

- 日理万妓 2022-05-29 05:11 112阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
    	</head>
    	<style type="text/css">
    		  div {
    		    color: blue;
    		  }
    		  div#five {
    		    color: red;
    		  }
    	  </style>
    	<body>
    		<div id="one"></div>
    		<div id="two"></div>
    		<div id="three"></div>
    		<div id="four"></div>
    		<div id="five"></div>
    		
    		
    		<script type="text/javascript">
    			/*
    			 * jQuery.each(collection,callback(indexInArray,valueOfElement))  返回：Object
    			*描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组
    			* 的对象通过一个长度属性（如一个函数的参数对象）来迭代数组索引，从0到
    			* length-1,其他对象通过其属性名进行迭代。
    			* */
    			
    			/**
    			 * 1.jQuery.each(array,callback)
    			 * array
    			 * 类型：Array
    			 * 遍历的数组
    			 * 
    			 * callback
    			 * 类型：Function(Integer indexInArray,Object value)
    			 * 该函数会在每个对象上（迭代）调用
    			 * */
    			
    			/**
    			 * 2.jQuery.each(object,callback)
    			 * object
    			 * 类型：Object
    			 * 遍历的对象
    			 * 
    			 * callback
    			 * 类型：Function(String propertyName,Object valueOfProperty)
    			 * 该函数会在每个对象上（迭代）调用
    			 * */
    			
    			//注意：############
    			/**
    			 * $.each()函数和$(selector).each()是不一样的，那个是专门用来遍历一个
    			 * jQuery对象。
    			 * $.each()函数可用于迭代任何集合，无论是“名/值”对象或一个数组，在迭代
    			 * 数组的情况下，回调函数每次传递一个数组索引和相应的数组值作为参数。（
    			 * 该值也可以通过访问this关键字得到，但是javaScript始终将this值作为一个
    			 * Object，即使他是一个简单的字符串或数字值），
    			 * 该方法返回其第一个参数，这是迭代的对象。
    			 * 
    			 * $each()函数会在内部检索并使用传递集合的length属性，所以，如果集合有
    			 * 一个名为length的属性，比如{bar:"fool",length:10},这个函数可能无法正常
    			 * 工作
    			 * */
    			var person = {name:"Bob",sex:"man"};
    			$.each(person, function(index,val) {
    				console.log(index + " : " + val);
    			});
    			
    			//可以在$each()返回false来终止迭代，
    			var arr = [ "one", "two", "three", "four", "five" ];
    			var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };
    			
    			jQuery.each(arr,function(i,val){
    				$("#" + val).text("Mine is " + val + "." );
    				//在3之后停止
    				return (val !== "three");
    			});
    			
    			jQuery.each(obj,function(i,val){
    				$("#" + i).append(document.createTextNode(" - " + val));
    			});
    			
    			var objTest = {name:"Jack",length:101};
    			jQuery.each(objTest,function(i,val){
    				console.log(i + " : " + val);
    			});
    			
    		</script>
    	</body>
    </html>