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

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

时间: 2024-11-13 09:28:05

JQuery 1.10.2源码分析学习2(转)的相关文章

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

今天主要接着上一篇来讲讲jQuery.prototype中的一些方法,闲话不多说,直接开始. ----------------------------------------------------------------------------------- toArray: function() {        return core_slice.call( this );    }, toArray:把jQuery集合中所有DOM元素恢复成一个数组 从源码中可以看出toArray()返回

JQuery 1.10.2源码分析学习4(转载)

//这里是插件接口jQuery.extend = jQuery.fn.extend = function() {    var src, copyIsArray, copy, name, options, clone,        target = arguments[0] || {}, //参数数组arguments        i = 1,        length = arguments.length,        deep = false;    if ( typeof targ

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

前面转了一个将jQuery总体框架的文章建议先阅读 var    readyList,    rootjQuery,    core_strundefined = typeof undefined,    location = window.location,    document = window.document,    docElem = document.documentElement,    _jQuery = window.jQuery,    _$ = window.$,    

10个web炫酷的jQuery动画插件及源码

1.基于jquery漂亮的按钮 今天给大家分享一款基于jquery漂亮的按钮.这款按钮背景下用了一张图片.当鼠标经过的时候背景用半透明div遮住. 在线演示 源码下载 2.jquery自适应动态内容翻转特效 jquery自适应动态内容翻转特效 在线演示 源码下载 3.多功能网页幻灯片jQuery Cycle 多功能网页幻灯片jQuery Cycle 在线演示 源码下载 4.jQuery书本翻页3D动画特效 记得以前我们有介绍过不少书本翻页的动画,比如这款CSS3书本翻页动画,制作就非常逼真.今天

jquery 2.1.0 源码

/*! * jQuery JavaScript Library v2.1.0 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors * Released under the MIT license * http://jquery.org/license * * Date: 2

转载Aaron ---- jQuery 2.0.3 源码分析core - 选择器

jQuery 2.0.3 源码分析core - 选择器(02) 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象,所以狭隘的说呢,jQuery就是一个选择器,并这个基础上构建和运行查询过滤器! 工欲善其事,必先利其器,所以先从正则入手 我们来分解一个表达式 // A simple way to check for HTML strings // Prioritize

jQuery 2.0.3 源码分析core - 选择器

转载http://www.cnblogs.com/aaronjs/p/3281911.html 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象,所以狭隘的说呢,jQuery就是一个选择器,并这个基础上构建和运行查询过滤器! 工欲善其事,必先利其器,所以先从正则入手 我们来分解一个表达式 // A simple way to check for HTML strin

Jquery实现ready()的源码

1 function bindReady(){ 2 if ( readyBound ) return; 3 readyBound = true; 4 5 // Mozilla, Opera and webkit nightlies currently support this event 6 if ( document.addEventListener ) { 7 // Use the handy event callback 8 document.addEventListener( "DOMC

分享一组很赞的 jQuery 特效【附源码下载】

作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!12款优秀的 jQuery 动画插件 十分惊艳的8个 H