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 相关文章推荐
什么是cookie?js手动创建和存储cookie
May 27 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 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
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
表单提交验证类
2006/07/14 Javascript
node.js中watch机制详解
2014/11/17 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
layui表格实现代码
2017/05/20 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
Python装饰器使用示例及实际应用例子
2015/03/06 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
如何理解python中数字列表
2020/05/29 Python
python tqdm库的使用
2020/11/30 Python
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
中专毕业生自我鉴定范文
2013/11/09 职场文书
研修第一天随笔感言
2014/02/15 职场文书
工商管理自荐书
2014/07/06 职场文书
连锁超市项目计划书
2014/09/15 职场文书
2015员工年度考核评语
2015/03/25 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python