Java程式員的JavaScript學習筆記（12——jQuery-延伸選取器），學習筆記jquery-

Java程式員的JavaScript學習筆記（12——jQuery-延伸選取器），學習筆記jquery-
計劃按如下順序完成這篇筆記：
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 retrievaljQuery.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){// blabla        return 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 


能限制你的只有你的想象力了！
現在作為一個java程式員，在項目開發中對於jQuery這個javascript架構會用到什方面的知識

jquery的話主要是操作前台的，如果你只是做背景話 通道的可能不會太多：
我只是說我所用到的啊
1：前台與後台進行無重新整理的操作從而達到資料的互動，當然也包過無重新整理上傳
2：如果你用jquert easyUI的話 可能用到json的就比較多了，無重新整理表格，無重新整理書，無重新整理下拉框，前台的所有空間都可以easyUI很簡單的就實現無重新整理，
3：提交表動的時候一些空間值的驗證了，諸如這些之類的，

如果說這些你們分工很明確的話 你這估計都不用謝，你只用後台返回json就行了，前台肯本就不用管

如果還有什麼不明白的話 請追問
 
java程式員javascript要掌握到什水平？

其實那些很炫效果網上都有原始碼，他們用的js架構，如jquery,和ajax架構，如dojo,extjs,dwr等 ，作為程式員只要會寫常用的javascript，如表單的驗證，樹形菜單，捲簾菜單等。和對常用的對象常用的方法必須熟悉，如document,widow,form.我在公司開發，花在前台的時間比背景時間多的多。程式員還要懂css,