jQuery的選擇器非常強(qiáng)大,使你可以輕松選取頁面中任何一個(gè)對(duì)象,下面我們就主要針對(duì)DOM操作來看一下jQuery中選擇器的基礎(chǔ)使用教程,需要的朋友可以參考下

其實(shí)選擇器就像開罐器一樣，會(huì)用這個(gè)工具的人，自然吃的到甜頭，但不會(huì)用這個(gè)工具的人，不管罐頭里面的面筋土豆有多美味，吃不到就是吃不到，就如同jquery再怎么強(qiáng)大，也只能看著熒幕，而不知該如何下手，不過雖然選擇器不難，也容易上手，但老實(shí)說，我用了一年多下來，還是覺得自己只有用皮毛而已，所以希望藉著這一系列的筆記，讓自己能更長(zhǎng)進(jìn)一些

DOM怎么吃

DOM可以說是JavaScript與網(wǎng)頁之間的聯(lián)系管道，他提供了一個(gè)模型，讓JavaScript能藉由此模型來改變或操作整個(gè)網(wǎng)頁，

<div class="one">

  <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è)樹形圖，因?yàn)槲艺J(rèn)為有些東西是Google會(huì)講得比我好，所以還想知道更多糾結(jié)的父子關(guān)系...，可以去這，那邊有很好的說明，這邊就不多加解釋，而當(dāng)Jquery利用選擇器抓取到DOM元素以后，就會(huì)將他包裝成一個(gè)Jquery object，并且回傳

$('#MyDiv')<-- 他是一個(gè)物件

這里有個(gè)觀念十分重要，因?yàn)樵S多初學(xué)者，甚至是一些從Jquery開始學(xué)起Javascript的開發(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í)行這段程序碼出來，妳會(huì)發(fā)現(xiàn)console出來的結(jié)果，用JavaScript取出來的結(jié)果是DOM，可是一樣的div用Jquery取出來的卻是個(gè)包裝過后的物件，換句話說，你不能直接對(duì)包裝過后的Jquery物件增加DOM的事件，而是要用Jquery提供的事件，有人會(huì)說，那意思是不是說以后只能河水不犯井水，往后互不干涉，從此分道揚(yáng)鑣呢? 到也不是

var b=$('#a')[0];

只要跟上述程序碼一樣就可以取得DOM的元素了

$()工廠

不管是如何選擇，我們都會(huì)用相同的函式$()，就如之前所講的，他能接受CSS選擇器的語法做為參數(shù)，而最主要的三個(gè)參數(shù)分別為tag name、ID與class，當(dāng)然，這三個(gè)參數(shù)可以再與其他CSS語法做結(jié)合

//tag name

$('div')

//ID

$('#myId')

//class

$('.myClass')

而上述函式都會(huì)如同第一章所介紹的，都有隱式迭代的特色，而為了做到跨覽器的支援，Jquery的選擇器包含了CSS1-3，所以不用擔(dān)心一些比較特別的瀏覽器(對(duì)就是IE6)不能執(zhí)行，除非瀏覽器沒有開啟JavaScript

接著接下來我簡(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)的選擇器，但一般來說原生(native)的方式會(huì)來的效能比較快，如果有注重這塊的朋友，可能要盡量避免使用客制化的選擇器例如以下范例

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ù)，但卻是不同列

再來就一些FORM常用的選擇器 http://jsfiddle.net/qcXSy/3/

$(':button').click(function(){

    alert('a');

});

這就代表說綁定所有的bitton一個(gè)click事件，其他還有像:input、:button、:enabled、:disabled都可以跟其他選擇器一起組合成新的選擇器

更加強(qiáng)大的.filter()

當(dāng)有時(shí)候一般的選擇器已經(jīng)不能不能滿足我們復(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í)候好像只是展示不同的寫法，但其實(shí)只要能抓取到你想要的元素，解決問題

你甚至想要這樣寫$('div').children().children().children().children().children()也不會(huì)有人說不行..

實(shí)例

一個(gè)網(wǎng)站中有10種的文章分類，我們?cè)O(shè)計(jì)一個(gè)類似WordPress顯示各文章分類的名稱及其文章數(shù)量的欄目，當(dāng)用戶進(jìn)入一個(gè)頁面時(shí)，默認(rèn)顯示前面5個(gè)分類的名稱以及最后一個(gè)分類——其他分類，用戶可以通過單擊“顯示全部分類”按鈕來顯示全部分類，同時(shí)一些推薦的分類會(huì)加下劃線顯示，按鈕中的文字會(huì)改變?yōu)椤帮@示部分分類”，再次單擊“顯示部分分類”后會(huì)回到之前的頁面狀態(tài)。

首先為了實(shí)現(xiàn)這個(gè)功能，我們需要寫出相應(yīng)的 html

<div class="CategoryBox">

  <h2>分類列表</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="#">其他分類(3)</a></li>  

  </ul>

  <div class="more">

    <a href="more.html"><span>顯示全部分類</span></a>

  </div>

</div>

在Html寫后好再添加一些簡(jiǎn)單的css，然后就可以開始jQuery的編寫。

下面的代碼將實(shí)現(xiàn)頁面加載完畢后選取相應(yīng)的對(duì)象并隱藏，這里選取的是第6個(gè)分類到第9個(gè)分類4個(gè)對(duì)象，因?yàn)樾枰刂齐[藏和顯示的便是這四個(gè)分類。

var $category = $('ul li:gt(4):not(:last)');

$category.hide();

$('ul li:gt(4):not(:last)')的意思便是獲取索引值大于4的li元素并且去掉最后一個(gè)，需要注意的是索引值是從0開始，所以這樣便可以獲取第6到第9個(gè)分類。

下面將會(huì)獲取“顯示全部分類”按鈕，并且給該按鈕添加一個(gè)事件，單擊該按鈕后顯示所有分類

var $toggleBtn = $('.more a');

$toggleBtn.click(function() {

  $category.show();

  return false;

});

.show()是用于顯示元素的動(dòng)畫，另外由于給超鏈接添加onclick事件，因此需要添加return false語句阻止該超鏈接跳轉(zhuǎn)。

寫到這里，我們不難發(fā)現(xiàn)，jQuery的選擇器跟css選擇器有相近之處，其原理都是先以選擇器選擇對(duì)象，再添加操作，不過jQuery的選擇器明顯比css的豐富和簡(jiǎn)便得多，這也是使用jQuery能大大提高網(wǎng)站開發(fā)效率的重要原因。

接著上面的例子，根據(jù)文章開頭設(shè)定的條件，在單擊“顯示全部分類”的按鈕后，部分推薦的分類會(huì)添加下劃線，同時(shí)按鈕中的文字會(huì)變成“顯示部分分類”，因此我們還需要在.show()和return false之間添加以下代碼：

$('.more a span').text("顯示部分分類");

$('ul li').filter(":contains('前端'),:contains('css'),:contains('jQuery'),:contains('CMS')").addClass("feature");

.text()用于改變對(duì)象中的文字，filter()可以用于選出推薦對(duì)象，這里推薦的是前端，CSS，jQuery，CMS，然后使用addClass()為它們添加“feature”類，因?yàn)槲乙杨A(yù)先寫feature類的css，所以以上推薦對(duì)象在單擊按鈕后便會(huì)加上下劃線。至此，可以說基本完成了這次需要的jQuery，當(dāng)然用戶單擊“顯示部分分類”后的效果還沒有寫上相應(yīng)的jQuery。但有了前面的一段jQurey代碼，相信寫出單擊“顯示部分分類”后的代碼應(yīng)該不難。

在單擊“顯示部分分類”后的效果中其中一個(gè)是需要去掉推薦分類的下劃線效果，我們可以使用removeClass()，用法與addClass相同。

現(xiàn)在余下的問題是如何把兩段代碼寫在一起，由于用戶在兩個(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("顯示全部分類");

        $('ul li').removeClass("feature");

      }else{

        $category.show();

        $('.more a span')

          .text("顯示部分分類");

        $('ul li').filter(":contains('前端'),:contains('css'),:contains('jQuery'),:contains('CMS')")

          .addClass("feature");

      }

      return false;

    });

});

上面的判斷語句，用法與一般的高級(jí)編程語言相近，但放在jQuery這個(gè)以輕便聞名的js庫中不免顯得繁瑣，其實(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("顯示部分分類");

      $('ul li').filter(":contains('前端'),:contains('css'),:contains('jQuery'),:contains('CMS')")

        .addClass("feature");

    },function(){

      $category.hide();

      $('.more a span')

        .text("顯示全部分類");

      $('ul li').removeClass("feature");

    });

});