jQuery中的基本選擇器用法學(xué)習(xí)教程

更新時間：2016年04月14日 18:02:39 作者：初心始終鈺

這篇文章主要介紹了jQuery中的基本選擇器用法,文中分簡單、進(jìn)階、高階三個部分來講解,十分詳細(xì),需要的朋友可以參考下

一．簡單選擇器
在使用jQuery 選擇器時，必須使用“$()”函數(shù)來包裝CSS 規(guī)則。而CSS 規(guī)則作為參數(shù)傳遞到j(luò)Query 對象內(nèi)部后，再返回包含頁面中對應(yīng)元素的jQuery 對象。隨后，就可以對這個獲取到的DOM 節(jié)點(diǎn)進(jìn)行行為操作了。

#box {//使用ID 選擇器的CSS 規(guī)則 
 
 color:red;//將ID 為box 的元素字體顏色變紅 
 
}

在jQuery 選擇器里，我們使用如下的方式獲取同樣的結(jié)果：

$('#box').css('color', 'red');//獲取DOM 節(jié)點(diǎn)對象，并添加行為

那么除了ID 選擇器之外，還有兩種基本的選擇器，分別為：元素標(biāo)簽名和類(class)：

選擇器	CSS 模式	jQuery 模式	描述
元素名	div {}	$('div')	獲取所有div 元素的DOM 對象
ID	#box {}	$('#box')	獲取一個ID 為box 元素的DOM 對象
類(class)	.box{}	$('.box')	獲取所有class 為box 的所有DOM 對象

$('#box').css('color', 'red');//獲取DOM 節(jié)點(diǎn)對象，并添加行為 
 
$('div').css('color', 'red');//元素選擇器，返回多個元素 
 
$('#box').css('color', 'red'); //ID 選擇器，返回單個元素 
 
$('.box').css('color', 'red'); //類(class)選擇器，返回多個元素

為了證明ID 返回的是單個元素，而元素標(biāo)簽名和類(class)返回的是多個，可以采用jQuery 核心自帶的一個屬性length 或size()方法來查看返回的元素個數(shù)。

alert($('div').size());//3 個 
 
alert($('#box').size()); //1 個，后面兩個失明了 
 
alert($('.box').size());//3 個

同理，也可以直接使用jQuery 核心屬性來操作：

alert($('#box').length);//1 個，后面失明了

警告：有個問題特別要注意，ID 在頁面只允許出現(xiàn)一次，一般都是要求開發(fā)者要遵守和保持這個規(guī)則。但如果你在頁面中出現(xiàn)三次，并且在CSS 使用樣式，那么這三個元素還會執(zhí)行效果。但如果，你想在jQuery 這么去做，那么就會遇到失明的問題。所以，開發(fā)者必須養(yǎng)成良好的遵守習(xí)慣，在一個頁面僅使用一個ID。

$('#box').css('color', 'red');//只有第一個ID 變紅，后面兩個失明

jQuery 選擇器的寫法與CSS 選擇器十分類似，只不過功能不同。CSS 找到元素后添加的是單一的樣式，而jQuery 則添加的是動作行為。最重要的一點(diǎn)是：CSS 在添加樣式的時候，高級選擇器會對部分瀏覽器不兼容，而jQuery 選擇器在添加CSS 樣式的時候卻不必為此煩惱。

#box > p { //CSS 子選擇器，IE6 不支持 
 
 color:red; 
 
} 
 
$('#box > p').css('color','red'); //jQuery 子選擇器，兼容了IE6

jQuery 選擇器支持CSS1、CSS2 的全部規(guī)則，支持CSS3 部分實(shí)用的規(guī)則，同時它還有少量獨(dú)有的規(guī)則。所以，對于已經(jīng)掌握CSS 的開發(fā)人員，學(xué)習(xí)jQuery 選擇器幾乎是零成本。而jQuery 選擇器在獲取節(jié)點(diǎn)對象的時候不但簡單，還內(nèi)置了容錯功能，這樣避免像JavaScript那樣每次對節(jié)點(diǎn)的獲取需要進(jìn)行有效判斷。

$('#pox').css('color', 'red');//不存在ID 為pox 的元素，也不報錯 
 
document.getElementById('pox').style.color = 'red';//報錯了

因?yàn)閖Query 內(nèi)部進(jìn)行了判斷，而原生的DOM 節(jié)點(diǎn)獲取方法并沒有進(jìn)行判斷，所以導(dǎo)致了一個錯誤，原生方法可以這么判斷解決這個問題：

if (document.getElementById('pox')) {//先判斷是否存在這個對象 
 
 document.getElementById('pox').style.color = 'red'; 
 
}

那么對于缺失不存在的元素，使用jQuery 調(diào)用的話，怎么去判斷是否存在呢？因?yàn)楸旧矸祷氐氖莏Query 對象，可能會導(dǎo)致不存在元素存在與否，都會返回true。

if ($('#pox').length > 0) {//判斷元素包含數(shù)量即可 
 
 $('#pox').css('color', 'red'); 
 
}

除了這種方式之外，還可以用轉(zhuǎn)換為DOM 對象的方式來判斷，例如：

if ($('#pox').get(0)) {} 或if ($('#pox')[0]) {} //通過數(shù)組下標(biāo)也可以獲取DOM 對象

二．進(jìn)階選擇器
在簡單選擇器中，了解了最基本的三種選擇器：元素標(biāo)簽名、ID 和類(class)。那么在基礎(chǔ)選擇器外，還有一些進(jìn)階和高級的選擇器方便我們更精準(zhǔn)的選擇元素。

選擇器	CSS 模式	jQuery 模式	描述
群組選擇器	span,em,.box {}	$('span,em,.box')	獲取多個選擇器的DOM 對象
后代選擇器	ul li a {}	$('ul li a')	獲取追溯到的多個DOM 對象
通配選擇器	* {}	$('*')	獲取所有元素標(biāo)簽的DOM 對象

//群組選擇器 
span, em, .box {//多種選擇器添加紅色字體 
 
 color:red; 
 
} 
 
$('span, em, .box').css('color', 'red');//群組選擇器jQuery 方式 
 
//后代選擇器 
ul li a { //層層追溯到的元素添加紅色字體 
 
 color:red; 
 
} 
 
$('ul li a').css('color', 'red');//群組選擇器jQuery 方式 
 
//通配選擇器 
* { //頁面所有元素都添加紅色字體 
 
color:red; 
 
} 
 
$('*').css('color', 'red'); //通配選擇器

目前介紹的六種選擇器，在實(shí)際應(yīng)用中，可以靈活的搭配，使得選擇器更加的精準(zhǔn)和快速：

$('#box p, ul li *').css('color', 'red');//組合了多種選擇器

警告：在實(shí)際使用上，通配選擇器一般用的并不多，尤其是在大通配上，比如：$('*')，這種使用方法效率很低，影響性能，建議竟可能少用。還有一種選擇器，可以在ID 和類(class)中指明元素前綴，比如：

$('div.box');//限定必須是.box 元素獲取必須是div 
 
$('p#box div.side');//同上

類(class)有一個特殊的模式，就是同一個DOM 節(jié)點(diǎn)可以聲明多個類(class)。那么對于這種格式，我們有多class 選擇器可以使用，但要注意和class 群組選擇器的區(qū)別。

.box.pox {//雙class 選擇器，IE6 出現(xiàn)異常 
 
 color:red; 
 
} 
 
$('.box.pox').css('color', 'red');//兼容IE6，解決了異常

多class 選擇器是必須一個DOM 節(jié)點(diǎn)同時有多個class，用這多個class 進(jìn)行精確限定。而群組class 選擇器，只不過是多個class 進(jìn)行選擇而已。

$('.box, .pox').css('color', 'red');//加了逗號，體會區(qū)別

警告：在構(gòu)造選擇器時，有一個通用的優(yōu)化原則：只追求必要的確定性。當(dāng)選擇器篩選越復(fù)雜，jQuery 內(nèi)部的選擇器引擎處理字符串的時間就越長。比如：

$('div#box ul li a#link');//讓jQuery 內(nèi)部處理了不必要的字符串 
 
$('#link'); //ID 是唯一性的，準(zhǔn)確度不變，性能提升

三．高級選擇器
在前面六種最常規(guī)的選擇器，一般來說通過這六種選擇器基本上可以解決所有DOM 節(jié)點(diǎn)對象選擇的問題。但在很多特殊的元素上，比如父子關(guān)系的元素，兄弟關(guān)系的元素，特殊屬性的元素等等。在早期CSS 的使用上，由于IE6 等低版本瀏覽器不支持，所以這些高級選擇器的使用也不具備普遍性，但隨著jQuery 兼容，這些選擇器的使用頻率也越
來越高。

層次選擇器
選擇器	CSS 模式	jQuery 模式	描述
后代選擇器	ul li a {}	$('ul li a')	獲取追溯到的多個DOM 對象
子選擇器	div > p {}	$('div p')	只獲取子類節(jié)點(diǎn)的多個DOM 對象
next 選擇器	div + p {}	$('div + p')	只獲取某節(jié)點(diǎn)后一個同級DOM 對象
nextAll 選擇器	div ~ p {}	$('div ~ p')	獲取某節(jié)點(diǎn)后面所有同級DOM 對象

在層次選擇器中，除了后代選擇器之外，其他三種高級選擇器是不支持IE6 的，而jQuery卻是兼容IE6 的。

//后代選擇器
$('#box p').css('color', 'red');//全兼容

jQuery 為后代選擇器提供了一個等價find()方法

$('#box').find('p').css('color', 'red');//和后代選擇器等價 

//子選擇器，孫子后失明

#box > p { //IE6 不支持 
 
 color:red; 
 
} 
 
$('#box > p').css('color', 'red'); //兼容IE6

jQuery 為子選擇器提供了一個等價children()方法：

$('#box').children('p').css('color', 'red');//和子選擇器等價 

//next 選擇器(下一個同級節(jié)點(diǎn)) 
#box + p {//IE6 不支持 
 
 color:red; 
 
} 
 
$('#box+p').css('color', 'red');//兼容IE6

jQuery 為next 選擇器提供了一個等價的方法next()：

$('#box').next('p').css('color', 'red');//和next 選擇器等價 

//nextAll 選擇器(后面所有同級節(jié)點(diǎn))

#box ~ p { //IE6 不支持 
 
color:red; 
 
} 
 
$('#box ~ p').css('color', 'red');//兼容IE6

jQuery 為nextAll 選擇器提供了一個等價的方法nextAll()：

$('#box').nextAll('p').css('color', 'red');//和nextAll 選擇器等價

層次選擇器對節(jié)點(diǎn)的層次都是有要求的，比如子選擇器，只有子節(jié)點(diǎn)才可以被選擇到，孫子節(jié)點(diǎn)和重孫子節(jié)點(diǎn)都無法選擇到。next 和nextAll 選擇器，必須是同一個層次的后一個和后N 個，不在同一個層次就無法選取到了。在find()、next()、nextAll()和children()這四個方法中，如果不傳遞參數(shù)，就相當(dāng)于傳遞了“*”，即任何節(jié)點(diǎn)，不建議這么做，不但影響性能，而且由于精準(zhǔn)度不佳可能在復(fù)雜的HTML 結(jié)構(gòu)時產(chǎn)生怪異的結(jié)果。

$('#box').next();//相當(dāng)于$('#box').next('*');

為了補(bǔ)充高級選擇器的這三種模式，jQuery 還提供了更加豐富的方法來選擇元素：

$('#box').prev('p').css('color', 'red');//同級上一個元素 
 
$('#box').prevAll('p').css('color', 'red');//同級所有上面的元素

nextUntil()和prevUnitl()方法是選定同級的下面或上面的所有節(jié)點(diǎn)，選定非指定的所有元素，一旦遇到指定的元素就停止選定。

$('#box').prevUntil('p').css('color', 'red');//同級上非指定元素選定，遇到則停止 
 
$('#box').nextUntil('p').css('color', 'red');//同級下非指定元素選定，遇到則停止

siblings()方法正好集成了prevAll()和nextAll()兩個功能的效果，及上下相鄰的所有元素進(jìn)行選定：

$('#box').siblings('p').css('color', 'red');//同級上下所有元素選定 
 
//等價于下面： 
 
$('#box').prevAll('p').css('color', 'red');//同級上所有元素選定 
 
$('#box').nextAll('p').css('color', 'red'); //同級下所有元素選定

警告：切不可寫成“$('#box').prevAll('p').nextAll('p').css('color', 'red');”這種形式，因?yàn)閜revAll('p')返回的是已經(jīng)上方所有指定元素，然后再nextAll('p')選定下方所有指定元素，這樣必然出現(xiàn)錯誤。理論上來講，jQuery 提供的方法find()、next()、nextAll()和children()運(yùn)行速度要快于使用高級選擇器。因?yàn)樗麄儗?shí)現(xiàn)的算法有所不同，高級選擇器是通過解析字符串來獲取節(jié)點(diǎn)對象，而jQuery 提供的方法一般都是單個選擇器，是可以直接獲取的。但這種快慢的差異，對于客戶端腳本來說沒有太大的實(shí)用性，并且速度的差異還要取決了瀏覽器和選擇的元素內(nèi)容。比如，在IE6/7 不支持querySelectorAll()方法，則會使用“Sizzle”引擎，速度就會慢，而其他瀏覽器則會很快。有興趣的可以了解這個方法和這個引擎。選擇器快慢分析：

//這條最快，會使用原生的getElementById、ByName、ByTagName 和querySelectorAll()

$('#box').find('p'); 

//jQuery 會自動把這條語句轉(zhuǎn)成$('#box').find('p')，這會導(dǎo)致一定的性能損失。它比最快的形式慢了5%-10%

$('p', '#box'); 

//這條語句在jQuery 內(nèi)部，會使用$.sibling()和javascript 的nextSibling()方法，一個個遍歷節(jié)點(diǎn)。它比最快的形式大約慢50%

$('#box').children('p'); 

//jQuery 內(nèi)部使用Sizzle 引擎，處理各種選擇器。Sizzle 引擎的選擇順序是從右到左，所以這條語句是先選p，然后再一個個過濾出父元素#box，這導(dǎo)致它比最快的形式大約慢70%

$('#box > p'); 

//這條語句與上一條是同樣的情況。但是，上一條只選擇直接的子元素，這一條可以于選擇多級子元素，所以它的速度更慢，大概比最快的形式慢了77%。

$('#box p'); 

//jQuery 內(nèi)部會將這條語句轉(zhuǎn)成$('#box').find('p')，比最快的形式慢了23%。

$('p', $('#parent'));

綜上所屬，最快的是find()方法，最慢的是$('#box p')這種高級選擇器。如果一開始將$('#box')進(jìn)行賦值，那么jQuery 就對其變量進(jìn)行緩存，那么速度會進(jìn)一步提高。

var box = $('#box'); 
 
var p = box.find('p');

注意：使用哪種方案呢？其實(shí)，使用哪種都差不多。這里，推薦使用jQuery 提供的方法。因?yàn)椴坏椒ǖ乃俣缺雀呒夁x擇器運(yùn)行的更快，并且它的靈活性和擴(kuò)展性要高于高級選擇器。使用“+”或“~”從字面上沒有next 和nextAll 更加語義化，更加清晰，jQuery 的方法更加豐富，提供了相對的prev 和prevAll。畢竟jQuery 是編程語言，需要
能夠靈活的拆分和組合選擇器，而使用CSS 模式過于死板。所以，如果jQuery 提供了獨(dú)立的方法來代替某些選擇器的功能，推薦優(yōu)先使用獨(dú)立的方法。

屬性選擇器
CSS 模式	jQuery 模式	描述
a[title]	$('a[title]')	獲取具有這個屬性的DOM 對象
a[title=num1]	$('a[title=num1]')	獲取具有這個屬性=這個屬性值的DOM 對象
a[title^=num]	$('a[title^=num]')	獲取具有這個屬性且開頭屬性值匹配的 DOM 對象
a[title\|=num]	$('a[title\|=num]')	獲取具有這個屬性且等于屬性值或開頭屬性值匹配后面跟一個“-”號的DOM 對象
a[title$=num]	$('a[title$=num]')	獲取具有這個屬性且結(jié)尾屬性值匹配的 DOM 對象
a[title!=num]	$('a[title!=num]')	獲取具有這個屬性且不等于屬性值的 DOM 對象
a[title~=num]	$('a[title~=num]')	獲取具有這個屬性且屬性值是以一個空格分割的列表，其中包含屬性值的DOM 對象
a[title*=num]	$('a[title*=num]')	獲取具有這個屬性且屬性值含有一個指定字串的DOM 對象
a[bbb][title=num1]	$('a[bbb][title=num1]')	獲取具有這個屬性且屬性值匹配的DOM 對象

屬性選擇器也不支持IE6，所以在CSS 界如果要兼容低版本，那么也是非主流。但jQuery卻不必考慮這個問題。

//選定這個屬性的 
a[title] { //IE6 不支持 
 
 color:red; 
 
} 
 
$('a[title]').css('color', 'red');//兼容IE6 了 

//選定具有這個屬性=這個屬性值的

a[title=num1] {//IE6 不支持 
 
 color:red; 
 
} 
 
$('a[title=num1]').css('color', 'red');//兼容IE6 了 

//選定具有這個屬性且開頭屬性值匹配的

a[title^=num] { //IE6 不支持 
 
 color:red; 
 
} 
 
$('a[title=^num]').css('color', 'red'); //兼容IE6 了 

//選定具有這個屬性且等于屬性值或開頭屬性值匹配后面跟一個“-”號

a[title|=num] {//IE6 不支持 
 
 color:red; 
 
} 
 
$('a[title|="num"]').css('color', 'red');//兼容IE6 了 

//選定具有這個屬性且結(jié)尾屬性值匹配的

a[title$=num] {//IE6 不支持 
 
 color:red; 
 
} 
 
$('a[title$=num]').css('color','red'); //兼容IE6 了 

//選定具有這個屬性且屬性值不想等的

a[title!=num1] {//不支持此CSS 選擇器 
 
 color:red; 
 
} 
 
$('a[title!=num1]').css('color','red');//jQuery 支持這種寫法 

//選定具有這個屬性且屬性值是以一個空格分割的列表，其中包含屬性值的

a[title~=num] {//IE6 不支持 
 
 color:red; 
 
} 
 
$('a[title~=num1]').css('color','red'); //兼容IE6 

//選定具有這個屬性且屬性值含有一個指定字串的

a[title*=num] {//IE6 不支持 
 
 color:red; 
 
} 
 
$('a[title*=num]').css('color','red');//兼容IE6 

//選定具有多個屬性且屬性值匹配成功的

a[bbb][title=num1] {//IE6 不支持 
 
 color:red; 
 
} 
 
$('a[bbb][title=num1]').css('color','red');//兼容IE6

您可能感興趣的文章: