jQuery怎樣使用選擇器獲取元素？常用的選擇器列舉

jQuery中的選擇器非常多，對(duì)于初學(xué)者來(lái)說(shuō)，并沒(méi)有必要全部掌握，只記住常用的選擇器即可。首先是jQuery的基本選擇器，它和CSS選擇器非常類似，常用的基本選擇器如表1所示。

　表1 基本選擇器

　　為了使讀者更好地理解，下面通過(guò)代碼進(jìn)行演示。

 1  <div class="nav">我是nav div</div>

 2  <script>

 3   console.log($(".nav"));

 4  </script>

　　上述代碼執(zhí)行后，即可看到獲取結(jié)果，如圖1所示。

圖1 使用選擇器獲取元素

從圖1可以看出，索引為0的元素就是頁(yè)面中的DOM對(duì)象，length屬性表示匹配到符合條件的DOM對(duì)象個(gè)數(shù)，若沒(méi)有匹配到合適的結(jié)果為0。其中，類選擇器、標(biāo)簽選擇器等可以獲取多個(gè)元素，id選擇器只能獲取1個(gè)元素。

當(dāng)需要使用其他不熟悉的選擇器時(shí)，可以通過(guò)查閱文檔查看具體的解釋。下面是一些其他在開(kāi)發(fā)中可能會(huì)用到的選擇器。

　　2. 獲取同級(jí)元素

　　使用“+”或“~”可以獲取同級(jí)元素，如表2所示。

　　表2獲取同級(jí)元素

3. 篩選元素

　　在jQuery中還有一些選擇器可以篩選元素，如表3所示。

表3篩選元素

　4. 屬性選擇器

　　jQuery中還提供了根據(jù)元素的屬性獲取指定元素的方式。例如，含有class屬性值為current的

元素。常用的屬性選擇器如表4所示。

表4屬性選擇器

　5. 子元素選擇器

　　利用子元素選擇器可以對(duì)子元素進(jìn)行篩選，常用的如表5所示。

表5子元素選擇器

　6. 表單選擇器

　　jQuery還提供了針對(duì)表單元素的選擇器，用來(lái)方便表單開(kāi)發(fā)，如表6所示。

　　表6 表單選擇器

      需要注意的是，$("input")與$(":input")雖然都可以獲取表單項(xiàng)，但是它們表達(dá)的含義有一定的區(qū)別，前者僅能獲取表單標(biāo)簽是<input>的控件，后者則可以同時(shí)獲取頁(yè)面中所有的表單控件，包括表單標(biāo)簽是<select>以及<textarea>的控件。