Jquery选择器 $实现原理

2016-02-19 14:43 1 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享Jquery选择器 $实现原理,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发 】

但由于工作的原因,很久不曾做过网站项目了,也没有时间去好好研究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中的方法了.

来源:https://www.tulaoshi.com/n/20160219/1607716.html

延伸阅读
标签: Web开发
有了Jquery的选择器,吃饭饭饭香,身体倍棒…… 1.基本 我们知道jquery最常用的就是选择器了,我们看一下jqueryAPI中的 选择器—基本中有5种情况 class ,id ,element, *,还有一个多选择器,这里我们想一下css样式的写法 css样式也有几种情况:1.类样式 2.id样式 3.标签样式, 如果有一个aa的类 ,那么我们定义aa的样式就要写成 .aa{} 如...
标签: Web开发
John Resig老爷在twitter上宣布jQuery1.3正式发布,直接把2加到3反映了这个版本的重要性不同以往,除了重写很多重要方法比如offset(获取页面上的各种尺寸和位置数据),创建和插入DOM节点(比如append, before之类,这些方法是JQuery以前速度上的瓶颈之一,我就完全不用它们,但是现在速度提高了6倍)最重要的改变是启用了全新的Sizzle引擎...
标签: Web开发
1 基本选择器 $(#id) 根据给定的id匹配一个元素 $(.class) 根据给定的类名匹配元素 $(element) 根据给定的元素名匹配元素 $(*) 匹配所有元素 $(selector1,selector2,...,selectorN) 将每一个选择器匹配到的元素合并后一起返回 2 层次选择器 $("ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素 $("parent...
标签: Web开发
代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title无标题文档/title script src="js/jquery-1.3.2.js" /script sc...
标签: Web开发
1.从$开始 对于熟悉prototype的朋友,$符号应该很熟悉, prototype: var element = $('eleId') jquery: var element = $('#eleId') DOM: var element = document.getElementById('eleId') 以上三种选择方式是等价的,相比prototype来说jquery多了个#号 例: $('#j1′).html() div id=“j1“Hello, jQuery!/content 2.通过xpath+css来...

经验教程

830

收藏

16
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部