Jquery的$(selector).each()和$.each()原理和区别

  我们都用过Jqurey中的each函数,都知道each()有两种方式去调用,一种是通过$.each()调用,另一种是$(selector).each()去调用,那么它们之间有什么区别?

  翻看一下Jquery源码就会知道,$.each()是核心的实现,$(selector).each()是调用的$.each(),先来分析一下$.each()的源码(在底部):

   each(obj,callback,args)函数接收3个参数:obj--要遍历的对象或数组、callback--要遍历执行的回调函数、args--自己指定的数组(先无视)。

  1.没有args的情况

    一般来说,args是不常用的,所以先不讨论当if(args)成立的情况,也就是直接看在代码中标为灰色的部分,这也是each()函数核心的部分

   if(isArray) {
      for(; i < length; i++) {
        value = callback.call(obj[i], i, obj[i]);
        if(value === false) { break; }
      }
    }   如果你要遍历的对象,是数组类型,则进入此代码块   for循环遍历数组的每个元素,然后利用call方法,执行obj[i].callback(i,obj[i]),   所以,自己再写回调函数的时候,应该意识到jquery会用数组的每个对象去执行你的回调函数,参数传的是元素在数组中index和该元素,同时回调方法内部的this,也指向该元素;   下一行是判断回调函数是否返回了值,如果回调函数返回false,则跳出该数组的循环。

  如果自己传的对象也是可以遍历的,代码和上面数组遍历也是一样的

   else {
      for(i in obj) {
          value = callback.call(obj[i], i, obj[i]);
          if(value === false) { break; }
        }
    }   如果自己传的是对象,则用for(x in y)遍历对象的属性,   原理和上面一样,只不过换成对象内部的属性x,去执行回调函数,相当于obj.attr.callback(i,obj.attr);   回掉函数中如果返回false,也是会结束循环操作。

  2.有args的情况

  当调用each()有第三个参数的时候,便会进入下面的代码块,来分析下:

    if(isArray) {
            for(; i < length; i++) {
                value = callback.apply(obj[i], args);
                if(value === false) { break; }
            }
        } else {
            for(i in obj) {
                value = callback.apply(obj[i], args);
                if(value === false) { break; }
            }
        }    同样道理,会先判断你要遍历的对象是否是数组,如果是数组,则遍历数组的元素obj[i],并执行obj[i].callback(args)    注意!这个地方传的参数是你自己传进来的args数组,这是和没有args参数不一样的地方,也就是说如果你调用each函数是传入了自己的数组参数,回调函数的参数列表就是你所传的args数组。    其他的同上。
  还有大家注意到了没有?有args和没有args的区别就是一个用了apply(),而另一个用了call(),这儿简单记一下他俩的区别:

  Apply():While the syntax of this function is almost identical to that of call(), the fundamental difference is that call() accepts anargument list,while apply() accepts a single array of arguments. --引自MDN

  翻译一下就是:虽然这个apply()和call()句法几乎一致,但是有一个重要的区别就是call()函数是接受多个参数,而apply()仅仅接受一个数组对象。

  $(selector).each(callback,args)函数接收2个参数:callback--要遍历执行的回调函数、args--自己指定的数组。

  明白了$.each()函数,$(selector).each就简单了,翻开源码,$(selector).each内部就是调用的$.each()函数,源码如下:

  each: function( callback, args ) {
      return jQuery.each( this, callback, args );
  },

  可以看到,在调用$.each()的时候,obj参数是写成了this,也就是$(selector),这是jquery选择器返回一个jquery内部对象。

  

  总结:$.each()$(selector).each()的区别就是前者可以针对所有对象或者数组进行遍历,而后者是针对jquery选择器返回的jquery内部对象进行遍历,前者更强大一些

  

  附上源码

 //Jquery中$.each()的源码 each: function(obj, callback, args) {
    var value,i = 0,
    length = obj.length,
    isArray = isArraylike(obj);
    if(args) {
        if(isArray) {
            for(; i < length; i++) {
                value = callback.apply(obj[i], args);
                if(value === false) { break; }
            }
        } else {
            for(i in obj) {
                value = callback.apply(obj[i], args);
                if(value === false) { break; }
            }
        }
        // A special, fast, case for the most common use of each
    } else {
        if(isArray) {
            for(; i < length; i++) {
                value = callback.call(obj[i], i, obj[i]);
                if(value === false) { break; }
            }
        } else {
            for(i in obj) {
                value = callback.call(obj[i], i, obj[i]);
                if(value === false) { break; }
            }
        }
    }
