正文
jQuery源码分析之=>jQuery的定义
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
最近写前段的代码比较多，jQuery是用的最多的一个对象，但是之前几次看了源码，都没搞清楚jQuery是怎么定义的，今天终于看明白怎么回事了。记录下来，算是一个新的开始吧。
（文中源码都是jQuery-1.10.2版本的）
先上一段jQuery定义的源码，定义了jQuery为一个function
// Define a local copy of jQuery
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
}
这就是我们常用的格式：$("#div1")；就是通过这个函数定义的
这个函数只有一行有效代码，就是实例化了一个类型，这个类型是在jQuery的原型中定义的，那么继续往下看。
jQuery.fn = jQuery.prototype = {
// The current version of jQuery being used
jquery: core_version, constructor: jQuery,
init: function( selector, context, rootjQuery ) {
var match, elem; // HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
return this;
} // Handle HTML strings
if ( typeof selector === "string" ) {
if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ]; } else {
match = rquickExpr.exec( selector );
} // Match html or make sure no context is specified for #id
if ( match && (match[1] || !context) ) { // HANDLE: $(html) -> $(array)
if ( match[1] ) {
context = context instanceof jQuery ? context[0] : context; // scripts is true for back-compat
jQuery.merge( this, jQuery.parseHTML(
match[1],
context && context.nodeType ? context.ownerDocument || context : document,
true
) ); // HANDLE: $(html, props)
if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
for ( match in context ) {
// Properties of context are called as methods if possible
if ( jQuery.isFunction( this[ match ] ) ) {
this[ match ]( context[ match ] ); // ...and otherwise set as attributes
} else {
this.attr( match, context[ match ] );
}
}
} return this; // HANDLE: $(#id)
} else {
elem = document.getElementById( match[2] ); // Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
if ( elem && elem.parentNode ) {
// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem.id !== match[2] ) {
return rootjQuery.find( selector );
} // Otherwise, we inject the element directly into the jQuery object
this.length = 1;
this[0] = elem;
} this.context = document;
this.selector = selector;
return this;
} // HANDLE: $(expr, $(...))
} else if ( !context || context.jquery ) {
return ( context || rootjQuery ).find( selector ); // HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
return this.constructor( context ).find( selector );
} // HANDLE: $(DOMElement)
} else if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this; // HANDLE: $(function)
// Shortcut for document ready
} 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 );
},
。。。其他方法省略
}
在上面这段代码中，定义了jQuery的原型，然后将原型赋给了jQuery.fn；$.fn这个东西大家应该都很熟悉了，我们扩展jQuery插件的时候时长用到它，其实就是想jQuery的原型中添加了方法。
在原型的定义中重要的就是init函数了，有三个参数：selector,context,rootjQuery。
在这个函数中根据各种情况做了判断，比如：selector对象为false时的就是处理$("")或者$(null)或者$(undefined)，(注释上都有说明)；
如果selector是function时，就是我们最常用的页面加载处理函数：$(function(){......});
到这里，应该就可以明白了，jQuery对象不过是一个函数，然后在内部实例化了一个jQuery.fn.init;
但是问题来了，我们做jQuery插件的时候，扩展的是jQuery.fn，是jQuery的原型，跟jQuery.fn.init的实例化对象没有关系，这是怎么回事？
接下来这行代码就解决了我的疑惑：
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;
将jQuery原型的定义赋给了jQuery.fn.init的原型，这样我们在扩展jQuery原型的同时，也扩展了jQuery.fn.init的原型，那么jQuery对象就有了那些方法（确切的说应该是jQuery.fn.init类型的实例化对象）
接下来的源码定义了jQuery.extend=jQuery.fn.extend=function(){}；然后通过这两个方法添加了预定义的方法和属性，比如：ready函数、isFunction函数、each函数等等
到这里差不多jQuery的定义就结束了，我们常用的一些方法也在源代码中通过extend方法预先定义好了。
jQuery源码分析之=>jQuery的定义的更多相关文章- jQuery 源码分析3: jQuery.fn/ jQuery.prototype
// 建立方法实例,提高方法访问的速度(避免在原型链上搜索) var deletedIds = []; var slice = deletedIds.slice; var concat = delet ...
- jQuery 源码分析4: jQuery.extend
jQuery.extend是jQuery最重要的方法之一,下面看看jQuery是怎样实现扩展操作的 // 如果传入一个对象,这个对象的属性会被添加到jQuery对象中 // 如果传入两个或多个对象,所 ...
- jQuery 源码分析6: jQuery 基本静态方法（二）
jQuery.extend({ // 遍历obj的所有值 // args 这参数只能内部调用的会用到 // 注意到,如果回调函数调用失败会直接跳出并中止遍历 // 当有args数组时,使用apply调 ...
- jQuery 源码分析5: jQuery 基本静态方法（一）
jQuery在初始化过程中会为自己扩展一些基本的静态方法和属性,以下是jQuery 1.11.3版本 239 ~ 564行间所扩展的静态属性和方法 jQuery.extend({ // 为每个jQ ...
- jQuery 源码分析2: jQuery.fn.init
//jQuery.fn.intit 中使用到的外部变量: // 判断是否为HTML标签或#id rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w ...
- 六.jQuery源码分析之jQuery原型属性和方法
97 jQuery.fn = jQuery.prototype = { 98 constructor: jQuery, 99 init: function( selector, context, ro ...
- jQuery 源码分析 8： 回头看jQuery的构造器（jQuery.fn，jQury.prototype，jQuery.fn.init.prototype的分析）
在第一篇jQuery源码分析中,简单分析了jQuery对象的构造过程,里面提到了jQuery.fn.jQuery.prototype.jQuery.fn.init.prototype的关系. 从代码中 ...
- jQuery源码分析-each函数
本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuer ...
- jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...
随机推荐- apache-shiro入门<;一>;
Apache Shiro是一个强大而灵活的开源安全框架(本来想传到网盘供大家下载,但是鉴于国内网盘动不动就要关闭清楚用户数据:所以我提供了另一个shiro的中文文档下载链接:http://downlo ...
- Java利用POI导入导出Excel中的数据
首先谈一下今天发生的一件开心的事,本着一颗android的心我被分配到了PB组,身在曹营心在汉啊!好吧,今天要记录和分享的是Java利用POI导入导出Excel中的数据.下面POI包的下载地 ...
- android: SharedPreferences实现记住密码功能
既然是实现记住密码的功能,那么我们就不需要从头去写了,因为在上一章中的最佳实 践部分已经编写过一个登录界面了,有可以重用的代码为什么不用呢?那就首先打开 BroadcastBestPractice 项 ...
- 为什么是List list = new ArrayList() 而不直接用ArrayList
为什么是List list = new ArrayList(),而不直接用ArrayList? 编程是要面向对象编程,针对抽象(接口),而非具体.List 是接口,ArrayList是实现. 实现Li ...
- [转载]CAD文件版本
http://blog.sina.com.cn/s/blog_4c9fa4dd0101il1v.html 在工作中会遇到打开一张图纸时出现“图形文件无效”的提示,大部都是因为用低版本软件打开了高版本的 ...
- SQL Server MySQL 中的 in 与 null
例子: create table t(x int,y int); insert into t(x,y) values(1,1),(2,2),(null,null); 查询一: select x,y f ...
- TP4056大电流1A使用注意事项
源:TP4056大电流1A使用注意事项 TP4056为南京拓微集成电路有限公司推出的锂电池充电产品系列中的大电流充电产品.具有最大电流1A,峰值电流1.1A,良好环境下甚至峰值1.2A的单节锂离子电池 ...
- 『转』MarsEdit快速插入源代码
开始用MarsEdit来写博文,客户端的,毕竟是要方便的多啊. 遇到的第一个问题就是:MarsEdit没有提供快速插入源代码的工具,而对于我这枚码农而言,这个就有点太杯具了. 简单研究了一下,发现Ma ...
- CRectTracker类的使用
CRectTracker(俗称“橡皮筋”类)是一个非常有意思的类.你在Windows中经常看到这样的情况:它可以用做显示边界,你也可以扽它的八个角用来放大缩小,或做框选使用.如何通过编程来实现这种功能 ...
- iOS.Thread.OSAtomic
1. 原子操作 (Atomic Operations) 编写多线程代码最重要的一点是:对共享数据的访问要加锁. Shared data is any data which more than one ...
// 建立方法实例,提高方法访问的速度(避免在原型链上搜索) var deletedIds = []; var slice = deletedIds.slice; var concat = delet ...
jQuery.extend是jQuery最重要的方法之一,下面看看jQuery是怎样实现扩展操作的 // 如果传入一个对象,这个对象的属性会被添加到jQuery对象中 // 如果传入两个或多个对象,所 ...
jQuery.extend({ // 遍历obj的所有值 // args 这参数只能内部调用的会用到 // 注意到,如果回调函数调用失败会直接跳出并中止遍历 // 当有args数组时,使用apply调 ...
jQuery在初始化过程中会为自己扩展一些基本的静态方法和属性,以下是jQuery 1.11.3版本 239 ~ 564行间所扩展的静态属性和方法 jQuery.extend({ // 为每个jQ ...
//jQuery.fn.intit 中使用到的外部变量: // 判断是否为HTML标签或#id rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w ...
97 jQuery.fn = jQuery.prototype = { 98 constructor: jQuery, 99 init: function( selector, context, ro ...
在第一篇jQuery源码分析中,简单分析了jQuery对象的构造过程,里面提到了jQuery.fn.jQuery.prototype.jQuery.fn.init.prototype的关系. 从代码中 ...
本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuer ...
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...
- apache-shiro入门<;一>;
Apache Shiro是一个强大而灵活的开源安全框架(本来想传到网盘供大家下载,但是鉴于国内网盘动不动就要关闭清楚用户数据:所以我提供了另一个shiro的中文文档下载链接:http://downlo ...
- Java利用POI导入导出Excel中的数据
首先谈一下今天发生的一件开心的事,本着一颗android的心我被分配到了PB组,身在曹营心在汉啊!好吧,今天要记录和分享的是Java利用POI导入导出Excel中的数据.下面POI包的下载地 ...
- android: SharedPreferences实现记住密码功能
既然是实现记住密码的功能,那么我们就不需要从头去写了,因为在上一章中的最佳实 践部分已经编写过一个登录界面了,有可以重用的代码为什么不用呢?那就首先打开 BroadcastBestPractice 项 ...
- 为什么是List list = new ArrayList() 而不直接用ArrayList
为什么是List list = new ArrayList(),而不直接用ArrayList? 编程是要面向对象编程,针对抽象(接口),而非具体.List 是接口,ArrayList是实现. 实现Li ...
- [转载]CAD文件版本
http://blog.sina.com.cn/s/blog_4c9fa4dd0101il1v.html 在工作中会遇到打开一张图纸时出现“图形文件无效”的提示,大部都是因为用低版本软件打开了高版本的 ...
- SQL Server MySQL 中的 in 与 null
例子: create table t(x int,y int); insert into t(x,y) values(1,1),(2,2),(null,null); 查询一: select x,y f ...
- TP4056大电流1A使用注意事项
源:TP4056大电流1A使用注意事项 TP4056为南京拓微集成电路有限公司推出的锂电池充电产品系列中的大电流充电产品.具有最大电流1A,峰值电流1.1A,良好环境下甚至峰值1.2A的单节锂离子电池 ...
- 『转』MarsEdit快速插入源代码
开始用MarsEdit来写博文,客户端的,毕竟是要方便的多啊. 遇到的第一个问题就是:MarsEdit没有提供快速插入源代码的工具,而对于我这枚码农而言,这个就有点太杯具了. 简单研究了一下,发现Ma ...
- CRectTracker类的使用
CRectTracker(俗称“橡皮筋”类)是一个非常有意思的类.你在Windows中经常看到这样的情况:它可以用做显示边界,你也可以扽它的八个角用来放大缩小,或做框选使用.如何通过编程来实现这种功能 ...
- iOS.Thread.OSAtomic
1. 原子操作 (Atomic Operations) 编写多线程代码最重要的一点是:对共享数据的访问要加锁. Shared data is any data which more than one ...
