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 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
一分钟理解js闭包
May 04 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 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
php数组中删除元素的实现代码
2012/06/22 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python控制台中实现进度条功能
2015/11/10 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
财务会计人员岗位职责
2013/11/30 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
导师工作推荐信
2015/03/27 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis