jQuery源码笔记——四

最新推荐文章于 2025-09-09 16:55:30 发布

转载最新推荐文章于 2025-09-09 16:55:30 发布 · 70 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/winderby/p/4081892.html

文章标签：

#javascript #ViewUI

本文详细解析了jQuery中的each()方法的实现原理，包括如何遍历数组或集合对象，并通过回调函数进行操作。文章还展示了each()方法的实际应用示例，以及其在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())
});