計(jì)劃按如下順序完成這篇筆記：
1. ? ?理念。
2. ? ?屬性復(fù)制和繼承。
3. ? ?this/call/apply。
4. ? ?閉包/getter/setter。
5. ? ?prototype。
6. ? ?面向?qū)ο竽M。
7. ? ?jQuery基本機(jī)制。
8. ? ?jQuery選擇器。
9. ? ?jQuery工具方法。
10. ? ?jQuery-在“類”層面擴(kuò)展。
11. ? ?jQuery-在“對象”層面擴(kuò)展。
12. ? ?jQuery-擴(kuò)展選擇器。
13. ? ?jQuery UI。
14. ? ?擴(kuò)展jQuery UI。
這是筆記的第12篇，本篇我們嘗試擴(kuò)展jQuery選擇器，同時(shí)這也是一個(gè)jQuery源碼解讀的過程。

作者博客：http://blog.csdn.net/stationxp 作者微博：http://weibo.com/liuhailong2008 轉(zhuǎn)載請取得作者同意

0、為什么要擴(kuò)展？

自帶的功能很強(qiáng)，但有時(shí)候代碼會(huì)很啰嗦，而且初級人員總是掌握不好，影響效率。
從架構(gòu)角度可以簡化的話，能提高程序可讀性，提高效率。

1、如何擴(kuò)展？

jQuery為選擇器提供了豐富的擴(kuò)展機(jī)制。如下：
// Override sizzle attribute retrieval jQuery.find = Sizzle; jQuery.expr = Sizzle.selectors; jQuery.expr[":"] = jQuery.expr.pseudos; jQuery.unique = Sizzle.uniqueSort; jQuery.text = Sizzle.getText; jQuery.isXMLDoc = Sizzle.isXML; jQuery.contains = Sizzle.contains;從字面分析jQuery.expr和jQuery.expr[":"]應(yīng)該是我們的著力點(diǎn)。
Expr = Sizzle.selectors = {pseudos: {"enabled": function( elem ) {return elem.disabled === false;},"disabled": function( elem ) {return elem.disabled === true;}} }通過以上代碼，我們看出jQuery.expr[":"]就是我們的發(fā)力點(diǎn)，jQuery.expr.pseudos的代碼可以作為我們的參考。
擴(kuò)展jQuery選擇器的代碼如下：
$.extend($.expr[':'],{"uitype": function(elem){// blablareturn true/false;} }); 從傳入?yún)?shù)elem中，可以通過elem.attr()獲得屬性，做判斷，然后決定當(dāng)前元素是否返回。
比想象的簡單太多！

問過度娘，psedudos中定義的選擇器用法是：
$(":enabled") $("#xx :enabled") $("blabla :enabled")那我們擴(kuò)展的選擇器用法應(yīng)該是： $("blabla :uitype") 。
Err...還需要傳入?yún)?shù)，形如： $("div[:uitype='panel']");
找個(gè)例子：
"gt": createPositionalPseudo(function( matchIndexes, length, argument ) {var i = argument < 0 ? argument + length : argument;for ( ; ++i < length; ) {matchIndexes.push( i );}return matchIndexes;})function createPositionalPseudo( fn ) {return markFunction(function( argument ) {argument = +argument;return markFunction(function( seed, matches ) {var j,matchIndexes = fn( [], seed.length, argument ),i = matchIndexes.length;// Match elements found at the specified indexeswhile ( i-- ) {if ( seed[ (j = matchIndexes[i]) ] ) {seed[j] = !(matches[j] = seed[j]);}}});}); }太復(fù)雜，懶得看，寫段代碼試一下

2、舉例子

2.1、不帶參數(shù)的

<div uitype='header'>頭</div> <div uitype='footer'>尾</div> <script> $.extend($.expr[':'],{"uitype": function(elem){var t = $(elem).attr('uitype');console.log(t);return !!t;} }); var arr = $(":uitype"); console.log(arr.length); </script>輸出：
undefined
undefined
undefined
undefined
header
footer
undefined
2 // 找到兩個(gè)

2.2、帶參數(shù)的

<div uitype='header'>header</div> <div uitype='footer'>footer</div> <script> $.extend($.expr[':'],{"uitype": function(elem){// var t = $(elem).attr('uitype');console.log(arguments.callee.caller);//打印調(diào)用者for(var i = 0;i<arguments.length;++i){//打印參數(shù)的值console.log(typeof arguments[i],arguments[i]);}return true;} }); var arr = $(":uitype[uitype='footer']"); console.log(arr.length); // output : 1 輸出：
function code ...?
object ?div //footer的dom，而且只有這個(gè)，已經(jīng)做好篩選了， [] 中的篩選是不需要我寫代碼就能獲得的
object #document //文檔根對象
boolean false?
關(guān)于調(diào)用者，根據(jù)function code找到了
function elementMatcher( matchers ) {return matchers.length > 1 ?function( elem, context, xml ) {var i = matchers.length;while ( i-- ) {if ( !matchers[i]( elem, context, xml ) ) {return false;}}return true;} :matchers[0]; }傳入了3個(gè)參數(shù)：元素本身，上下文，和是否xml。
還是沒能夠獲得選擇表達(dá)式中寫的參數(shù)，一定是姿勢不對。

[]已經(jīng)被實(shí)現(xiàn)了，試試小括號：

<div uitype='header'>header</div> <div uitype='footer'>footer</div> <script> $.extend($.expr[':'],{"uitype": function(elem,content,xml){for(var i = 0;i<arguments.length;++i){console.log(i);console.log(typeof arguments[i],arguments[i]);}return true;} }); var arr = $(":uitype(xx)"); console.log(arr.length); </script>輸出：
object ?div // elem?
number 0 // 什么？?
object ["uitype", "uitype", "", "xx"] //得到了 xx ，這個(gè)正是我想要的

充滿無限可能了！

整理代碼框架如下：
<strong><div uitype='header'>header</div> <div uitype='footer'>footer</div> <script> $.extend($.expr[':'],{"uitype": function(elem,someNumber,exprParams){console.log($(elem).attr('uitype'),exprParams[3]);return true;} }); var arr = $(":uitype(xx)");</strong>輸出：
header xx?
footer xx?


能限制你的只有你的想象力了！ 作者：stationxp 發(fā)表于2014-10-27 5:50:37 原文鏈接 閱讀：251 評論：0 查看評論

轉(zhuǎn)載于:https://www.cnblogs.com/liuhailong2008/p/4055289.html

總結(jié)

以上是生活随笔為你收集整理的[原]Java程序员的JavaScript学习笔记（12——jQuery-扩展选择器）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。