jquery源码解析:jQuery原型的方法和属性介绍

上一篇主要讲解了jQuery原型中最重要的方法init。接下来再讲一些比较常用的原型方法和属性

core_slice = [].slice,

jQuery.fn = jQuery.prototype = {

  toArray: function(){    

    //把jQuery对象转换成原生元素的数组,比如:$("div").toArray(),{0:"div",1:"div"}   ->   ["div","div"]

    return core_slice.call( this );

  },

  get: function( num ) {  //得到原生的元素(可以取到某一个)
    return num == null ?

      this.toArray() :( num < 0 ? this[ this.length + num ] : this[ num ] );

      //[],除了取下标,还可以取属性。如果this是数组,就取下标,如果是对象就取属性

  },

  pushStack: function( elems ) {    //栈的实现,先进后出。

    var ret = jQuery.merge( this.constructor(), elems );   //把传入的elems(数组)转换成jQuery对象

    //this.constructor()是一个空的jQuery对象,jQuery()。

    ret.prevObject = this;    //使p(jQuery)的prevObject指向div(jQuery) 

    //这里的作用是为了回溯用,比如,$("div").pushStack($("p")).css()后,我想对div进行处理,这时可以调用$("div").pushStack($("p")).css().end().css(),后面这个css就会只对div进行处理了,end方法就是取p的prevObject属性。 
    ret.context = this.context;

    return ret;    //返回p(jQuery)
  },//举个列子,$("div").pushStack($("p")).css();这个css就只对p进行处理。  

  end: function() {
    return this.prevObject || this.constructor(null);  //如果没有,就创建一个空的jQuery对象
  },  

  slice: function() {  //$("div").slice(1,3).css().end().css(),假设有4个div,那么第一个css只对第二个和第三个有效果,end之后,第二个css对这4个div都有效果。
    return this.pushStack( core_slice.apply( this, arguments ) );   //4个div.pushStack(2个div)
  }, 

  each: function( callback, args ) {    //实例方法调用的是工具方法(很多这种调用方式)。
    return jQuery.each( this, callback, args );   //$("div").each(a) -> return jQuery.each( $("div"), a, undefined),第三个参数供jQuery内部使用。

    //jQuery.each会循环每一个div,执行a回调方法,a.call( obj[ i ], i, obj[ i ] );也就是在div的执行上下文,执行a(i,div),其中i为当前div的index值。
  },  

  ready: function( fn ) {
    //可以先看我的另外一篇博客:http://www.cnblogs.com/chaojidan/p/4121788.html
    jQuery.ready.promise().done( fn );

    return this;
  }, 

  eq: function( i ) {
    var len = this.length,
    j = +i + ( i < 0 ? len : 0 );   //+i就是把传入的数字字符转化成数字,比如:"3"->3.
    return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
  },//eq方法也可以用end方法,返回到原jQuery对象。

  map: function( callback ) {    //$("div").map(a)

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

      //map方法是针对每一个div,执行function(elem,i)方法,传入div,和div的index值。里面调用callback.call( elem, i, elem ),a.call(div,i,div),如果执行a方法得到的是undefined或者是null,就会过滤掉此div。
    }));
  },

  .....

}

差不多就这些了,其实我还想说下js各种方法调用时,里面的参数个数和顺序,面试官很喜欢问。请看我这篇博客:http://www.cnblogs.com/chaojidan/p/4142338.html

加油!

时间: 2024-11-15 00:45:23

jquery源码解析:jQuery原型的方法和属性介绍的相关文章

JQuery源码解析-JQuery的工具方法(2)

这篇对下面的方法进行讲解: isFunction():是否为函数 isArray():是否为数组 isWindow():是否为window isNumeric()是否为数字 type():判断数据类型 isPlainObject():是否为对象自变量 isEmptyObject():是否为空的对象 isFunction方法: 这个方法很简单,判断对象是否为函数,返回bool类型,看一下源码: // See test/unit/core.js for details concerning isFu

JQuery源码解析-JQuery的工具方法(3)

这篇文章主要对下面这几个方法进行解释 error();抛出异常 parseHTML():解析节点 parseJSON():解析JSON parseXML:解析XML noop():空函数 globalEval():全局解析JS camelCase():转驼峰 nodeName():是否为指定节点(内部) error:方法: error方法的作用是抛出一个自定义异常,内部直接调用了原生解释的throw new Error error: function( msg ) { throw new Err

JQuery源码解析-JQuery的工具方法(5)

下面对最后这几个方法进行讲解. guid():唯一表示(内部) proxy():改变this指向 access(): 多功能值操作 now():当前时间 swap():css交换(内部) guid: 这个属性是对事件进行控制的,例如每次对dom元素进行绑定事件的时候,会通过这个属性进行绑定,这个属性每次自增,产生一个唯一的标示,所以对dom元素进行事件解绑等操作的时候,通过这个属性就可以找到. 源码: // A global GUID counter for objects guid: 1, p

JQuery源码解析-JQuery的工具方法(4)

下面对这些方法进行讲解 each():遍历集合 trim():去前后空格 makeArray():类数组转换真数组 inArray():数组版indexOf merge():合并数组 grep():过滤新数组 map():映射新数组 each方法: each是遍历集合用的方法,也是一个加强版的循环操作.例如: var arr = { Name: 'jam', Age: 15 }; $.each(arr, function (key, val) { console.log(key + ":&quo

十七.jQuery源码解析之入口方法Sizzle(1)

函数Sizzle(selector,context,results,seed)用于查找与选择器表达式selector匹配的元素集合.该函数是选择器引擎的入口. 函数Sizzle执行的6个关键步骤如下: 1.解析选择器表达式,解析出块表达式和关系符. 2.如果存在位置伪类,则从左向右查找: a.查找第一个块表达式匹配的元素集合,得到第一个上下文元素集合. b.遍历剩余的块表达式和块间关系符,不断缩小上下文元素集合. 3.否则从右向左查找: a.查找最后一个块表达式匹配的元素集合,得到候选集,映射集

jQuery方法源码解析--jQuery($)方法(一)

jQuery方法源码解析--jQuery($)方法 注: 1.本文分析的代码为jQuery.1.11.1版本,在官网上下载未压缩版即可 2.转载请注明出处 jQuery方法: 这个方法大家都不陌生,在使用过程中,它还有另外一个名字,美元符号:$,$(...)其实就是jQuery(...); 它有很多种用法,通常都返回一个jquery对象,也可以作为$(document).ready(...);的简写形式,分析之前先看一下jQuery都有什么用法. 1.jQuery( selector [, co

jQuery源码解析(jQuery对象的实例属性和方法)

1.记录版本号 以及 修正constructor指向 jquery: core_version, constructor: jQuery, 因为jQuery.prototype={ ... } 这种写法将自动生成的jQuery.prototype.constructor属性覆盖删除,所以需要重新修正(指向其构造函数 jQuery).2.init() 初始化方法: init()方法最终返回的是this -jQuery(其实是jQuery.prototype.init)方法的实例对象. 实例对象继承

jquery源码解析:代码结构分析

本系列是针对jquery2.0.3版本进行的讲解.此版本不支持IE8及以下版本. (function(){ (21, 94)     定义了一些变量和函数,   jQuery = function(){}; (96,283)   给jQuery对象添加一些属性和方法(实例方法,通过$("div")这类的jQuery实例对象来调用) (285,347)   extend : jQuery的继承方法 (349,817)   jQuery.extend():扩展一些工具方法(静态方法,直接通

十一.jQuery源码解析之.pushStack()

pushStack()顾明思意,就是像桟中添加东西呗,现在看看他是如何添加东西的. 创建一个空的jQuery对象,然后把Dom元素集合放入这个jQuery对象中, 并保留对当前jQuery对象的引用. pushStack是核心方法之一,它为以下方法提供支持: jQuery对象遍历:.eq(),first(),.last(),.slice(),.map(); Dom查找,过滤:.find(),.not(),.filter(),.closest(),.add(),.andSelf(). Dom遍历:

jQuery源码解析(架构与依赖模块)第一章 理解架构

1-1 jQuery设计理念 引用百科的介绍: jQuery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,它