each()实现

var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
};
jQuery.fn = jQuery.prototype = {
selector: "",
init: function(selector){
//仍然是mini的选择器。
var result = document.querySelectorAll(selector);
for(var i = 0;i < result.length;i++){
this[i] = result[i]
}
this.length = result.length;
},
//指定操作对象为this
each: function(callback){
return jQuery.each(this,callback)
},
constructor : jQuery
}
jQuery.fn.init.prototype = jQuery.fn
//对任意对象进行迭代操作
jQuery.each = function(obj,callback){
for(var i = 0;i<obj.length;i++){
//运用call调整this的指向
//回调函数里的this指向操作的对象
//方便操作
callback.call(obj[i],i,obj[i]);
}
//链式调用
return obj
}
//测试
jQuery("div").each(function(index, element) {
console.log(this)
});
//jQ内部也经常用迭代操作数组或其它。
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
console.log(name.toLowerCase())
});

jQuery.each是jQuery的工具,迭代操作对象合集里的对象,所以不用继承在原型中,而jQuery.fn.each就是jQuery.each的一个特例。

each是一个典型的迭代运用,如我们想对一个合集的对象都执行的某功能,callback,通过each遍历对象或者数组就可以实现不停变化callback的操作对象。

原理很简单就是将元素遍历依次传给回调函数,原代码中还考虑了一些情况,但没什么新知识,我就不补充了。

回调函数

作为参数的函数就叫回调函数。当一个函数接收一个函数

jQuery源码笔记——四的更多相关文章

  1. jQuery源码笔记(一):jQuery的整体结构

    jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类库相比,它剑走偏锋,从 web 开发的实用角度出发,抛除了其它 Lib 中一些中看但不实用 ...

  2. Tomcat8源码笔记(四)Server和Service初始化

    上一章 简单说明下Tomcat各个组件: Server:服务器,Tomcat服务器,一个Tomcat只有一个Server组件; Service:业务层,是Server下最大的子容器,一个Server可 ...

  3. jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}

    笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...

  4. jquery源码分析(四)——回调对象 Callbacks

    借用百度百科来说明下回调函数: 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该 ...

  5. jQuery 源码分析(四) each函数 $.each和$.fn.each方法 详解

    $.each一般用来遍历一个数组或对象,$.fn.each()就是指jQuery实例可以执行的操作(因为$.fn是jQuery对象的原型) $.each用来遍历一个数组或对象,并依次执行回掉函数,最后 ...

  6. jQuery源码笔记——回调对象

    回调对象是一个多用途的回调列表对象,提供了强大的的方式来管理回调函数列表. 最简单的缓存对象 function Callbacks(){ var list = [], self = { add: fu ...

  7. jQuery源码笔记——延迟对象

    提供一种方法来执行一个或多个对象的回调函数, Deferred对象通常表示异步事件. 它是回调对象的拓展运用,在jQuery当中非常依赖回调对象. 一个简单的,只解决成功状态下的缓存实例 functi ...

  8. jQuery源码笔记——数据缓存

    数据缓存是为了解决内存泄露,他的原理是,当我们将数据存储到一个对象上面,实际上是将所有的数据存到一个单独的数据对象里,而这个对象只提供一个接口,这个接口可以访问自己存在数据对象里自己的数据. 这是一个 ...

  9. jQuery源码笔记——三

    将类数组对象转化为数组对象 javascript中有许多类数组对象,比如HTMLCollection,NodeList,arguments.她们的特点是和数组一样有length属性,并且有0,1,2这 ...

随机推荐

  1. Geoserver基本使用、WMS服务发布与OpenLayers测试

    1.Geoserver与OpenLayers的下载 Geoserver:http://geoserver.org/ OpenLayers:http://openlayers.org/ 2.安装部署Ge ...

  2. TLV----Demo讲解

    接触过网络协议的人对TLV一定或多或少的知道.作为一种自定义应用层标准. TLV使用十分广泛.他对数据封包有着很好的定义,简单实用. TLV即Type-Length-Value.即我们每个封装成TLV ...

  3. javascript数据类型、初始化

    Javascript数据类型有6种: 数值型数据类型(Number): 字符串(String): 布尔型数据(Boolean): 对象数据(Object): 空(Null): 未定义(Undefine ...

  4. getpwent()

    http://baike.baidu.com/link?url=XcTB74zhdRLwFaqFIP73u-hSpZgGqYejqnnHGTRfhNF8B7Z2yO4pVwaFaMK24Hkk6nye ...

  5. UILabel,UITextField 以及UIButton应用

    </pre><pre name="code" class="cpp">一.UILabel 它是ioS开发使用的控件来显示文本,它是UIV ...

  6. android.widget.FrameLayout$LayoutParams cannot be cast to android.widget.LinearLayout$LayoutParams

      http://blog.csdn.net/lilu_leo/article/details/11952717 有时候需要在在代码中设置LayoutParams,自己为一个FrameLayout设置 ...

  7. python基础教程_学习笔记14:标准库:一些最爱——re

    标准库:一些最爱 re re模块包括对正則表達式的支持,由于以前系统学习过正則表達式,所以基础内容略过,直接看python对于正則表達式的支持. 正則表達式的学习,见<Mastering Reg ...

  8. LeetCode Day5——House Robber

    问题描述: 意思就是说:给定一个数组,寻找一种选取方法,使得在保证任何两个相邻元素不同时被选的条件下得到的数值总和最大. 1. 递归 设nums为数组首地址,numsSize为数组的大小,max[i] ...

  9. 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究

    我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var ...

  10. sql中的split方法

    ALTER function [dbo].[f_split](@SourceSql varchar(8000),@StrSeprate varchar(10))returns @temp table( ...