时间: 2024-08-25 06:56:31

Jquery的$(selector).each()和$.each()原理和区别的相关文章

jQuery图片插件自动轮播原理解析

经常看到项目要用到图片轮播效果,一般的操作流程都是先到网上找一个好看的JQuery图片轮播插件,然后看下demo,再配下参数.好了,关机下班回家 其余的就交给插件吧. 是不是感觉有了jQuery,世界变得那么美好呢. 本人最近用的一个插件是 jquery.carousel.js,官方网站是:http://richardscarrott.co.uk/posts/view/jquery-carousel-plugin 下面,我们来讨论一下图片轮播原理. 首先来个简单的demo 效果图如下: 这是个导

JQuery :Not() Selector Example

It’s been a while since I wrote about JQuery. I am spending most of my time these days on backend technologies. Recently while working on a typical requirement on UI, I had to play with some tricky JQuery selectors. Typically, most of the times we us

jquery attribute selector

Jquery attribute selector非常普遍在日常开发中 今天的case是,通过href 找a <li><a href="#SCOM">SCOM</a></li> $("[href='#VMHost']")[0].click(); 必须加上[0], 之前返回的是一个数组.

jQuery Custom Selector JQuery自定义选择器

什么是JQuery的选择器呢,详见JQuery中的Selector: http://docs.jquery.com/Selectors 比如 $("div:contains('John')").css("text-decoration", "underline");的contains选择器等等 JQuery自定义选择器的基本语法: $.expr[':'].test = function(obj, index, meta, stack){ /* o

jquery的bind跟on绑定事件的区别

Jquery的bind跟on绑定事件的区别:主要是事件冒泡(事件代理): jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(events [,selector]  [,data], handler) 从文档中可以看出,.on方法比.bind方法多一个参数'selector' .on的selector参数是筛选出调用.on方法的dom元素的指定子元素,如: $('ul').on('click', 'li', fun

Jquery绑定事件(bind和live的区别)

Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其要

HashMap,Hashtable,ConcurrentHashMap 和 synchronized Map 的原理和区别

HashMap 是否是线程安全的,如何在线程安全的前提下使用 HashMap,其实也就是HashMap,Hashtable,ConcurrentHashMap 和 synchronized Map 的原理和区别.当时有些紧张只是简单说了下HashMap不是线程安全的:Hashtable 线程安全,但效率低,因为是 Hashtable 是使用 synchronized 的,所有线程竞争同一把锁:而 ConcurrentHashMap 不仅线程安全而且效率高,因为它包含一个 segment 数组,将

jQuery height()、innerHeight()、outerHeight()函数的区别详解

jQuery height().innerHeight().outerHeight()函数的区别详解 在jQuery中,获取元素高度的函数有3个,它们分别是height(). innerHeight().outerHeight(). 与此相对应的是,获取元素宽度的函数也有3个,它们分别是width(). innerWidth().outerWidth(). 在这里,我们以height().innerHeight().outerHeight()3个函数为例,来详细介绍它们之间的区别. 下面我们以元

jQuery中hover与mouseover和mouseout的区别分析

本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于hover事件.两个没什么区别,应该是一样的.但昨天一个动画效果才让我见识了,这两个并不能等同. <div class="wrapper"> <div class="img"></div> <div class="tex