jQuery的实现原理的模拟代码 -1 核心部分


Posted in Javascript onAugust 01, 2010

核心部分实现了两种选择器,使用 id 和标记名,还可以提供 css 的设置,以及 text 的设置。

// # 表示在 jQuery 1.4.2 中对应的行数 
// 定义变量 undefined 方便使用 
var undefined = undefined; 
// jQuery 是一个函数,其实调用 jQuery.fn.init 创建对象 
var $ = jQuery = window.$ = window.jQuery // #19 
= function (selector, context) { 
return new jQuery.fn.init(selector, context); 
}; 
// 用来检查是否是一个 id 
idExpr = /^#([\w-]+)$/; 
// 设置 jQuery 的原型对象, 用于所有 jQuery 对象共享 
jQuery.fn = jQuery.prototype = { // #74 
length: 0, // #190 
jquery: "1.4.2", // # 187 
// 这是一个示例,仅仅提供两种选择方式:id 和标记名 
init: function (selector, context) { // #75 
// Handle HTML strings 
if (typeof selector === "string") { 
// Are we dealing with HTML string or an ID? 
match = idExpr.exec(selector); 
// Verify a match, and that no context was specified for #id 
if (match && match[1]) { 
var elem = document.getElementById(match[1]); 
if (elem) { 
this.length = 1; 
this[0] = elem; 
} 
} 
else { 
// 直接使用标记名 
var nodes = document.getElementsByTagName(selector); 
for (var l = nodes.length, j = 0; j < l; j++) { 
this[j] = nodes[j]; 
} 
this.length = nodes.length; 
} 
this.context = document; 
this.selector = selector; 
return this; 
} 
}, 
// 代表的 DOM 对象的个数 
size: function () { // #193 
return this.length; 
}, 
// 用来设置 css 样式 
css: function (name, value) { // #4564 
this.each( 
function (name, value) { 
this.style[name] = value; 
}, 
arguments // 实际的参数以数组的形式传递 
); 
return this; 
}, 
// 用来设置文本内容 
text: function (val) { // #3995 
if (val) { 
this.each(function () { 
this.innerHTML = val; 
}, 
arguments // 实际的参数以数组的形式传递 
) 
} 
return this; 
}, 
// 用来对所有的 DOM 对象进行操作 
// callback 自定义的回调函数 
// args 自定义的参数 
each: function (callback, args) { // #244 
return jQuery.each(this, callback, args); 
} 
} 
// init 函数的原型也就是 jQuery 的原型 
jQuery.fn.init.prototype = jQuery.prototype; // #303 
// 用来遍历 jQuery 对象中包含的元素 
jQuery.each = function (object, callback, args) { // #550 
var i = 0, length = object.length; 
// 没有提供参数 
if (args === undefined) { 
for (var value = object[0]; 
i < length && callback.call(value, i, value) !== false; 
value = object[++i]) 
{ } 
} 
else { 
for (; i < length; ) { 
if (callback.apply(object[i++], args) === false) { 
break; 
} 
} 
} 
}

在 jQuery 中, jQuery 对象实际上是一个仿数组的对象,代表通过选择器得到的所有 DOM 对象的集合,它像数组一样有 length 属性,表示代表的 DOM 对象的个数,还可以通过下标进行遍历。

95 行的 jQuery.each 是 jQuery 中用来遍历这个仿数组,对其中的每个元素进行遍历处理的基本方法,callback 表示处理这个 DOM 对象的函数。通常情况下,我们并不使用这个方法,而是使用 jQuery 对象的 each 方法进行遍历。jQuery 对象的 css 和 text 方法在内部实际上使用 jQuery 对象的 each 方法对所选择的元素进行处理。

这些函数及对象的关系见:jQuery 原型关系图
jQuery的实现原理的模拟代码 -1 核心部分

下面的脚本使用这个脚本库。

// 原型操作 
$("h1").text("Hello, world.").css("color", "green");
Javascript 相关文章推荐
自己整理的一个javascript日期处理函数
Oct 16 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 #Javascript
jQuery对象[0]是什么含义?
Jul 31 #Javascript
动态调用CSS文件的JS代码
Jul 29 #Javascript
date.parse在IE和FF中的区别
Jul 29 #Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 #Javascript
jquery中对表单的基本操作代码
Jul 29 #Javascript
jquery下利用jsonp跨域访问实现方法
Jul 29 #Javascript
You might like
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
坏狼的PHP学习教程之第1天
2008/06/15 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
Python中List.count()方法的使用教程
2015/05/20 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Python中字符串的处理技巧分享
2016/09/17 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
中专毕业自我鉴定
2013/10/16 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
老干部座谈会主持词
2015/07/03 职场文书
班级班风口号大全
2015/12/25 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书