jquery中提供了豐富多樣的選擇器，利用這些選擇器我們可以完成大多數任務，但是喜歡思考的我們總得找點事，提問時間：
1.如何選擇所有字型顏色為紅色的元素
2.如何選擇出背景顏色為為白色的元素
3.如何選擇出字型大於等於16px的元素
4.如何選擇出背景元素為白色並且文字顏色為黃色的元素
等等等等......總之一句話：如何通過css的樣式規則來選擇元素？


是不是感覺jquery自帶的選擇器力不從心了吧，好吧，高手就是喜歡這個時候出手得意，鄙人閉關一個時辰，苦思冥想，悟出了這麼一個利器，吾命其名為jquery樣式選擇器外掛，少年，既然你能看到我這篇部落格，也是有緣人，就不賣你10塊錢了，點個贊拿去吧！從此媽媽再也不用擔心老師會問如何根據元素的樣式特徵去選擇元素了，看看引入樣式選擇器外掛後，上面幾個問題是怎麼簡單輕鬆easy nice 搞定的

1.$("#c :css({color:'red'})") 2.$("#c :css({backgroundColor:'white'})"); 3.$("#c :css({fontSize:'>=16px'})"); 4.$("#c :css({backgroundColor:'white',color:'yellow'})");

原理：jquery支援選擇器擴充套件：

$.extend($.expr[':'], { selectorName: function(e, i, m){ //解析自己選擇器，其中m是個陣列，e是當前元素，m[3]便是選擇器字串， // 如果返回true代表當前元素被選中，反之則否 } }

好的，看到這裡你是不是覺得自己也能實現了呢？too young too simple! 當然， 我鼓勵你去嘗試，但是你要注意兩個問題：

1.如何進行運算子支援比如問題3中，要選出字型>=16畫素的元素
2.如何支援多個條件匹配，比如問題4中，既要求背景顏色是白色，而且字型是黃色，如果我再加上字型小於18畫素並且margin-top大於0，並且是定位方式是fixed的.....
3.假如你css程式碼中寫了這麼一句：color:red,然後你在判斷是否滿足條件時用jquery css("color")取出顏色值a,然後看a和選擇器中的色值是否滿足條件；這樣有問題嗎？有！ 因為不同瀏覽器css("color")返回的值是不一樣的，如果返回的是"red"那萬事大吉，但是返回的可能是#ff0000（這也是紅色，只不過換了一個16進位制的馬甲），這怎麼整？好好想想吧！不過你應該知道，瀏覽器這樣做是可以理解的，因為瀏覽器內部認得肯定是一個數值，而red這種語義化的寫法只是為了給開發人員方便而已。


It's your turn. 少年去嘗（碰）試（壁）吧！


-----------------------------------------------------------------------------------------------------
----------我是分割線，如果你實現了，或者已經碰的頭破血流了，那麼請往下看，看看大師是怎麼實現的---------------
------------------------------------------------------------------------------------------------------


可以看到我們的選擇器字串是一個物件{}的串，為什麼要這樣，這可是很巧（xin）妙(ji)的:原因有兩個：

1.解析時可以直接用eval轉化成js物件 
2.css樣式非常多，我們不可能在解析時逐一對比到底是哪個樣式有規則（可能是font-size也可能是color....），因為最終我們是要通過jquery方法的css去匹配，而css方法正好可以接受一個物件。【ps:這一點不能理解的話你可以試著不要看下面原始碼想想定義成其它格式怎麼實現，然後你就會默然回首，恍然大悟，大讚一聲"喵"的】


如何支援運算子， 無非就是== > < >= <= 這幾種，一個正則搞定：/^[><=!]?=?/。


顏色問題怎麼辦？ 關鍵是思維！ 我們雖然不知道自己設定的和再去取得的樣子是不是一樣，比如我們css中寫的是red，我們不用css()返回後的結果a（可能是#ff0000）直接和我們選擇器字串中的值b（red）相比,而是我們先把b設定到某個元素E中之後，然後再用css()取出E的color,記為c，最後用c去和a去比較！ （好好體會一下）。 


能看到這裡，少年，好樣的，我果然沒有看錯你，但是先別高興，我們還有一個問題，那就是E什麼時候建立（當然E肯定是不能顯示的，display:none），我們不能每次比較前都建立一個元素吧，對的，快取！


好了，既然到這一步了，那麼程式碼你也應該能看懂了！ 來想象一下，這麼狂拽炫酷屌炸天的功能，程式碼得有多少行？ 大膽一點！


看看原始碼長啥樣：

/* author:duwen 2015.9.3  qq:824783146 */ +function($){ $.extend($.expr[':'], { css: function(e, i, m) { "use strict"; var s=eval("("+m[3]+")") var r=/^[><=!]?=?/; var t,cc for(var c in s){ s[c]=s[c].replace(r,function(w){t=w;return ""}) if(t=="")t="=="; if(!m[9]){  var d=$("#_csss"); m[9]=d[0]&&d||$("<div id='_csss' style='display:none'>").appendTo("body")  } m[9].css(c,s[c]);  cc=m[9].css(c); if (eval("$(e).css(c)"+t+"cc")); else return false; } return true; }    }); }(jQuery);


驚豔了吧~


demon地址：http://download.csdn.net/detail/duwen90/9415729