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 相关文章推荐
jQuery DOM操作实例
Mar 05 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 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
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
node.js基础知识小结
2018/02/26 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python 错误和异常小结
2013/10/09 Python
跟老齐学Python之类的细节
2014/10/13 Python
用Python实现换行符转换的脚本的教程
2015/04/16 Python
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python中异常重试的解决方案详解
2017/05/05 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
Django 路由控制的实现
2019/07/17 Python
为什么python比较流行
2020/06/19 Python
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
高级Java程序员面试题
2016/06/23 面试题
农民工创业典型事迹
2014/01/25 职场文书
食品安全责任书
2014/04/15 职场文书
新学期开学标语
2014/06/30 职场文书
2014最新实习证明模板
2014/10/02 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
保护校园环境倡议书
2015/04/28 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL