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 相关文章推荐
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
javaScript arguments 对象使用介绍
Oct 18 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
Javascript自定义事件详解
Jan 13 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 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
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
Webkit的跨域安全问题说明
2011/09/13 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
js的回调函数详解
2015/01/05 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
javascript异步编程的六种方式总结
2019/05/17 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
python检测某个变量是否有定义的方法
2015/05/20 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
中科软测试工程师面试题
2012/06/16 面试题
销售高级职员求职信
2013/10/29 职场文书
九年级语文教学反思
2014/02/04 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
小学生环保倡议书
2014/05/15 职场文书
总经理人事任命书
2014/06/05 职场文书
医院病假条范文
2015/08/17 职场文书