6-1 jQuery中each方法的应用
本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery中each方法的应用

jQuery中有个很重要的核心方法each，大部分jQuery方法在内部都会调用each，其主要的原因的就是jQuery的实例是一个元素合集

如下：找到所有的div，并且都设置样式，css只是一个方法，所以内部会调用each处理这个div的合集，给每个div都设置style属性

$('div').css(...)

jQuery的大部分方法都是针元素合集的操作，所以jQuery会提供$(selector).each()来遍历jQuery对象

.each只是处理jQuery对象的方法，jQuery还提供了一个通用的jQuery.each方法，用来处理对象和数组的遍历

语法

jQuery.each(array, callback )
jQuery.each( object, callback )

第一个参数传递的就是一个对象或者数组，第二个是回调函数

$.each(["Aaron", "慕课网"], function(index, value) {
   //index是索引,也就是数组的索引
   //value就是数组中的值了
});

each就是for循环方法的一个包装，内部就是通过for遍历数组与对象，通过回调函数返回内部迭代的一些参数，第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数)，第二个参数是当前迭代成员(与this的引用相同

jQuery.each()函数还会根据每次调用函数callback的返回值来决定后续动作。如果返回值为false，则停止循环(相当于普通循环中的break)；如果返回其他任何值，均表示继续执行下一个循环。

$.each(["Aaron", "慕课网"], function(index, value) {
    return false; //停止迭代
});

 

jQuery方法可以很方便的遍历一个数据，不需要考虑这个数据是对象还是数组

任务

   

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     p {
  9.         color: red;
  10.     }
  11.     div{
  12.         width:200px; 
  13.         height: 100px; 
  14.         background-color: yellow;
  15.         color:red;
  16.     }
  17.     </style>
  18.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  19. </head>
  20.  
  21. <body>
  22.     <h2>each方法</h2>
  23.     <p>慕课网,专注分享</p>
  24.     <div id="aaron"></div>
  25.     点击观察结果：
  26.     <select id="animation">
  27.         <option value="1">each数组</option>
  28.         <option value="2">each对象</option>
  29.     </select>
  30.     <input id="exec" type="button" value="执行动画">
  31.     <script type="text/javascript">
  32.     $("#exec").click(function() {
  33.         var v = $("#animation").val();
  34.         var $aaron = $("#aaron");
  35.         $aaron.empty();
  36.         if (v == "1") {
  37.  
  38.             // 遍历数组元素
  39.             $.each(['Aaron', '慕课网'], function(i, item) {
  40.                 $aaron.append("索引=" + i + "; 元素=" + item);
  41.             });
  42.         } else if (v == "2") {
  43.             // 遍历对象属性
  44.             $.each({
  45.                 name: "张三",
  46.                 age: 18
  47.             }, function(property, value) {
  48.                 $aaron.append("属性名=" + property + "; 属性值=" + value);
  49.             });
  50.         } 
  51.     });
  52.     </script>
  53. </body>
  54.  
  55. </html>
  56.  
下一节