码迷,mamicode.com
首页 > Web开发 > 详细

JQuery中$.each 和$(selector).each()的区别详解

时间:2019-02-01 11:37:28      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:name   基本   www.   语法   区别   比较   cto   pos   法则   

JQuery中$.each 和$(selector).each()的区别详解

 

 1、$(selector).each()

jQuery 遍历 - each() 方法主要用于DOM遍历,

each() 方法规定为每个匹配元素规定运行的函数。

语法:

$(selector).each(function(index,element))

 

W3School上显示回调函数是必须的,index - 选择器的 index 位置,element - 当前的元素(也可使用 "this" 选择器).

对于这个方法,在dom处理上面用的较多。

如果页面有多个input标签类型为checkbox,对于这时用$().each来处理多个checkbook,例如:

$(“input[name=’ch’]”).each(function(i){
    if($(this).attr(‘checked’)==true) {
        //一些操作代码
    }
})
回调函数是可以传递参数,i 就为遍历的索引

 

 2、$.each()

在数组等数据处理上比较好用

对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。

each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象、数组的属性值并进行处理。jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用。

each函数根据参数的类型实现的效果不完全一致:

 

1、遍历对象(有附加参数):

$.each(Object, function(p1, p2) {
      this;       //这里的this指向每次遍历中Object的当前属性值
      p1; p2;     //访问附加参数
 }, [‘参数1‘, ‘参数2‘]);
 

 

2、遍历数组(有附件参数):

$.each(Array, function(p1, p2){
      this;       //这里的this指向每次遍历中Array的当前元素
      p1; p2;     //访问附加参数
 }, [‘参数1‘, ‘参数2‘]);
 

 

3、遍历对象(没有附加参数)

$.each(Object, function(name, value) {
      this;      //this指向当前属性的值
      name;      //name表示Object当前属性的名称
      value;     //value表示Object当前属性的值
 });
 
4、遍历数组(没有附加参数)
 $.each(Array, function(i, value) {
       this;      //this指向当前元素
       i;         //i表示Array当前下标
       value;     //value表示Array当前元素
  });
  

 

下面提一下jQuery的each方法的几种常用的用法实例

        
        var arr = ["one", "two", "three", "four"];
        
        $.each(arr, function() {
            alert(this);
        }); 
        //上面这个each输出的结果分别为:one,two,three,four 
// -------------------------------------------------------
            
        var arr1 = [
            [1, 4, 3],
            [4, 6, 6],
            [7, 20, 9]
        ]
        
        $.each(arr1, function(i, item) {
            alert(item[0]);
        }); 
        //其实arr1为一个二维数组,item相当于取每一个一维数组,  
        //item[0]相对于取每一个一维数组里的第一个值  
        //所以上面这个each输出分别为:1 4 7     
// -------------------------------------------------------        
        
        var obj = {
            one: 1,
            two: 2,
            three: 3,
            four: 4
        };
        
        $.each(obj, function(key, val) {
            alert(obj[key]);
        }); 
        //这个each就有更厉害了,能循环每一个属性  
        //输出结果为:1 2 3 4
// -------------------------------------------------------    

 

JQuery中$.each 和$(selector).each()的区别详解

标签:name   基本   www.   语法   区别   比较   cto   pos   法则   

原文地址:https://www.cnblogs.com/libin6505/p/10344914.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!