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获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
Vue页面骨架屏的实现方法
May 22 Javascript
Vue.js 事件修饰符的使用教程
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
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
参观接待方案
2014/03/17 职场文书
铁路安全事故反思
2014/04/26 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
计划生育工作总结2015
2015/04/03 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
给校长的建议书范文
2015/09/14 职场文书
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技