码迷,mamicode.com
首页 > Web开发 > 详细

JQuery 1.10.2源码分析学习2(转)

时间:2015-06-09 13:18:48      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:

 

jQuery.fn = jQuery.prototype = {
    jquery: core_version,
    constructor: jQuery,
    init: function( selector, context, rootjQuery ) {
        var match, elem;
        if ( !selector ) {
            return this;
        }
        if ( typeof selector === "string" ) {
            if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
                match = [ null, selector, null ];
            } else {
                match = rquickExpr.exec( selector );
            }
            if ( match && (match[1] || !context) ) {
                if ( match[1] ) {
                    context = context instanceof jQuery ? context[0] : context;
                    jQuery.merge( this, jQuery.parseHTML(
                        match[1],
                        context && context.nodeType ? context.ownerDocument || context : document,
                        true
                    ) );
                    if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
                        for ( match in context ) {
                            if ( jQuery.isFunction( this[ match ] ) ) {
                                this[ match ]( context[ match ] );
                            } else {
                                this.attr( match, context[ match ] );
                            }
                        }
                    }

                    return this;
                } else {
                    elem = document.getElementById( match[2] );
                    if ( elem && elem.parentNode ) {
                        if ( elem.id !== match[2] ) {
                            return rootjQuery.find( selector );
                        }
                        this.length = 1;
                        this[0] = elem;
                    }

                    this.context = document;
                    this.selector = selector;
                    return this;
                }
            } else if ( !context || context.jquery ) {
                return ( context || rootjQuery ).find( selector );
            } else {
                return this.constructor( context ).find( selector );
            }
        } else if ( selector.nodeType ) {
            this.context = this[0] = selector;
            this.length = 1;
            return this;
        } else if ( jQuery.isFunction( selector ) ) {
            return rootjQuery.ready( selector );
        }

        if ( selector.selector !== undefined ) {
            this.selector = selector.selector;
            this.context = selector.context;
        }

        return jQuery.makeArray( selector, this );
    },
    selector: "",
    length: 0,

    toArray: function() {
        return core_slice.call( this );
    },
    get: function( num ) {
        return num == null ?
            this.toArray() :
            ( num < 0 ? this[ this.length + num ] : this[ num ] );
    },
    pushStack: function( elems ) {
        var ret = jQuery.merge( this.constructor(), elems );
        ret.prevObject = this;
        ret.context = this.context;
        return ret;
    },
    each: function( callback, args ) {
        return jQuery.each( this, callback, args );
    },
    ready: function( fn ) {
        jQuery.ready.promise().done( fn );
        return this;
    },
    slice: function() {
        return this.pushStack( core_slice.apply( this, arguments ) );
    },
    first: function() {
        return this.eq( 0 );
    },
    last: function() {
        return this.eq( -1 );
    },
    eq: function( i ) {
        var len = this.length,
            j = +i + ( i < 0 ? len : 0 );
        return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
    },
    map: function( callback ) {
        return this.pushStack( jQuery.map(this, function( elem, i ) {
            return callback.call( elem, i, elem );
        }));
    },
    end: function() {
        return this.prevObject || this.constructor(null);
    },
    push: core_push,
    sort: [].sort,
    splice: [].splice
};
jQuery.fn.init.prototype = jQuery.fn;

 

我们先看上面源码中最后面一句jQuery.fn.init.prototype = jQuery.fn;

上一篇我们说过了。这样做就是实现了jQuery.fn.init的protptype指向了jQuery.fn的prototype

这样实现了链式编程的操作。

 

下面我们就一个一个看这个函数里面做了什么

首先就是Init这个函数

selector有一下7中分支情况:

  DOM元素

  body(优化)

  字符串:HTML标签,HTML字符串,#id,选择器表达式

  函数(作为ready回调函数)

  最后返回伪数组

 

toArray:把JQuery集合中所有DOM元素恢复成一个数组

pushStack:取一个数组中的元素,将其放入堆上,返回新的堆上的元素集合(jQuery对象)

end:大多数 jQuery 的遍历方法会操作一个 jQuery 对象实例,并生成一个匹配不同 DOM 元素集的新对象。当发生这种情况时,应该会把新的元素集推入维持在对象中的堆栈内。每次成功的筛选方法调用都会把新元素推入堆栈中。如果我们需要老的元素集,可以使用 end() 从堆栈中弹出新集合。

get:说到get需要把它和eq一起来说  eq返回的是一个jquery对象(这个用了pushStack),get返回的是一个html 对象数组(这个用了toArray)。

each:为每个匹配到的元素规定运行的函数。

ready:当页面加载完在一一运行函数。

frist:选取匹配好的元素集合中的第一个元素。

last:选取匹配好的元素集合中的最后一个元素。

map: 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象

 

 

 

下一章准备我对上面的方法做一些详细的解释和对比,包括他们的用法

 

原创:http://blog.csdn.net/zzx252373003/article/details/10911469

 

JQuery 1.10.2源码分析学习2(转)

标签:

原文地址:http://www.cnblogs.com/mjzhang/p/4562910.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!