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 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
防止文件缓存的js代码
Jan 10 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 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
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
JS 常用校验函数
2009/03/26 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
python实现DES加密解密方法实例详解
2015/06/30 Python
python中的set实现不重复的排序原理
2018/01/24 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
python调用摄像头拍摄数据集
2019/06/01 Python
有关打架的检讨书
2014/01/25 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
社区服务活动报告
2015/02/05 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
运动会200米广播稿
2015/08/19 职场文书
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL