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左侧多级菜单动态的解决方案
Feb 01 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
基于JavaScript实现简单的轮播图
Mar 03 Javascript
vue3.0中使用element的完整步骤
Mar 04 Vue.js
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
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
php常用表单验证类用法实例
2015/06/18 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
python33 urllib2使用方法细节讲解
2013/12/03 Python
Python开发的实用计算器完整实例
2017/05/10 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
Python饼状图的绘制实例
2019/01/15 Python
python3 pygame实现接小球游戏
2019/05/14 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
意外伤害赔偿协议书范文
2014/09/23 职场文书
护理见习报告范文
2014/11/03 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
党员争先创优承诺书
2015/01/20 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
幼儿园见习总结
2015/06/23 职场文书
2015大学迎新标语
2015/07/16 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript