jQuery的链式调用浅析
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="http://www.jb51.net/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="http://www.jb51.net/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代替*/
var e=jQuery(' div ',' p').elements; //这里故意多输了几个空格
for(var i=0;i<e.length;i++){
consoles.write("nodeName: "+e[i].nodeName+"==> Id:"+e[i].id);
}
输出： 
虽然整合了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函数
代码很简单,主要是给大家提供个思路,也算是学习javascript这么长时间的一个小小的练手. 链式编程 是将多个操作(多行代码)通过点号"."链接在一起成为一句代码.链式代码通常要求操作有返回值,但对于很多操作大都是void型,什么也不返回,这样就很难链起来了,当然也有解决办法,可能不太优雅.链式编程的新思想在jQuery中已流行使用 复制代码 代码如下: <span>Hello,World!</span> <script type="tex
-
jquery链式操作的正确使用方法
糟糕的使用方法 复制代码 代码如下: $second.html(value);$second.on('click',function(){alert('hello everybody');});$second.fadeIn('slow');$second.animate({height:'120px'},500); 建议使用方法 复制代码 代码如下: $second.html(value);$second.on('click',function(){alert('hello everybody'
-
Javascript 链式调用实现代码(参考jquery)
Javascript链式调用 function ele(){ this.elements=[]; var element; if(typeof arguments[0]=="string"){ element=arguments[0]; if (element.slice(0, 1) == '#') { element = document.getElementById(element.slice(1)); this.elements.push(element); }else if(e
-
浅析jQuery的链式调用之each函数
话说回来,虽然jQuery让学习前端技术的越来越多了起来,(本人就是因为学校图书馆偶然间遇到了一本jQuery基础教程(二)开始想深入的学习前端技术),关于jQuery的博文甚至多于javascript,它让编程的门槛大大的降低了,但是它隐藏了太多细节了,形如$('#id').append('<p>xxx</p>').clone().appendTo(x).end().css(...)................这样操作的模式已经很难找到常规javascript的影子.浏览器的
-
JavaScript对象链式操作代码(jquery)
虽然现在慢慢减少了对jQuery的使用(项目上还是用,效率高点.平时基本不用了),希望从而减少对jQuery的依赖度. 但是这链式操作的方式实在吸引人(貌似现在不少新库都采用了链式操作). 新手无畏嘛,所以写了以下代码.主要是避免以后又忘了,呵呵. 复制代码 代码如下: window.k = function() { return new k.fn.init(arguments); } k.fn = k.prototype = { init:function() { this.length =
-
模仿jQuery each函数的链式调用
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> &l
-
jQuery链式操作实例分析
本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <script type="text/javascript"> $(function() { $("div").addClass("css1").filter(function(index) { return index == 1 || $(this).
-
jQuery链式调用与show知识浅析
上篇文章给大家介绍了jQuery的框架,有关jquery的基础知识可以参考下. jQuery使用许久了,但是有一些API的实现实在想不通.下面将使用简化的代码来介绍,主要关注jQuery的实现思想. 相较于上一篇,代码更新了:21~78 (function(window, undefined){ function jQuery(sel){ return new jQuery.prototype.init(sel); } jQuery.prototype = { constructor: jQue
-
jQuery链式操作如何实现以及为什么要用链式操作
两个问题 1.jQuery的链式操作是如何实现的? 2.为什么要用链式操作? 大家认为这两个问题哪个好回答一点呢? 链式操作 原理相信百度一下一大把,实际上链式操作仅仅是通过对象上的方法最后 return this 把对象再返回回来,对象当然可以继续调用方法啦,所以就可以链式操作了.那么,简单实现一个: 复制代码 代码如下: //定义一个JS类 function Demo() { } //扩展它的prototype Demo.prototype ={ setName:function (name
-
jQuery对象的链式操作用法分析
本文实例讲述了jQuery对象的链式操作用法.分享给大家供大家参考,具体如下: jQuery对象的链式操作 首先来看一个例子: 复制代码 代码如下: $("#myphoto").css("border","solid 2px#FF0000").attr("alt"," good"); 对一个jQuery对象先调用了css()函数修改样式,然后使用attr()函数修改属性,这种调用方式象链一样,所以称为&qu