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将数据转换成整数的方法
Jan 04 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
如何更好的编写js async函数
May 13 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
详解Vue的ref特性的使用
Jan 24 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 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 session实现多级目录存放实现代码
2016/02/03 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
跟老齐学Python之list和str比较
2014/09/20 Python
Python使用chardet判断字符编码
2015/05/09 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
python实现的config文件读写功能示例
2019/09/24 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
兼职业务员岗位职责
2014/01/01 职场文书
活动邀请函范文
2014/01/19 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
小学毕业演讲稿
2014/04/25 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python