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 相关文章推荐
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
JavaScript门面模式详解
Oct 19 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
Javascript异步编程async实现过程详解
Apr 02 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中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
Python subprocess模块学习总结
2014/03/13 Python
python MySQLdb使用教程详解
2018/03/20 Python
pytorch 数据集图片显示方法
2018/07/26 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
详解Python3 pickle模块用法
2019/09/16 Python
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
党员思想汇报范文
2013/12/30 职场文书
创文明城市标语
2014/06/16 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
团员个人年度总结
2015/02/26 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL