jQuery的链式调用浅析


Posted in Javascript onDecember 03, 2010

jQuery式的方法链核心部分是三点:
1)jquery的包装器函数(也就是jQuery(),以此来构建包装器对象),以此构造函数可以产生饱含了原生DOM对象的包装器对象。
它大概是这个样子的…(当然跟官方库的规模跟功能以及实现方式都差很多,我只是写了个大概的实现方式):
呃…………我的失误,请大家如果有兴趣尝试下代码记得不要引入jQuery库,命名冲突了

(function(){ 
//简化起见不支持子类选择器属性选择器等等,只接受形如".className"或者"#id"或者"tagName"以及它们之间的组合形式 自定义的工具函数(红色)会在下面说明 
function _jQuery(els){ 
this.elements = new Array(); 
for (var i = 0; i < els.length; i++) { 
var element = els[i]; 
if (typeof element == 'string') { 
element = element.trim(); //防止手抽多打入前后的空格 
var sign = element.substr(0, 1); 
if (sign == "#") { //按id查找 
element = document.getElementById(element.substr(1)); 
this.elements.push(element); 
} 
else 
if (sign == ".") { 
//按类名查找 这里用到一个自定义的按类名返回dom数组的工具函数getElementsByClassName 
element = getElementsByClassName(element.substr(1)); //element此时为数组对象,此方法为自定义见下文 
this.elements = this.elements.merge(element); 
} 
else { //无任何标识符按标签名查找 
element = document.getElementsByTagName(element); //element此时为数组对象 
this.elements = this.elements.merge(element);//这个方法可以使得elements数组中只会存在不相同的dom对象 就如同set一样 
} 
} 
else { 
this.elements.push(element); 
} 
} 
} 
/*这里可以开始扩展包装器对象的原型函数比如 
_ jQuery.prototype.addEvent=function(){………} 
*/ window['jQuery'] = function(){ return new _jQuery(arguments) }; if (!window['$']) window['$'] = window['jQuery']; })()//自执行匿名函数

OK了 插入下面这段简单html文档来测试一下(不要鄙视偶的这个html写的规范不规范…测试而已)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>my function addtion</title> 
</head> 
<body> 
<div id="header"> 
<p id="header1" class="entrance"> 
header1 
</p> 
<p id="header2"class="entrance"> 
header2 
</p> 
<p id="header3"class="entrance"> 
<a href="https://3water.com/index.html">header3</a> 
</p> 
</div> 
<hr/> 
<div id="content" class="news"> 
<p id="content1" class="topic"> 
node1 
</p> 
<p id="content2" class="topic"> 
node2 
</p> 
<p id="content3" class="topic"> 
<a href="https://3water.com/index.html">node3</a> 
</p> 
</div> 
<hr/> 
<div id="foot"> 
<p id="foot1" class="entrance"></p> 
</div> 
</body> 
</html>

输入:
var f=$(‘#header').elements[0]; 
consoles.write("nodeName: "+f.nodeName+"==> Id:"+f.id) 
/*自定义的代替alert的一个调试面板工具,由于在用的这个是照搬的某本书上的有点bug而且功能和操作性都不太好,过两天可能我会修改一下在放上来,自己调试可以用alert代替*/

输出:
jQuery的链式调用浅析 
输入:
var e=jQuery(' div ',' p').elements; //这里故意多输了几个空格 
for(var i=0;i<e.length;i++){ 
consoles.write("nodeName: "+e[i].nodeName+"==> Id:"+e[i].id); 
}

输出:
jQuery的链式调用浅析 
虽然整合了dom对象查找的几个方法,但是还是可以看到每次都使用循环语句来操作dom对象是一件十分烦躁的事情,并且接下来还会以此包装器为基础引入很多针对此包装器对象的方法比如上面的addEvent方法等等,这些方法的引入最终是为了操作对象中包装的原生dom对象,所以每一个方法中又必须引入for或者while语句,这个引出第二个核心函数==> jQuery.each(){}; 太晚了…明天再总结
本文使用到的工具函数(都是很有用的函数):
//className:类名 tag:在此标签名范围内寻找 parent:在此父节点内寻找 
function getElementsByClassName(className, tag, parent){ 
parent = parent || document; //缺省默认为document 
var tag = tag || '*'; //缺省默认为查找所有标签 
var elements = new Array(); 
var re = new RegExp('(^|\\s)' + className + '(\\s|$)'); 
var allList = parent.getElementsByTagName(tag); 
var element; 
for (var i = 0; i < allList.length; i++) { 
element = allList[i]; 
if (element.className.match(re)) { 
elements.push(element); 
} 
} 
return elements; 
}

if (!String.prototype.trim) {//去除首尾空格 
String.prototype.trim = function(){ 
return this.replace(/^\s+|\s+$/g, ''); 
} 
} if (!Array.prototype.merge) { 
Array.prototype.merge = function(arr){ //使得数组有类似set的特性 相同的对象无法放入同一个数组不要鄙视偶算法的问题只是阐述下原理 
for (var i = 0; i < arr.length; i++) { 
var signals=false; 
for (var j = 0; j < this.length; j++) { 
if (arr[i] == this[j]) 
signals=true; 
} 
if (!signals) this.push(arr[i]); 
} 
return this; 
} 
}
Javascript 相关文章推荐
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
加速IE的Javascript document输出的方法
Dec 02 #Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 #Javascript
javascript学习之闭包分析
Dec 02 #Javascript
JavaScript OOP面向对象介绍
Dec 02 #Javascript
JavaScript 字符串处理函数使用小结
Dec 02 #Javascript
改写一个简单的菜单 弹性大小
Dec 02 #Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 #Javascript
You might like
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
JQuery datepicker 使用方法
2011/05/20 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
进一步了解Python中的XML 工具
2015/04/13 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
python面试题小结附答案实例代码
2019/04/11 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
值传递还是引用传递
2015/02/08 面试题
大学生自荐书范文
2013/12/10 职场文书
2014的自我评价
2014/01/13 职场文书
好邻里事迹材料
2014/01/16 职场文书
基层党员对照检查材料
2014/09/24 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS
mysql自增长id用完了该怎么办
2022/02/12 MySQL