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

今天主要接着上一篇来讲讲jQuery.prototype中的一些方法,闲话不多说,直接开始。

-----------------------------------------------------------------------------------

toArray: function() {
        return core_slice.call( this );
    },

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

从源码中可以看出toArray()返回调用了core_slice.call(this);

在jquery源码中找到下面代码

core_deletedIds = [],

core_slice = core_deletedIds.slice,

slice: function() {
  return this.pushStack( core_slice.apply( this, arguments ) );
}

从上面可以看出core_deletedIds是一个数组

core_slice.apply( this, arguments )实现了把对象里的属性放入到core_deletedIds数组中

这样实现了对象转成数组。

其实大家想说了为什么调用core_slice时候为什么不用call。而用apply,

而在toArray中调用使用了call;

先看下下面这2个的定义吧

call方法: 
语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
定义:调用一个对象的一个方法,以另一个对象替换当前对象。 
说明: call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指    定的新对象。 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法:
语法:apply([thisObj[,argArray]]) 
定义:应用某一对象的一个方法,用另一个对象替换当前对象。 
说明: 如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。 
    如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

他们的区别在于:

对于apply和call两者在作用上是相同的,但两者在参数上有区别的。
对于第一个参数意义都一样,但对第二个参数:
apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。
如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])
同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入。

--------------------------------------------------------------------------------------------

pushStack: function( elems ) {
        var ret = jQuery.merge( this.constructor(), elems );
        ret.prevObject = this;
        ret.context = this.context;
        return ret;
    },

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

在jQuery内部,pushStack()方法通过改变一个jQuery对象的prevObject属性来"跟踪"链式调用中前一个方法返回的DOM结果集(被jQuery封装过,也是个jQuery对象,说是"跟踪",是因为实际存储的是个引用)PS:这是在网上找到的一段解释。

从源码中可以看出pushStack这个方法接受参数‘数组’,接着jQuery.merge( this.constructor(), elems ),merge的作用就是合并2个数组。

  1. ret.prevObject = this;
  2. ret.context = this.context;

这2句的作用就是 将上个对象的引用推入栈中。

ret.prevObject = this;这句话很重要在end中也有用到。

最后返回最新的Jquery对象。

---------------------------------------------------------------------------------------

  1. end: function() {
  2. return this.prevObject || this.constructor(null);
  3. },

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

实例

选择所有段落,找到这些段落中的 span 元素,然后将它们恢复为段落,并把段落设置为两像素的红色边框:

$("p").find("span").end().css("border", "2px red solid");

-----------------------------------------------------------------------------------------

get: function( num ) {
        return num == null ?
            this.toArray() :
            ( num < 0 ? this[ this.length + num ] : this[ num ] );
    },

eq: function( i ) {
        var len = this.length,
            j = +i + ( i < 0 ? len : 0 );
        return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
    },

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

看上面get和eq的源码就可以看出来了get调用了toArray() eq调用了pushStack()。其实通过上面对toArray()的解释就可以知道toArray()中也调用了pushStack()。只是get多做了一步,把对象转成数组。

------------------------------------------------------------------------------------------

first: function() {
        return this.eq( 0 );
    },
    last: function() {
        return this.eq( -1 );
    },

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

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

上面对frist和last的源码一看就能知道他们都是调用了eq()得到了了一个对象中的一个元素。

-----------------------------------------------------------------------------------

map: function( callback ) {
        return this.pushStack( jQuery.map(this, function( elem, i ) {
            return callback.call( elem, i, elem );
        }));
    },

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

这个感觉也不要做过多的解释直接看源码相信大家就能看明白吧。

通过上面的讲解就可以发现其实这些方法中用到最多的就是pushStack了。

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

时间: 2024-11-13 09:39:20

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

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.$,    

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 ===

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