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中的107个基础知识收集整理 推荐
Mar 29 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
加速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动态变静态原理
2006/11/25 PHP
php mssql 数据库分页SQL语句
2008/12/16 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
PHP进程同步代码实例
2015/02/12 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
Laravel下生成验证码的类
2017/11/15 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
Js callBack 返回前一页的js方法
2008/11/30 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
ubuntu中配置pyqt4环境教程
2017/12/27 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
贫困证明书格式及范文
2014/10/15 职场文书
开会通知
2015/04/20 职场文书
校园广播稿范文
2015/08/19 职场文书
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
Python数据结构之队列详解
2022/03/21 Python