声明:写博客,是对自身知识的一种总结,也是一种分享,但由于作者本人水平有限,难免会有一些地方说得不对,还请大家友善指出,或致电:tianzhen.chen0509@gmail.com
关注:国内开源jQuery-UI组件库:Operamasks-UI
jQuery版本: v1.7.1
jQuery1.7系列一: jQuery 对象的实质
一.何为jQuery对象
用过jQuery的朋友都知道,jQuery很大的一个特点就在于其选择器上,我们可以很容易对众多的dom节点进行操作,而且还是链式的操作,这一切都要得益于jQuery对象,那么jQuery对象到底是什么?
我们经常写类似这样的代码:
jQuery(“div”).addClass(“myCls”),而这里jQuery(“div”)返回的结果就是jQuery对象,其实它也就是一个
javascript对象来的,只是这个对象的创建过程比较复杂而已,而只有理解好了jQuery对象的实质,才能更好的深入学习jQuery。
二.jQuery对象创建的背后
为了把握好jQuery对象的创建,有必要对其创建过程进行一个深入的分析。以下代码是jQuery对象创建的一个架子,我们可以由此来学习。
(function( window, undefined ) {
var jQuery = (function() {
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
},
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function(selector, context, rootjQuery){
//做一些初始化工作,比如查找对应选择器的dom元素
},
length: 0
//其它一些东西
};
jQuery.fn.init.prototype = jQuery.fn;
return jQuery;
})();
window.jQuery = window.$ = jQuery;
})(window);
接下来,我们一步一步来解开jQuery对象的谜底。
1. 最外层的闭包代码是这样的:
(function( window,undefined ) {
})(window);
把window对象传进去了,这倒没什么,有趣的是为什么会有个undefined 的形参?
在javascript语言中,Undefined是其中的一个类型,而其类型值只有 undefined
一个,就像Number也是其中的一个类型,但类型值却有多个,如100,20,88等等。而这个
undefined是用来标识一个未赋值的变量的,就比如声明一个变量 var fun ,
这时fun的值就为undefined。但是由于有些古老的浏览器并不直接认识undefined,然而在调用函数传递参数时如果形参个数大于实参,后边
的形参却会被赋值真正的undefined,所以像上边这种写法是最保险的,能够保证闭包的形参undefined
一定是Undefined类型的唯一值 undefined.
如果觉得有点晕,看下边这个例子。
var a =undefined;
在某些旧浏览器中,如果它不能直接认识undefined,那么这样写应该会报undefined 这个变量没有定义的错误,而如果这样写
(function(undefined){
var a = undefined;
})();
那么就一定不会报错了,所以jQuery还是考虑得很周到的。
2. 让我们再次精简代码,看看这个jQuery到底是什么
var jQuery = (function() {
var jQuery = function(selector, context ) {
return newjQuery.fn.init( selector, context, rootjQuery );
},
return jQuery;
})();
window.jQuery = window.$ = jQuery;
在使用的时候,我们是这样写的 $(“div”),而这个$其实就是下边这个函数,
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector,context, rootjQuery );
},
所以执行 var $obj = $(“div”)就相当于执行
var $obj= return new jQuery.fn.init( "div", context, rootjQuery );
到这里,我们便了然于胸,原来所谓的jQuery对象就是jQuery.fn.init这个函数的一个实例而已。
上边最原始的骨架图现在还剩下两句比较难懂的语句,它们是
jQuery.fn= jQuery.prototype = {}; //代码1
jQuery.fn.init.prototype= jQuery.fn; //代码2
为了更清晰到底发生了什么事,我们直接看执行这两句代码后结果如何:
由以上图可以看出,这时候,init函数的prototype已经指向了jQuery.fn 所指向的对象,那也就是说,如果我向fn添加属性的话,那么 new init() 得到的实例也就相应可以找到新加的属性了,这也就是jQuery的插件机制。
比如,你想添加一个方法,判断选择器中是否包括了表单,那么该插件大致可以这样写:
$.fn.containsForm = function(){
var i=0,
el;
while(el=this[i++]){
if(el.tagName.toLowerCase() === ‘form’){
return true;
}
}
return false;
}
然后就可以直接使用该插件了,如 $(“myform”).containsForm();
jQuery对象主要就是这样了,顺便还谈到了jQuery对fn的扩展机制,在jQuery的源码中,对jQuery对象添加了很多便利的方法,如addClass,find等,都是通过这种方式实现的。
- 大小: 20.7 KB
分享到:
相关推荐
资源名称:jquery1.7 中文手册 CHM文档(附jquery1.82 chm手册)内容简介:因国内jquery中文手册更新太慢了,等了一段时间实在等不下去了,干脆自己动手做一个丰衣足食,时刻更新. 最后感谢Shawphy提供1.4.1版,jehn提供...
jquery1.7 开发工具 帮助文档 jQueryAPI-100214.chm jquery-1.7.js jquery-1.7.min.js
jquery1.7手册中文 CHM文档,编译于2012.02.09,也算是最新的jQuery参考文档了。内容比较丰富,查询方便,放在手边,可作为jquery速查手册,包括jQuery核心、选择器、属性、筛选器、文档处理、css、事件处理、效果、...
jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册
jquery1.7中文参考手册 jquery1.7_20111120 jquery1.7_20111204 jquery1.7_20120209
资源名称:jquery1.7 中文文档 jquery开发用的着
jQuery1.7压缩和未压缩版
jquery1.7+jquery1.7中文API.Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库
JQuery 1.7 1.7.1 API 中文 中文API jQueryAPI
jquery1.7_20111204.rar
jQuery1.7_20120209 中文 API 文档 chm格式
jQuery1.7 中文手册 注意:是chm版的喔,自行下载后即可得到chm文件咯
jquery 1.7 中文.chm
jquery1.7参考手册,chm版,方便查找各个功能使用方法。
jQuery 1.7 API 中文文档,查询接口函数
jquery 1.7 中文 api 修正版
jQuery1.7 中文离线手册,资源真实的,自己也是花了许多精力弄到,前端的小伙伴想看jquery API的话,离线手册不可少,都不容易,已经调整了下下载积分
jquery1.7+jquery1.8 API文档CHM格式 包含1.7和1.8两个版本
jquery1.7手册中文 CHM文档,编译于2012.02.09,也算是最新的jQuery参考文档了。内容比较丰富,查询方便,放在手边,可作为jquery速查手册,包括jQuery核心、选择器、属性、筛选器、文档处理、css、事件处理、效果、...