jQuery提供了一整套非常好用的遍历Dom树节点的API,下面是看源码的过程,看完了后对API进行分级别,将将要的级别移到插件,或者将其删除,保持jQuery的精简。
学习重点:
正则表达式深化
var rparentsprev = /^(?:parents|prevUntil|prevAll)/;
?:在正则表达式中表示:非捕获子模式,即使满足parents|prevUntil|prevAll,也不捕获
同类方法的抽取
parent,parents...,并将他们推入栈中(pushStack),回顾pushStack方法定义在core.js中,方法中通过链接的方式设置了一个preObject属性,为end()方法留下可能。
(function( jQuery ) {
// ?:在正则表达式中表示:非捕获子模式,即使满足parents|prevUntil|prevAll,也不捕获
// /,/用于多个选择器分隔
//
var runtil = /Until$/,
rparentsprev = /^(?:parents|prevUntil|prevAll)/,
// Note: This RegExp should be improved, or likely pulled from Sizzle
rmultiselector = /,/,
// 以任何字符开始,并且后续字符是非# [ . ,的正则表达式
isSimple = /^.[^:#\[\.,]*$/,
slice = Array.prototype.slice,
POS = jQuery.expr.match.globalPOS,
// methods guaranteed to produce a unique set when starting from a unique set
guaranteedUnique = {
children: true,
contents: true,
next: true,
prev: true
};
jQuery.fn.extend({
find: function( selector ) {
var self = this,
i, l;
//如果是简单的字符串,则交由filter函数,通过contains函数判断是否需要过滤掉集合同的数据(其中contains方法在sizzle中)
if ( typeof selector !== "string" ) {
return jQuery( selector ).filter(function() {
for ( i = 0, l = self.length; i 0 ) {
// Make sure that the results are unique
for ( n = length; n = 0 :
jQuery.filter( selector, this ).length > 0 :
this.filter( selector ).length > 0 );
},
// TODO:这个API可以删除,最近的元素
closest: function( selectors, context ) {
var ret = [], i, l, cur = this[0];
// Array (deprecated as of jQuery 1.7)
if ( jQuery.isArray( selectors ) ) {
var level = 1;
while ( cur && cur.ownerDocument && cur !== context ) {
for ( i = 0; i -1 : jQuery.find.matchesSelector(cur, selectors) ) {
ret.push( cur );
break;
} else {
cur = cur.parentNode;
if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) {
break;
}
}
}
}
ret = ret.length > 1 ? jQuery.unique( ret ) : ret;
return this.pushStack( ret, "closest", selectors );
},
// Determine the position of an element within
// the matched set of elements
// 获取元素的索引
index: function( elem ) {
// No argument, return index in parent
if ( !elem ) {
return ( this[0] && this[0].parentNode ) ? this.prevAll().length : -1;
}
// index in selector
if ( typeof elem === "string" ) {
return jQuery.inArray( this[0], jQuery( elem ) );
}
// Locate the position of the desired element
return jQuery.inArray(
// If it receives a jQuery object, the first element is used
elem.jquery ? elem[0] : elem, this );
},
// 将元素添加进来
add: function( selector, context ) {
// 对selector进行简单的判断
var set = typeof selector === "string" ?
jQuery( selector, context ) :
jQuery.makeArray( selector && selector.nodeType ? [ selector ] : selector ),
all = jQuery.merge( this.get(), set );
return this.pushStack( isDisconnected( set[0] ) || isDisconnected( all[0] ) ?
all :
jQuery.unique( all ) );
},
andSelf: function() {
return this.add( this.prevObject );
}
});
// A painfully simple check to see if an element is disconnected
// from a document (should be improved, where feasible).
function isDisconnected( node ) {
return !node || !node.parentNode || node.parentNode.nodeType === 11;
}
// 对同类结果组合改变的API进行统一的抽象
jQuery.each({
// 获取单个父结点
parent: function( elem ) {
var parent = elem.parentNode;
return parent && parent.nodeType !== 11 ? parent : null;
},
// 获取所有父结点
parents: function( elem ) {
return jQuery.dir( elem, "parentNode" );
},
parentsUntil: function( elem, i, until ) {
return jQuery.dir( elem, "parentNode", until );
},
next: function( elem ) {
return jQuery.nth( elem, 2, "nextSibling" );
},
prev: function( elem ) {
return jQuery.nth( elem, 2, "previousSibling" );
},
nextAll: function( elem ) {
return jQuery.dir( elem, "nextSibling" );
},
prevAll: function( elem ) {
return jQuery.dir( elem, "previousSibling" );
},
nextUntil: function( elem, i, until ) {
return jQuery.dir( elem, "nextSibling", until );
},
prevUntil: function( elem, i, until ) {
return jQuery.dir( elem, "previousSibling", until );
},
siblings: function( elem ) {
return jQuery.sibling( ( elem.parentNode || {} ).firstChild, elem );
},
children: function( elem ) {
return jQuery.sibling( elem.firstChild );
},
contents: function( elem ) {
return jQuery.nodeName( elem, "iframe" ) ?
elem.contentDocument || elem.contentWindow.document :
jQuery.makeArray( elem.childNodes );
}
}, function( name, fn ) {
jQuery.fn[ name ] = function( until, selector ) {
var ret = jQuery.map( this, fn, until );
if ( !runtil.test( name ) ) {
selector = until;
}
if ( selector && typeof selector === "string" ) {
ret = jQuery.filter( selector, ret );
}
ret = this.length > 1 && !guaranteedUnique[ name ] ? jQuery.unique( ret ) : ret;
if ( (this.length > 1 || rmultiselector.test( selector )) && rparentsprev.test( name ) ) {
ret = ret.reverse();
}
return this.pushStack( ret, name, slice.call( arguments ).join(",") );
};
});
jQuery.extend({
filter: function( expr, elems, not ) {
if ( not ) {
expr = ":not(" + expr + ")";
}
// 完全是通过调用sizzle进行过滤,支持not表示“包含内”或者是“包含外”
return elems.length === 1 ?
jQuery.find.matchesSelector(elems[0], expr) ? [ elems[0] ] : [] :
jQuery.find.matches(expr, elems);
},
// cur属于一个递归的调用过程,不断的将递归的结果放到cur里面,并添加到matched中,这个设计模式用得好
dir: function( elem, dir, until ) {
var matched = [],
cur = elem[ dir ];
while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {
if ( cur.nodeType === 1 ) {
matched.push( cur );
}
cur = cur[dir];
}
return matched;
},
// 获取第几个结点
nth: function( cur, result, dir, elem ) {
result = result || 1;
var num = 0;
for ( ; cur; cur = cur[dir] ) {
if ( cur.nodeType === 1 && ++num === result ) {
break;
}
}
return cur;
},
// 递归获取兄弟结点,返回数组
sibling: function( n, elem ) {
var r = [];
for ( ; n; n = n.nextSibling ) {
if ( n.nodeType === 1 && n !== elem ) {
r.push( n );
}
}
return r;
}
});
// Implement the identical functionality for filter and not
function winnow( elements, qualifier, keep ) {
// Can't pass null or undefined to indexOf in Firefox 4
// Set to 0 to skip string check
qualifier = qualifier || 0;
// grep函数在core.js中,若callback返回true,则elem保留
// 如果qualifier为一个函数,则遍历elements,调用qualifier,若返回true,对象elem保留
if ( jQuery.isFunction( qualifier ) ) {
return jQuery.grep(elements, function( elem, i ) {
var retVal = !!qualifier.call( elem, i, elem );
return retVal === keep;
});
// 如果qualifier为一个dom结点,则直接比较elem比较
} else if ( qualifier.nodeType ) {
return jQuery.grep(elements, function( elem, i ) {
return ( elem === qualifier ) === keep;
});
// 如果qualifier为string字符串,则
} else if ( typeof qualifier === "string" ) {
var filtered = jQuery.grep(elements, function( elem ) {
return elem.nodeType === 1;
});
if ( isSimple.test( qualifier ) ) {
// 如果以任何字符开始,并且后续字符是非# [ . ,选择器,则直接返回使用sizzle过滤的结果,说明是单层级的
return jQuery.filter(qualifier, filtered, !keep);
} else {
// 其实这里的逻辑,加上下面的逻辑不就一样了吗?都是返回一个列表
qualifier = jQuery.filter( qualifier, filtered );
}
}
// 如果elem在qualifier中,则添加到结果中
return jQuery.grep(elements, function( elem, i ) {
return ( jQuery.inArray( elem, qualifier ) >= 0 ) === keep;
});
}
})( jQuery );
分享到:
相关推荐
《jquery技术内幕:深入解析jquery架构设计与实现原理》由阿里巴巴资深前端开发工程师撰写,从源代码角度全面而系统地解读了jquery的17个模块的架构设计理念和内部实现原理,旨在帮助读者参透jquery中的实现技巧和...
二叉树的遍历(traversing binary tree)是指从根结点出发,按照某种次序依次访问二叉树中所有的结点,使得每个结点被访问依次且仅被访问一次。
深入解析jquery架构设计与实现原理》首先通过...最后详细分析了功能模块的源码实现,包括:属性操作attributes、事件系统events、dom遍历traversing、dom操作manipulation、样式操作css、异步请求ajax、动画effects
正如Using Deferreds in jQuery 1.5一文中说明的,其结果是在jQuery中能够将依赖于某个任务(事件)结果的逻辑与任务本身解耦了。这一点在JavaScript中其实并不新鲜,Mochikit和Dojo等已经实现有些日子了。由于...
jQuery是业界最流行的JavaScript... 第四部分(第8~14章)详细分析了功能模块的源码实现,包括属性操作Attributes、事件系统Events、DOM遍历Traversing、DOM操作Manipulation、样式操作CSS、异步请求Ajax、动画Effects
tree_traversing.java是主类里边包括根据父结点-子节点形式的输入生成树的链式表示及对链式表示进行非递归的先序遍历请下载其中用到的表示树的两个类源码tree_node.java和runtime_tree_node.java
深入解析jquery架构设计与实现原理》首先通过...最后详细分析了功能模块的源码实现,包括:属性操作attributes、事件系统events、dom遍历traversing、dom操作manipulation、样式操作css、异步请求ajax、动画effects
Eclipse 常用快捷键 元素事件列表说明 JQuery Effects , JQuery Traversing , JQuery Selectors , JQuery CSS 方法说明
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the ...
tree_traversing.java附件tree_node.java还需下载runtime_tree_node,tree_traversing.java
$.jQuery( selector [, context] ), .jQuery( element ), .jQuery( elementArray ), .jQuery( jQueryObject ), .jQuery( ) $.jQuery( html [, ownerDocument] ), .jQuery( html, props ) $.jQuery( fn ) jQuery ...
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the ...
R中的遍历图 该存储库包含我的eRum 2018研讨会图表:要查询的数据结构的材料。 简介:为什么使用图形? 第1部分:igraph 元素 第2部分:基本R功能快速回顾 第3部分:探索功能 第4部分:绘制图形 第5部分:探索...
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the ...
Chapter 3: Traversing the DOM 29 Chapter 4: DOM Manipulation with jQuery 43 Chapter 5: An Introduction to Events59 Chapter 6: More Events 71 Chapter 7: Animation 83 Chapter 8: Ajax with jQuery ...
遍历Cooley-Tukey FFT计算图的稀疏傅里叶变换_Sparse Fourier Transform by traversing Cooley-Tukey FFT computation graphs.pdf
VC编程实现遍历树控件实例资料VC programming examples of data traversing the tree control
通过遍历权值空间测地线求解混合机器学习任务_Solving hybrid machine learning tasks by traversing weight space geodesics.pdf
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the ...
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the ...