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入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
js倒计时简单实现代码
Aug 11 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
JavaScript JSON使用原理及注意事项
Jul 30 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
PHP多进程编程实例详解
2017/07/19 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
Python实现从url中提取域名的几种方法
2014/09/26 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
用python实现名片管理系统
2020/06/18 Python
前台文员岗位职责及工作流程
2013/11/19 职场文书
物流仓管员岗位职责
2013/12/04 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
2014年技术部工作总结
2014/12/12 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
个人催款函范文
2015/06/24 职场文书