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 相关文章推荐
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
js实现录音上传功能
Nov 22 Javascript
Vue单文件组件开发实现过程详解
Jul 30 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
php 获得汉字拼音首字母的函数
2009/08/01 PHP
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
php实现对象克隆的方法
2015/06/20 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
python实现12306火车票查询器
2017/04/20 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
python正则实现计算器功能
2017/12/14 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
Python测试模块doctest使用解析
2019/08/10 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
解决django FileFIELD的编码问题
2020/03/30 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
Ruby如何进行文件操作
2014/07/17 面试题
八年级英语教学反思
2014/01/09 职场文书
校友会欢迎辞
2014/01/13 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
十二月早安励志心语大全
2019/12/03 职场文书