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 相关文章推荐
浅析jQuery的链式调用之each函数
Dec 03 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
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
极典R601SW收音机
2021/03/02 无线电
php 中的str_replace 函数总结
2007/04/27 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
nodejs win7下安装方法
2012/05/24 NodeJs
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
python实现ping命令小程序
2020/12/28 Python
Python实现京东抢秒杀功能
2021/01/25 Python
python装饰器代码深入讲解
2021/03/01 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
C语言变量的命名规则都有哪些
2013/12/27 面试题
abstract是什么意思
2012/02/12 面试题
保洁主管岗位职责
2013/11/20 职场文书
出国留学担保书
2014/05/20 职场文书
语文教育专业求职信
2014/06/28 职场文书
学生自我评语
2015/01/04 职场文书
中学教师个人总结
2015/02/10 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python