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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
javascript if条件判断方法小结
May 17 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
nuxt引入组件和公共样式的操作
Nov 05 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
农民C键的运用技巧
2020/03/04 星际争霸
php adodb介绍
2009/03/19 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
Python实现EM算法实例代码
2020/10/04 Python
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
linux面试题参考答案(10)
2016/10/26 面试题
学习十八大精神心得体会
2013/12/31 职场文书
北京奥运会主题口号
2014/06/13 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
初中班主任教育随笔
2015/08/15 职场文书
实验心得体会范文
2016/01/25 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
python中的3种定义类方法
2021/11/27 Python
分享几个实用的CSS代码块
2022/06/10 HTML / CSS