我们都用过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; }
}
}
}

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

  1. 细说jQuery原型的创建和实现原理,并用实例简单模仿

    在解析jQuery实现机理之前,我们先总结一下几点知识,这些都是我学习路上遇到的坑,我跌倒过很多次,现在把它补上: 1)自定义构造函数,如下例: function person(){ this.nam ...

  2. jQuery插件实现的方法和原理简单说明

    下文来自 http://www.itzhai.com/jquery-plug-ins-to-achieve-the-methods-and-principles-of-simple-instructi ...

  3. jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理

    jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理 最近在看jquery源码分析的视频教学,希望将视频中学到的知识用博客记录下来,更希望对有同样对jquery源码有困惑 ...

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

    jquery的bind跟on绑定事件的区别:主要是事件冒泡: jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(ev ...

  5. jquery中,size()和length()方法有啥区别

    jquery中,size()和length()方法有啥区别? size()是jQuery提供的函数,而length是属性(不带括号). jQuery提供的源代码是这样的: size: function ...

  6. jquery的hover mouseover mouseout mouseenter mouseleave的区别

    jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...

  7. 前端笔记之jQuery(上)加载函数的区别&对象&操作HTML/CSS&动画&选择器

    一.jQuery简介 1.0 JavaScript编程比较恶心的地方 恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...

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

    HashMap 是否是线程安全的,如何在线程安全的前提下使用 HashMap,其实也就是HashMap,Hashtable,ConcurrentHashMap 和 synchronized Map 的 ...

  9. 转:jquery的$(function(){})和$(document).ready(function(){}) 的区别

    原文链接:https://www.cnblogs.com/slyzly/articles/7809935.html [转载]jquery的$(function(){})和$(document).rea ...

随机推荐

  1. 嵌入式 Linux下永久生效环境变量bashrc

    嵌入式 Linux下永久生效环境变量bashrc 1) .bashrc文件 在linux系统普通用户目录(cd /home/xxx)或root用户目录(cd /root)下,用指令ls -al可以看到 ...

  2. Oracle交易流水号问题

    需求:生成交易流水号,每次新增一条记录时都自动加1,且流水号形式为000000001形式的10位数字. 思路:利用序列可以生成自增的流水号,只需要在前面添加N个0即可,同时,由于数字的长度一定,因此可 ...

  3. springmvc @responsebody 406/415问题解决

    提供几个解决思路 1.如果项目中用的spring jar包是4.x版本, 需要jackson-annotations-2.x/jackson-core-2.x/jackson-databind-2.x ...

  4. [实战]MVC5+EF6+MySql企业网盘实战(29)——更新日志

    摘要 NetDisk更新日志,及项目使用说明. 开发工具 Vs2013+mysql+ef6+mvc5 bug 1.在加载列表的时候,默认加载的所有,修改为,过滤逻辑删除的文件. 2.加载音乐,文档等分 ...

  5. MySQL模糊搜索的四种用法

    1,%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * FROM [user] WHERE u_name LIKE '% ...

  6. JQuery radio(单选按钮)操作方法汇总

    这篇文章主要介绍了JQuery radio(单选按钮)操作方法汇总,本文讲解了获取选中值.设置选中值.根据Value值设置选中.删除Radio.遍历等内容,需要的朋友可以参考下   随着Jquery的 ...

  7. iOS面试题

    一个区分度很大的面试题 考察一个面试者基础咋样,基本上问一个 @property 就够了: @property 后面可以有哪些修饰符? 线程安全的: atomic,nonatomic 访问权限的 re ...

  8. Eclipse 中文的设置

    步骤如下:一.下载:在Eclipse官网下载相应版本的中文包. 二.中文包安装:1.解压中文语言包中的两个文件夹至Eclipse文件夹的dropins文件夹中.(目录不要放错)2.安装:方法一:使用命 ...

  9. 学习实战java虚拟机的计划图

    啥也不说了,实战java虚拟机,好好学习,天天向上! <实战java虚拟机>一书Q交流群:397196583

  10. LPC1769 CAN的自测试模式

    一.背景 客户要了一块单路CAN的板子,他希望在没有其他板子的情况下进行自行测试,然后按照我写的 APP选择自收发测试选项,却无法接收到发送的信息,但是外接了一块板子就可以接收到自己发送的 信息:由于 ...