Jquery选择器 $实现原理


Posted in Javascript onDecember 02, 2009

但由于工作的原因,很久不曾做过网站项目了,也没有时间去好好研究Jquery的源码,这个疑问也一直没有得到解决了, 今天,空闲之余,打开Jquery的源码看看,才明天它实现的原理,原来在加入jquery的js这个文件时,实际上是执行了一个函数,在这个函数里己经初始化了$和JQuery变量, 实现这个功能源码如下(代码已删减和更改,并不影响说明实现原理):

(function() { 
var 
// Will speed up references to window, and allows munging its name. 
window = this, 
// Will speed up references to undefined, and allows munging its name. 
undefined, 
// Map over jQuery in case of overwrite 
_jQuery = window.jQuery, 
// Map over the $ in case of overwrite 
_$ = window.$, 
jQuery = window.jQuery = window.$ = function(selector, context) { 
// The jQuery object is actually just the init constructor 'enhanced' 
return new jQuery.fn.init(selector, context); 
}, 
// A simple way to check for HTML strings or ID strings 
// (both of which we optimize for) 
quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/, 
// Is it a simple selector 
isSimple = /^.[^:#\[\.,]*$/; 
jQuery.fn = jQuery.prototype = { 
init: function(selector, context) { 
// Make sure that a selection was provided 
// Make sure that a selection was provided 
selector = selector || document; 
this[0] = selector; 
this.length = 1; 
this.context = selector; 
return this; 
}, 
show:function() { 
alert("this.show"); 
}, 
// Start with an empty selector 
selector: "", 
// The current version of jQuery being used 
jquery: "1.3.2" 
}; 
jQuery.fn.init.prototype = jQuery.fn; 
})(); 
function test(src){ 
alert($(src)); 
$(src).show();

从代码里我们可以看到有这样一个函数执行了(funtion(){})();

var window = this;
_jQuery = window.jQuery;
_$ = window.$;

这几句代码应该是声明jQuery和$变量,至于为什么能这样子用我还没弄明白,等待高人解决!!

但我认为这并没关系,因为最重要的是下面这段代码:

jQuery = window.jQuery = window.$ = function(selector, context) {
return new jQuery.fn.init(selector, context);
};

可以看出创建jQuery.fn.init这样一个函数返回给$, 这样是可以使用$实例了,但还不能访问jQuery.fn里的方法,因此需要加上后面这句:

jQuery.fn.init.prototype = jQuery.fn;

实现了这些, Jquery中的其他功能就很好理解了, 无非是添prototype或extend中的方法了.

Javascript 相关文章推荐
用javascript实现画板的代码
Sep 05 Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
js图片处理示例代码
May 12 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
页面点击小红心js实现代码
May 26 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 Javascript
js之ajax文件上传
May 13 Javascript
js 表格隔行颜色
Dec 02 #Javascript
让FireFox支持innerText的实现代码
Dec 01 #Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 #Javascript
js 变量类型转换常用函数与代码[比较全]
Dec 01 #Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 #Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 #Javascript
Ruffy javascript 学习笔记
Nov 30 #Javascript
You might like
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
php继承的一个应用
2011/09/06 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
vue axios封装及API统一管理的方法
2019/04/18 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
浅谈Django REST Framework限速
2017/12/12 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
python中的字符串内部换行方法
2018/07/19 Python
python SocketServer源码深入解读
2019/09/17 Python
使用python实现对元素的长截图功能
2019/11/14 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
python的列表List求均值和中位数实例
2020/03/03 Python
基于python图像处理API的使用示例
2020/04/03 Python
python中最小二乘法详细讲解
2021/02/19 Python
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
机电专业大学生求职信
2013/10/04 职场文书
财务管理专业推荐信
2013/11/19 职场文书
《中华少年》教学反思
2014/02/15 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
作风年建设汇报材料
2014/08/14 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
党员读书活动心得体会
2016/01/14 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书