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 相关文章推荐
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
javascript常用的正则表达式实例
May 15 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
node.js require() 源码解读
Dec 13 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
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
将数组写入txt文件 var_export
2009/04/21 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
Python标准库sched模块使用指南
2017/07/06 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
大专自我鉴定范文
2013/10/23 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
校长寄语大全
2014/04/09 职场文书
优秀党员申报材料
2014/12/18 职场文书
音乐课外活动总结
2015/05/09 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL