tube8在线hd,brazzers在线观看,国产污视频在线播放

jQuery中選擇器的基礎使用教程

來源：易賢網閱讀：980 次日期：2016-06-25 11:38:37

溫馨提示：易賢網小編為您整理了“jQuery中選擇器的基礎使用教程”,方便廣大網友查閱！

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

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

DOM怎么吃

DOM可以說是JavaScript與網頁之間的聯系管道，他提供了一個模型，讓JavaScript能藉由此模型來改變或操作整個網頁，

</div>

我這邊就簡單介紹一下DOM模型，有個元素class名為one的是父元素，底下有三個兒子元素<p>，每個元素都視為一個節點，也可以看成一個樹形圖，因為我認為有些東西是Google會講得比我好，所以還想知道更多糾結的父子關系...，可以去這，那邊有很好的說明，這邊就不多加解釋，而當Jquery利用選擇器抓取到DOM元素以后，就會將他包裝成一個Jquery object，并且回傳

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

這里有個觀念十分重要，因為許多初學者，甚至是一些從Jquery開始學起Javascript的開發者(包括我)，常常會把以下兩個程序碼搞混在一起

//原生JavaScript取id為a的div

var result1 = document.getElementById('a');

console.log(result1);

//用jquery取id為a的div

var result2=$('#a');

console.log(result2);

如果你執行這段程序碼出來，妳會發現console出來的結果，用JavaScript取出來的結果是DOM，可是一樣的div用Jquery取出來的卻是個包裝過后的物件，換句話說，你不能直接對包裝過后的Jquery物件增加DOM的事件，而是要用Jquery提供的事件，有人會說，那意思是不是說以后只能河水不犯井水，往后互不干涉，從此分道揚鑣呢? 到也不是

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

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

$()工廠

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

//tag name

$('div')

//ID

$('#myId')

//class

$('.myClass')

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

接著接下來我簡單介紹幾個用法

http://jsfiddle.net/XZnQ7/

//將不含color1 class的p增加一個color2 class

$('p:not(.color1)').addClass('color2');

http://jsfiddle.net/bpJct/3/

//這里是用正規表示法

$('a[href^="mailto:"]').addClass('font1');

$('a[href^="http"]').addClass('font2');

$('a[href$=".pdf"]').addClass('font3');

當然還提供了一些客制化(custom)的選擇器，但一般來說原生(native)的方式會來的效能比較快，如果有注重這塊的朋友，可能要盡量避免使用客制化的選擇器例如以下范例

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，卻是不同的結果呢?，因為:eq()算是一個JavaScript陣列，index是0起始，所以才會選到第二個，而nth-child()是CSS選擇器的一種，所以index是以1起始，選到的就是第一個，以下的范例意思相同

http://jsfiddle.net/3PrJt/

//選擇偶數的tr增加class

$('tr:even').addClass('color1');

//選擇偶數的tr增加class

$('tr:nth-child(even)').addClass('color2');

就如同剛剛所講的，index起始不同(JavaScript起始為0，CSS為1)，所以雖然都是取偶數，但卻是不同列

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

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

alert('a');

});

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

更加強大的.filter()

當有時候一般的選擇器已經不能不能滿足我們復雜的DOM時，例如要抓div的爸爸的哥哥的兒子的妹婿的二姑的大舅時...，這時候還可以用一個方法filter，這個方法特別的地方在于他可以帶function進去 http://jsfiddle.net/wGz3k/

可以看到function里面限制return index == 1才可以增加CSS，這個好處就在于可以在里面做很多復雜的邏輯運算

當然Jquery還有太多太多選擇器可以使用，像還有.next()、.parent()、.children()一般常用的這幾個，其實就很夠用了我認為，再多的選擇器有時候好像只是展示不同的寫法，但其實只要能抓取到你想要的元素，解決問題

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

實例

一個網站中有10種的文章分類，我們設計一個類似WordPress顯示各文章分類的名稱及其文章數量的欄目，當用戶進入一個頁面時，默認顯示前面5個分類的名稱以及最后一個分類——其他分類，用戶可以通過單擊“顯示全部分類”按鈕來顯示全部分類，同時一些推薦的分類會加下劃線顯示，按鈕中的文字會改變為“顯示部分分類”，再次單擊“顯示部分分類”后會回到之前的頁面狀態。

首先為了實現這個功能，我們需要寫出相應的 html

<ul>

<li><a href="#">jQuery(12)</a></li>

</ul>

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

</div>

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

下面的代碼將實現頁面加載完畢后選取相應的對象并隱藏，這里選取的是第6個分類到第9個分類4個對象，因為需要控制隱藏和顯示的便是這四個分類。

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

$category.hide();

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

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

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

$toggleBtn.click(function() {

$category.show();

return false;

});

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

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

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

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

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

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

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

現在余下的問題是如何把兩段代碼寫在一起，由于用戶在兩個事件上單擊的是同一個按鈕，因此事件仍然是在剛才的按鈕元素上，要使兩種狀態在一個元素上進行，我們可以使用判斷：

if(元素顯示狀態 ) {

//隱藏元素

}else{

//顯示元素

}

整個完整的jQuery代碼如下：

$(document).ready(function() {

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

$category.hide();

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