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函数
Apr 09 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
jquery图片放大镜效果
Jun 23 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 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导入Excel到MySQL的方法
2011/04/23 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
JavaScript多线程详解
2015/08/12 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
Python管理Windows服务小脚本
2018/03/12 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
结婚典礼证婚词
2014/01/11 职场文书
主题婚礼策划方案
2014/02/10 职场文书
工程采购员岗位职责
2014/03/09 职场文书
节能环保口号
2014/06/12 职场文书
中学社团活动总结
2015/05/07 职场文书
民主生活会意见
2015/06/05 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技