脚本宝典收集整理的这篇文章主要介绍了jQuery源码分析2-JQ对象添加一些方法和属性,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
jquery.fn = jQuery.PRototyPE = {
jquery: core_version, //jquery版本号
constructor: jQuery, //构造器指向
inIT: //jquery的入口函数,主要用来实现选择器和DOM节点的创建
selector: //将选择器进行存储
length: //当前选择器存储的DOM节点的个数
toArray: //通过方法借调的方式,把一个类数组对象转换为一个数组
//类数组对象就是指有数字作为属性,且有length属性,jQuery是一个类数组对象,arguments也是。
get: //获取jquery对象中的某一个DOM节点,返回的是一个DOM节点,
pushStack: //将一个DOM元素集合加入到jQuery对象的prevObject中。
//this.prevObject=this,让当前DOM集合存储到prevObject属性中,方便end()调用是回溯。
each: //对数组进行遍历
ready: //当DOM树加载完毕后,回调该函数
slice: //类似于toArray方法,只是该方法会进行一次pushStack操作
First: //返回第一个元素的jQuery对象
last: //返回最后一个元素的jQuery对象
eq: //传入一个数字num,获取第num个元素的jQuery对象
map: //map将一个数组中的元素转换到另一个数组中,可以传入一个回调函数,作用与each类似,只是map会返回一个新的数组,而each不会
end: //返回调用parent()、find()、filter()等方法之前的jQuery对象,就是回溯到上一个DOM合集
push: core_push, //存储了数组的push方法
sort: [].sort, //存储了数组的sort方法
splice: [].splice //存储了数组的splice方法
}
上面是对jQuery初始化的一些方法和属性的介绍,前面初始化jQuery对象时,我们可以看到jQuery对象其实是一个实例化的jQuery.fn.init,所以这里主要看下init是如何实现,其余的方法在具体用到的时候再看。
首先可以观察到init方法传入了三个参数:
init: function( selector, context, rootjQuery ) {...}
selector(选择器)
context(上下文环境)
rootJQuery( $(document) )
rootjQuery = jQuery(document);//参见866行
init对传入的选择器进行了以下的区分:
if ( !selector ) {return this;}
-
string:这个部分判断有点复杂,会在后面详细的介绍。
if ( typeof selector === "string" )...
-
DOM节点:修改jQuery对象的属性 0:selector,length:1 ;这就相当于把jQuery对象转成了一个类数组,最后返回this,可用于链式调用。
if ( selector.nodeType ){//通过判断该变量是否有nodeType属性来确定是不是一个DOM节点
this.context = this[0] = selector;
this.length = 1;
return this;}
Function: $(fn) 就相当于 $(document).ready(fn)
if ( jQuery.isFunction( selector ){//jquery内部用来判断一个对象是不是一个函数的方法
return rootjQuery.ready( selector );}
jQuery对象:
if ( selector.selector !== undefined ) {//如果改变了有select属性则认为该变量是jQ变量
this.selector = selector.selector;
this.context = selector.context;
return jQuery.makeArray( selector, this );}
其他任意类型的值:将传入的变量和jQuery对象合并成一个数组
return jQuery.makeArray( selector, this );
下面我们来看当 selector 为一个字符串时是如何进行处理的: