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 相关文章推荐
使用JavaScript和C#中获得referer
Nov 14 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 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
2020最新CPU的性能排名
2020/04/02 数码科技
php 文章采集正则代码
2009/12/28 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
Python中作用域的深入讲解
2018/12/10 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
旷课检讨书1000字
2014/02/14 职场文书
优秀食品类广告词
2014/03/19 职场文书
安全施工标语
2014/06/07 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
亮剑观后感
2015/06/05 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS