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基本语法分析说明
Jun 15 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
js选项卡的实现方法
Feb 09 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
JS面向对象之多选框实现
Jan 17 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判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
JSON格式化输出
2014/11/10 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
使用pip安装python库的多种方式
2019/07/31 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
文明倡议书范文
2014/04/15 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
java解析XML详解
2021/07/09 Java/Android
JavaScript实现简单拖拽效果
2021/09/15 Javascript
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python