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 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
javascript深入理解js闭包
Jul 03 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
详解RequireJs官方使用教程
Oct 31 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
JS实现关闭小广告特效
Jan 29 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
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
原生js实现分页效果
2020/09/23 Javascript
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
python 把列表转化为字符串的方法
2018/10/23 Python
python实现两张图片的像素融合
2019/02/23 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
教职工代表大会主持词
2014/04/01 职场文书
会计个人实习计划书
2014/08/15 职场文书
标准版离职证明书
2014/09/12 职场文书
党员个人剖析材料
2014/09/30 职场文书
外贸英文求职信范文
2015/03/19 职场文书
技能培训通讯稿
2015/07/18 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL