jQuery的選擇器非常強(qiáng)大,使你可以輕松選取頁(yè)面中任何一個(gè)對(duì)象,下面我們就主要針對(duì)DOM操作來(lái)看一下jQuery中選擇器的基礎(chǔ)使用教程,需要的朋友可以參考下
其實(shí)選擇器就像開(kāi)罐器一樣，會(huì)用這個(gè)工具的人，自然吃的到甜頭，但不會(huì)用這個(gè)工具的人，不管罐頭里面的面筋土豆有多美味，吃不到就是吃不到，就如同jquery再怎么強(qiáng)大，也只能看著熒幕，而不知該如何下手，不過(guò)雖然選擇器不難，也容易上手，但老實(shí)說(shuō)，我用了一年多下來(lái)，還是覺(jué)得自己只有用皮毛而已，所以希望藉著這一系列的筆記，讓自己能更長(zhǎng)進(jìn)一些
DOM怎么吃
DOM可以說(shuō)是JavaScript與網(wǎng)頁(yè)之間的聯(lián)系管道，他提供了一個(gè)模型，讓JavaScript能藉由此模型來(lái)改變或操作整個(gè)網(wǎng)頁(yè)，
<div>
<p>two_1</p>
<p>two_2</p>
<p>two_2</p>
</div>
我這邊就簡(jiǎn)單介紹一下DOM模型，有個(gè)元素class名為one的是父元素，底下有三個(gè)兒子元素<p>，每個(gè)元素都視為一個(gè)節(jié)點(diǎn)，也可以看成一個(gè)樹(shù)形圖，因?yàn)槲艺J(rèn)為有些東西是Google會(huì)講得比我好，所以還想知道更多糾結(jié)的父子關(guān)系...，可以去這，那邊有很好的說(shuō)明，這邊就不多加解釋?zhuān)?dāng)Jquery利用選擇器抓取到DOM元素以后，就會(huì)將他包裝成一個(gè)Jquery object，并且回傳
$('#MyDiv')<-- 他是一個(gè)物件
這里有個(gè)觀念十分重要，因?yàn)樵S多初學(xué)者，甚至是一些從Jquery開(kāi)始學(xué)起Javascript的開(kāi)發(fā)者(包括我)，常常會(huì)把以下兩個(gè)程序碼搞混在一起
//原生JavaScript取id為a的div
var result1 = document.getElementById('a');
console.log(result1);
//用jquery取id為a的div
var result2=$('#a');
console.log(result2);
如果你執(zhí)行這段程序碼出來(lái)，妳會(huì)發(fā)現(xiàn)console出來(lái)的結(jié)果，用JavaScript取出來(lái)的結(jié)果是DOM，可是一樣的div用Jquery取出來(lái)的卻是個(gè)包裝過(guò)后的物件，換句話說(shuō)，你不能直接對(duì)包裝過(guò)后的Jquery物件增加DOM的事件，而是要用Jquery提供的事件，有人會(huì)說(shuō)，那意思是不是說(shuō)以后只能河水不犯井水，往后互不干涉，從此分道揚(yáng)鑣呢? 到也不是
var b=$('#a')[0];
只要跟上述程序碼一樣就可以取得DOM的元素了
$()工廠
不管是如何選擇，我們都會(huì)用相同的函式$()，就如之前所講的，他能接受CSS選擇器的語(yǔ)法做為參數(shù)，而最主要的三個(gè)參數(shù)分別為tag name、ID與class，當(dāng)然，這三個(gè)參數(shù)可以再與其他CSS語(yǔ)法做結(jié)合
//tag name
$('div')
//ID
$('#myId')
//class
$('.myClass')
而上述函式都會(huì)如同第一章所介紹的，都有隱式迭代的特色，而為了做到跨覽器的支援，Jquery的選擇器包含了CSS1-3，所以不用擔(dān)心一些比較特別的瀏覽器(對(duì)就是IE6)不能執(zhí)行，除非瀏覽器沒(méi)有開(kāi)啟JavaScript
接著接下來(lái)我簡(jiǎn)單介紹幾個(gè)用法
http://jsfiddle.net/XZnQ7/
//將不含color1 class的p增加一個(gè)color2 class
$('p:not(.color1)').addClass('color2');
http://jsfiddle.net/bpJct/3/
//這里是用正規(guī)表示法
$('a[href^="mailto:"]').addClass('font1');
$('a[href^="http"]').addClass('font2');
$('a[href$=".pdf"]').addClass('font3');
當(dāng)然還提供了一些客制化(custom)的選擇器，但一般來(lái)說(shuō)原生(native)的方式會(huì)來(lái)的效能比較快，如果有注重這塊的朋友，可能要盡量避免使用客制化的選擇器例如以下范例
http://jsfiddle.net/MF8mu/
//替index為1的tr加上class
$('tr:eq(1)').addClass('color1');
//替index為1的tr加上class
$('tr:nth-child(1)').addClass('color2');
這里很特別的是，為什么都是替index為1的tr加上class，卻是不同的結(jié)果呢?，因?yàn)?eq()算是一個(gè)JavaScript陣列，index是0起始，所以才會(huì)選到第二個(gè)，而nth-child()是CSS選擇器的一種，所以index是以1起始，選到的就是第一個(gè)，以下的范例意思相同
http://jsfiddle.net/3PrJt/
//選擇偶數(shù)的tr增加class
$('tr:even').addClass('color1');
//選擇偶數(shù)的tr增加class
$('tr:nth-child(even)').addClass('color2');
就如同剛剛所講的，index起始不同(JavaScript起始為0，CSS為1)，所以雖然都是取偶數(shù)，但卻是不同列
再來(lái)就一些FORM常用的選擇器 http://jsfiddle.net/qcXSy/3/
$(':button').click(function(){
alert('a');
});
這就代表說(shuō)綁定所有的bitton一個(gè)click事件，其他還有像:input、:button、:enabled、:disabled都可以跟其他選擇器一起組合成新的選擇器
更加強(qiáng)大的.filter()
當(dāng)有時(shí)候一般的選擇器已經(jīng)不能不能滿(mǎn)足我們復(fù)雜的DOM時(shí)，例如要抓div的爸爸的哥哥的兒子的妹婿的二姑的大舅時(shí)...，這時(shí)候還可以用一個(gè)方法filter，這個(gè)方法特別的地方在于他可以帶function進(jìn)去 http://jsfiddle.net/wGz3k/
可以看到function里面限制return index == 1才可以增加CSS，這個(gè)好處就在于可以在里面做很多復(fù)雜的邏輯運(yùn)算
當(dāng)然Jquery還有太多太多選擇器可以使用，像還有.next()、.parent()、.children()一般常用的這幾個(gè)，其實(shí)就很夠用了我認(rèn)為，再多的選擇器有時(shí)候好像只是展示不同的寫(xiě)法，但其實(shí)只要能抓取到你想要的元素，解決問(wèn)題
你甚至想要這樣寫(xiě)$('div').children().children().children().children().children()也不會(huì)有人說(shuō)不行..
實(shí)例
一個(gè)網(wǎng)站中有10種的文章分類(lèi)，我們?cè)O(shè)計(jì)一個(gè)類(lèi)似WordPress顯示各文章分類(lèi)的名稱(chēng)及其文章數(shù)量的欄目，當(dāng)用戶(hù)進(jìn)入一個(gè)頁(yè)面時(shí)，默認(rèn)顯示前面5個(gè)分類(lèi)的名稱(chēng)以及最后一個(gè)分類(lèi)——其他分類(lèi)，用戶(hù)可以通過(guò)單擊“顯示全部分類(lèi)”按鈕來(lái)顯示全部分類(lèi)，同時(shí)一些推薦的分類(lèi)會(huì)加下劃線顯示，按鈕中的文字會(huì)改變?yōu)椤帮@示部分分類(lèi)”，再次單擊“顯示部分分類(lèi)”后會(huì)回到之前的頁(yè)面狀態(tài)。
首先為了實(shí)現(xiàn)這個(gè)功能，我們需要寫(xiě)出相應(yīng)的 html
<div>
<h2>分類(lèi)列表</h2>
<ul>
<li><a href="#">互聯(lián)網(wǎng)(55)</a></li>
<li><a href="#">前端(22)</a></li>
<li><a href="#">css(10)</a></li>
<li><a href="#">jQuery(12)</a></li>
<li><a href="#">后臺(tái)(28)</a></li>
<li><a href="#">Php(10)</a></li>
<li><a href="#">jsp(6)</a></li>
<li><a href="#">.net(5)</a></li>
<li><a href="#">CMS(9)</a></li>
<li><a href="#">其他分類(lèi)(3)</a></li>
</ul>
<div>
<a href="more.html"><span>顯示全部分類(lèi)</span></a>
</div>
</div>
在Html寫(xiě)后好再添加一些簡(jiǎn)單的css，然后就可以開(kāi)始jQuery的編寫(xiě)。
下面的代碼將實(shí)現(xiàn)頁(yè)面加載完畢后選取相應(yīng)的對(duì)象并隱藏，這里選取的是第6個(gè)分類(lèi)到第9個(gè)分類(lèi)4個(gè)對(duì)象，因?yàn)樾枰刂齐[藏和顯示的便是這四個(gè)分類(lèi)。
var $category = $('ul li:gt(4):not(:last)');
$category.hide();
$('ul li:gt(4):not(:last)')的意思便是獲取索引值大于4的li元素并且去掉最后一個(gè)，需要注意的是索引值是從0開(kāi)始，所以這樣便可以獲取第6到第9個(gè)分類(lèi)。
下面將會(huì)獲取“顯示全部分類(lèi)”按鈕，并且給該按鈕添加一個(gè)事件，單擊該按鈕后顯示所有分類(lèi)
var $toggleBtn = $('.more a');
$toggleBtn.click(function() {
$category.show();
return false;
});
.show()是用于顯示元素的動(dòng)畫(huà)，另外由于給超鏈接添加onclick事件，因此需要添加return false語(yǔ)句阻止該超鏈接跳轉(zhuǎn)。
寫(xiě)到這里，我們不難發(fā)現(xiàn)，jQuery的選擇器跟css選擇器有相近之處，其原理都是先以選擇器選擇對(duì)象，再添加操作，不過(guò)jQuery的選擇器明顯比css的豐富和簡(jiǎn)便得多，這也是使用jQuery能大大提高網(wǎng)站開(kāi)發(fā)效率的重要原因。
接著上面的例子，根據(jù)文章開(kāi)頭設(shè)定的條件，在單擊“顯示全部分類(lèi)”的按鈕后，部分推薦的分類(lèi)會(huì)添加下劃線，同時(shí)按鈕中的文字會(huì)變成“顯示部分分類(lèi)”，因此我們還需要在.show()和return false之間添加以下代碼：
$('.more a span').text("顯示部分分類(lèi)");
$('ul li').filter(":contains('前端'),:contains('css'),:contains('jQuery'),:contains('CMS')").addClass("feature");
.text()用于改變對(duì)象中的文字，filter()可以用于選出推薦對(duì)象，這里推薦的是前端，CSS，jQuery，CMS，然后使用addClass()為它們添加“feature”類(lèi)，因?yàn)槲乙杨A(yù)先寫(xiě)feature類(lèi)的css，所以以上推薦對(duì)象在單擊按鈕后便會(huì)加上下劃線。至此，可以說(shuō)基本完成了這次需要的jQuery，當(dāng)然用戶(hù)單擊“顯示部分分類(lèi)”后的效果還沒(méi)有寫(xiě)上相應(yīng)的jQuery。但有了前面的一段jQurey代碼，相信寫(xiě)出單擊“顯示部分分類(lèi)”后的代碼應(yīng)該不難。
在單擊“顯示部分分類(lèi)”后的效果中其中一個(gè)是需要去掉推薦分類(lèi)的下劃線效果，我們可以使用removeClass()，用法與addClass相同。
現(xiàn)在余下的問(wèn)題是如何把兩段代碼寫(xiě)在一起，由于用戶(hù)在兩個(gè)事件上單擊的是同一個(gè)按鈕，因此事件仍然是在剛才的按鈕元素上，要使兩種狀態(tài)在一個(gè)元素上進(jìn)行，我們可以使用判斷：
if(元素顯示狀態(tài) ) {
//隱藏元素
}else{
//顯示元素
}
整個(gè)完整的jQuery代碼如下：
$(document).ready(function() {
var $category = $('ul li:gt(4):not(:last)');
$category.hide();
var $toggleBtn = $('.more a');
$toggleBtn.click(function() {
if($category.is(":visible")) {
$category.hide();
$('.more a span')
.text("顯示全部分類(lèi)");
$('ul li').removeClass("feature");
}else{
$category.show();
$('.more a span')
.text("顯示部分分類(lèi)");
$('ul li').filter(":contains('前端'),:contains('css'),:contains('jQuery'),:contains('CMS')")
.addClass("feature");
}
return false;
});
});
上面的判斷語(yǔ)句，用法與一般的高級(jí)編程語(yǔ)言相近，但放在jQuery這個(gè)以輕便聞名的js庫(kù)中不免顯得繁瑣，其實(shí)在jQuery中有更為輕便的方法去實(shí)現(xiàn)上面的例子，即toggle()方法，代碼如下：
$(document).ready(function(){
var $category = $('ul li:gt(4):not(:last)');
$category.hide();
var $toggleBtn = $('.more a');
$toggleBtn.toggle(function(){
$category.show();
$('.more a span')
.text("顯示部分分類(lèi)");
$('ul li').filter(":contains('前端'),:contains('css'),:contains('jQuery'),:contains('CMS')")
.addClass("feature");
},function(){
$category.hide();
$('.more a span')
.text("顯示全部分類(lèi)");
$('ul li').removeClass("feature");
});
});