当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Jquery选择器 $实现原理

Javascript
颜色变换 像字符逐字输入的欢迎词
CSS 伪类实现的鼠标滑动图片链接
百度用到的Js日历 大家可以看看
CSS 渐变背景的6个演示代码
Jquery 弹出层插件实现代码
Javascript 模式实例 观察者模式
[原创]javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版
javascript window对象属性整理
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏
理解 JavaScript 预解析
理解JavaScript变量作用域更轻松
JavaScript的变量作用域深入理解
javascript写的一个链表实现代码
Js 打字效果 逐一出现的文字
javascript 走马灯效果的链接提示
CSS 动态链接提示
JavaScript 事件的一些重要说明
JavaScript 三种不同位置代码的写法

Javascript 中的 Jquery选择器 $实现原理


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 101 ::
收藏到网摘: n/a

在此之前对于Microsoft Ajax的Sys和Jquery的$符号一直很好奇, 不明白为什么输入一个'$()'就可以实现选择器? 但由于工作的原因,很久不曾做过网站项目了,也没有时间去好好研究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中的方法了.