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 相关文章推荐
JS DOM 操作实现代码
Aug 01 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
javascript填充默认头像方法
Feb 22 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
php生成随机密码的几种方法
2011/01/17 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
jquery cookie插件代码类
2009/05/26 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
node跨域请求方法小结
2017/08/25 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
Python实现一个简单的MySQL类
2015/01/07 Python
python批量制作雷达图的实现方法
2016/07/26 Python
Python中遍历列表的方法总结
2019/06/27 Python
dpn网络的pytorch实现方式
2020/01/14 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
工作个人的自我评价
2014/01/14 职场文书
12月红领巾广播稿
2014/02/13 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
求职信名称怎么写
2014/05/26 职场文书
顶岗实习计划书
2015/01/16 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
同学联谊会邀请函
2019/06/24 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
索尼ICF-36收音机评测
2022/04/30 无线电
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS