首頁技術(shù)文章正文

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

更新時(shí)間:2020-10-27 來源:黑馬程序員 瀏覽量:

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

1603792897555_圖.png

 表1 基本選擇器

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

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

 2  <script>

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

 4  </script>

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

1603792914565_圖二.jpg

圖1 使用選擇器獲取元素

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

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

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

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

  表2獲取同級(jí)元素
1603792935793_圖三.png

3. 篩選元素

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

表3篩選元素
1603792950907_圖四.png

 4. 屬性選擇器

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

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

表4屬性選擇器
1603792960168_圖五.png

 5. 子元素選擇器

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

表5子元素選擇器
1603792984823_圖片六.png

 6. 表單選擇器

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

  表6 表單選擇器
1603792994658_圖片七.png

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


分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!