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有序数组的连接问题
Oct 01 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
javascript解析json数据的3种方式
May 08 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
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
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
javascript模块化简单解析
2016/04/07 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
JS验证字符串功能
2017/02/22 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
python进阶教程之模块(module)介绍
2014/08/30 Python
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
Python科学计算之Pandas详解
2017/01/15 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
python分布式计算dispy的使用详解
2019/12/22 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
最新教师自我评价分享
2013/11/12 职场文书
专科毕业生自我鉴定
2013/12/01 职场文书
质量承诺书范文
2014/03/27 职场文书
补充协议书范本
2014/04/23 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
2015年领班工作总结
2015/04/29 职场文书
结婚典礼主持词
2015/06/29 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server