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 相关文章推荐
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
vuex实现购物车功能
Jun 28 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
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php常用的url处理函数总结
2014/11/19 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
Python多线程正确用法实例解析
2020/05/30 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
物业管理毕业生个人的求职信
2013/11/30 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
《荷花》教学反思
2014/04/16 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
同学聚会邀请函
2015/01/30 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python
app场景下uniapp的扫码记录
2022/07/23 Java/Android