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

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

0、為什么要擴展？

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

1、如何擴展？

jQuery為選擇器提供了豐富的擴展機制。如下：
// 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[":"]應該是我們的著力點。
Expr = Sizzle.selectors = {pseudos: {"enabled": function( elem ) {return elem.disabled === false;},"disabled": function( elem ) {return elem.disabled === true;}} }通過以上代碼，我們看出jQuery.expr[":"]就是我們的發力點，jQuery.expr.pseudos的代碼可以作為我們的參考。
擴展jQuery選擇器的代碼如下：
$.extend($.expr[':'],{"uitype": function(elem){// blablareturn true/false;} }); 從傳入參數elem中，可以通過elem.attr()獲得屬性，做判斷，然后決定當前元素是否返回。
比想象的簡單太多！

問過度娘，psedudos中定義的選擇器用法是：
$(":enabled") $("#xx :enabled") $("blabla :enabled")那我們擴展的選擇器用法應該是： $("blabla :uitype") 。
Err...還需要傳入參數，形如： $("div[:uitype='panel']");
找個例子：
"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]);}}});}); }太復雜，懶得看，寫段代碼試一下

2、舉例子

2.1、不帶參數的

<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 // 找到兩個

2.2、帶參數的

<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);//打印調用者for(var i = 0;i<arguments.length;++i){//打印參數的值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，而且只有這個，已經做好篩選了， [] 中的篩選是不需要我寫代碼就能獲得的
object #document //文檔根對象
boolean false?
關于調用者，根據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個參數：元素本身，上下文，和是否xml。
還是沒能夠獲得選擇表達式中寫的參數，一定是姿勢不對。

[]已經被實現了，試試小括號：

<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 ，這個正是我想要的

充滿無限可能了！

整理代碼框架如下：
<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 發表于2014-10-27 5:50:37 原文鏈接 閱讀：251 評論：0 查看評論

轉載于:https://www.cnblogs.com/liuhailong2008/p/4055289.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。