jQuery源码笔记——四

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的操作对象。

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

回调函数

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

时间: 2024-11-06 14:27:20

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

jquery 源码笔记:

1.使用了jquery,但是觉得了解 jquery的源码才能 更容易知道怎么使用,所以在网上找了一些 jquery的源码 笔记 还有看了 妙味课堂 的 一部分视频,现在写一些总结. 一.  jquery的 总体架构: 1.jquery 有良好的对外接口,  window.jQuery = window.$ = jQuery; 现在 是 通过jquery 2.0.3 源码的分析: (21,94)  21—94行, 定义了一些变量和函数,   jQuery = function(); (96,283

转载:Pixhawk源码笔记四:学习RC Input and Output

转自:新浪@WalkAnt 第五部分 学习RC Input and Output 参考:http://dev.ardupilot.com/wiki/learning-ardupilot-rc-input-output/ RC Input,也就是遥控输入,用于控制飞行方向.改变飞行模式.控制摄像头等外围装置.ArduPilot支持集中不同RC input(取决于具体的硬件飞控板): 1. PPMSum – on PX4, Pixhawk, Linux and APM2 2. SBUS – on P

jquery源码笔记(四): jquery.extend=jquery.fn.extend

extend()  方法,   合并两个或更多对象的属性到第一个对象中,jQuery后续的大部分功能都通过该函数扩展, 当参数只有一个对象时,则将对象的属性添加到jQuery对象中. jquery 中扩展插件的形式:  2种方法 $.extend({ //扩展工具方法 aaa:function(){ alert(10); }, bbb:function(){ alert(20) } }); $.fn.extend({ //扩展jquery实例方法 aaa:function(){ alert("f

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

借用百度百科来说明下回调函数: 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应. jQuery回调对象实现恰好利用了设计模式中的观察者模式思想,观察者模式 (pub/sub) 的背后,总的想法是在应用程序中增强松耦合性.并非是在其它对象的方法上的单个对象调用.一个对象作为特定任务或

jQuery源码学习(四)

队列queue() 队列(先进先出)方法,执行顺序的管理. <script type="text/javascript"> //大体框架 //队列先进先出 //队列其实就是一个数组 jQuery.extend([//工具方法 queue//相当于数组的push操作-往数组的后面添加数据 入队操作 dequeue//相当于数组的shift操作-从数组的前面取数据 出队操作 _queueHooks ]); jQuery.fn.extend([//实例方法 queue //入队

javascript 跟Aaron大神学习jquery源码笔记

/* 通过new操作符构建一个对象,一般经过四步: A.创建一个新对象 B.将构造函数的作用域赋给新对象(所以this就指向了这个新对象) C.执行构造函数中的代码 D.返回这个新对象 最后一点就说明了,我们只要返回一个新对象即可. 其实new操作符主要是把原型链跟实例的this关联起来,这才是最关键的一点, 所以我们如果需要原型链就必须要new操作符来进行处理.否则this则变成window对象了. */ /* var $$ = ajQuery = function(selector) { t

jquery源码笔记(三): jquery.prototype的一些方法 和属性 init

jquery.fn = jquery.prototype = { 添加实例属性和方法, jquery: 版本, constructor: 修正指向问题 init(): 初始化 和 参数管理 selector:存储选择字符串 length: this 对象的长度 toArray(): 转数组 get(): 转原生集合 pushStack(): jquery 对象入栈 each()  :  便利集合 ready():DOM加载的接口 slice(): 集合的截取 first(): 集合的第一项 la

jQuery源码笔记——回调对象

回调对象是一个多用途的回调列表对象,提供了强大的的方式来管理回调函数列表. 最简单的缓存对象 function Callbacks(){ var list = [], self = { add: function(fn){ list.push(fn); }, remove: function(fn){ var index; if((index = list.indexOf(fn)) > -1){ list.splice( index, 1 ); } }, fire: function(value

jQuery源码笔记——三

将类数组对象转化为数组对象 javascript中有许多类数组对象,比如HTMLCollection,NodeList,arguments.她们的特点是和数组一样有length属性,并且有0,1,2这样的位置属性.在代码编写中我们经常需要将他们转化为数组对象. //mini类数组对象 var arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 } console.log(Array.prototype.