jQuery中提供了豐富多樣的選擇器射众，利用這些選擇器我們可以完成大多數(shù)任務衣撬，我們現(xiàn)在來思考如下幾個問題：
1.選取字體顏色為紅色的所有元素
2.選出背景顏色為白色的元素
3.選擇出字體大于等于16px的元素
4.選擇出背景為白色并且文字顏色為黃色的元素
5.選出所有字體為紅色的元素的字體為14像素的所有子元素
......
總之一句話：如何通過css的樣式規(guī)則來選擇元素记罚？是不是感覺jQuery自帶的選擇器力不從心了吧，好吧纸颜，高手就是喜歡這個時候出手得意绍绘，鄙人閉關一個時辰，苦思冥想褐耳，悟出了這么一個利器诈闺，吾命其名曰jQuery樣式選擇器。少年铃芦，既然你能看到我這篇博客雅镊，也是有緣人襟雷，就不賣你10塊錢了，點個贊拿去吧仁烹！看看引入樣式選擇器插件后耸弄，上面幾個問題是怎么搞定的
1. $("#c :css({color:'red'})")
2. $("#c :css({backgroundColor:'white'})");
3. $("#c :css({fontSize:'>=16px'})");
4. $("#c :css({backgroundColor:'white',color:'yellow'})");
5. $("#c :css({color:'red'}) :css({fontSize:'14px'})")
原理
jQuery支持擴展選擇器，如:first卓缰、:last都屬于擴展選擇器计呈，我們可以定義自己的擴展選擇器，如上所見征唬，我定義的選擇器就是:css,下面我們來看看如何定義：
$.extend($.expr[':'],{
selectorName:function(e,i,m){
//解析自己選擇器捌显，其中m是個數(shù)組，e是當前元素总寒，m[3]便是選
//擇器字符串,如果返回true代表當前元素被選中扶歪，反之則否
}
}
看到這里你是不是覺得自己也能實現(xiàn)了呢？too young too simple! 當然摄闸，我鼓勵你去嘗試, 站在設計者的角度善镰，注意幾個問題：
- 如何進行運算符支持？比如問題3中贪薪，要選出字體>=16像素的元素媳禁，如果是小于呢? 或者是不等于呢？
- 如何支持多個條件匹配画切，比如問題4中竣稽，既要求背景顏色是白色，而且字體是黃色霍弹，如果我再加上字體小于18像素并且margin-top大于0毫别，并且是定位方式是fixed……
- 假如你css代碼中寫了這么一句：color:red,然后你在判斷是否滿足條件時用jquery css("color")取出顏色值a,然后看a和選擇器中的色值是否滿足條件；這樣有問題嗎典格？有岛宦！ 因為不同瀏覽器css("color")返回的值是不一樣的，如果返回的是"red"那萬事大吉耍缴，但是返回的可能是#ff0000（這也是紅色砾肺，只不過換了一個16進制的馬甲），這怎么整防嗡？好好想想吧变汪！不過你應該知道，瀏覽器這樣做是可以理解的蚁趁，因為瀏覽器內部認得肯定是一個數(shù)值裙盾，而red這種語義化的寫法只是為了給開發(fā)人員方便而已。
考慮到如上幾個問題，便自然而然的產生了一個最麻煩的新問題：如何設計接口番官？
我們提供的接口要支持關系判斷(>,<,>=,<=,!=)和條件邏輯(&&)庐完。當然，如果太復雜就不應該用選擇器了徘熔，直接寫個函數(shù)去處理门躯，總不能在選擇器里支持js表達式吧。即如此近顷，我們必須找一種優(yōu)雅的解決方案生音，該怎么做？既然不能用js復雜表達式, 那能有其它什么東西本身語法表現(xiàn)力可以勝任我們當下的需求窒升，并且能夠和js很好的結合(這有助于減少我們的代碼量)缀遍，總不能引入一個庫來解析表達式吧。想到這里饱须，想必大家心里自然有了答案域醇，對，就是json. 當然蓉媳，正如上面所示譬挚，最終的接口竟是如此優(yōu)雅，唉酪呻，太完美减宣。
想到這里，一個大問題算是解決了玩荠，當還有另一個棘手的問題沒有結局漆腌，那就是上面提出的第三個問題。 本來我想直接告訴你阶冈，但本文定位不會太深入闷尿，同時也留給你想象的空間，思考過女坑，然后再去看源碼填具，我想我們才會發(fā)生真正意義上的互動與交流，畢竟匆骗，本人劍道已成多年劳景，到如今，很久未遇對手碉就，寂寞啊 枢泰。
在貼出源碼之前，我想請大家猜一下這個插件代碼量铝噩，不用告訴我，自己去看。
源碼地址：https://github.com/wendux/style-selector-jQuery-plugin
還是那句老話：歡迎star! 歡迎點贊(請在簡書原文哦)骏庸！打賞再怎么歡迎毛甲，你也不會，以后就不說了具被。 還有玻募，歡迎訪問我的github主頁，也許你會發(fā)現(xiàn)更多有價值的東西一姿。當然七咧，這都是笨辦法了，聰明的孩子都選擇了直接關注我叮叹。
注：客觀來講艾栋，本插件為當年筆者研究jQuery源碼時，閑來無事蛉顽，找樂子的實驗性產物蝗砾，筆者認為實際工程中的有需求的場景不會多皱碘，了解我的人應該都知道我比較懶团赏，很少有耐心寫博客耗跛，不過功氨，這個插件嫡锌，我曾經在csdn上介紹過一次因块，jQuery社區(qū)插件很多革娄，但關于自定義選擇器的卻很少見捅膘，此次翘地，舊文重寫申尤，一來是由于最近粉絲多了，二來也是為了探發(fā)幽微子眶。
再注：由于之前幾篇文章都是關于前端的瀑凝，有些人誤以為我現(xiàn)在是做前端的，首先謝關心臭杰，不過呢粤咪，還真不是。之所以開博的幾篇文章寫前端渴杆，我之前的想法是前端程序員多些寥枝，吸粉應該比較快。不過你不要害怕磁奖，不會把你帶到溝里囊拜，筆者雖然很謙虛，但也愿意承認一個事實比搭，前端技術雖然廣雜冠跷，但筆者有信心，在國內的前端的江湖，筆者眼里的沒幾個人蜜托，尤雨溪不錯抄囚，阮一峰老師在科普上做的工作也值得肯定。也許還有其它一些人可能像我一樣橄务，平時太懶不怎么宣傳自己所以也不為人知幔托，不過呀，我最近思想發(fā)生了變化蜂挪，所以就開了博客重挑，懶病慢慢治，既然要出世棠涮，就先高調一點谬哀，畢竟我才發(fā)現(xiàn)懶人吸粉不容易啊。
ps:所有互動請在簡書原文哦故爵，簡書我會經巢７啵看，評論也會第一時間回復诬垂，掘金到現(xiàn)在我還不怎么會用劲室，之前幾篇文章更新后想在掘金同步，愣是沒成功结窘，幫助文檔也沒找到很洋，真是的，放棄了隧枫。
