jquery選擇器初探

jQuery CSS HTML 技術 碼農傳奇 2017-03-30

jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。

jQuery 選擇器基於元素的 id、類、類型、屬性、屬性值等"查找"(或選擇)HTML 元素。 它基於已經存在的CSS 選擇器,除此之外,它還有一些自定義的選擇器。

jQuery 中所有選擇器都以美元符號開頭:$()。

jquery選擇器初探

jquery選擇器初探

jquery選擇器初探

jquery選擇器初探

jquery選擇器初探


基本選擇器

基本選擇器是jquery中最常用的選擇器,也是最簡單的選擇器,它通過元素id、class和標籤名等來查找DOM元素。在網頁中,每個id名稱只能使用一次,class允許重複使用。

  • 元素選擇器

jQuery 元素選擇器基於元素名選取元素。

$("p")

在頁面中選取所有 <p> 元素

  • id 選擇器

jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。

頁面中元素的 id 應該是唯一的,所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。

通過 id 選取元素語法如下:

$("#test")

  • class 選擇器

jQuery 類選擇器可以通過指定的 class 查找元素。

語法如下:

$(".test")

jquery選擇器初探

層次選擇器

如果想通過DOM元素之間的層次關係來獲取特定元素,例如後代元素、子元素、相鄰元素和同輩元素等,那麼層次選擇器是一個非常好的選擇。

jquery選擇器初探

jquery選擇器初探

過濾選擇器

過濾選擇器主要是通過特定的過濾規則來篩選出所需的DOM元素,過濾規則與CSS中的偽類選擇器語法相同,即選擇器都以一個冒號(:)開頭。按照不同的過濾規則,過濾選擇器可以分為基本過濾、內容過濾、可見性過濾、屬性過濾、子元素過濾和表單對象屬性過濾選擇器。

  • 基本過濾選擇器

jquery選擇器初探

jquery選擇器初探

  • 內容過濾選擇器

    內容過濾選擇器的過濾規則主要體現在它所包含的子元素或文本內容上。

jquery選擇器初探

  • 可見性過濾選擇器

    可見性過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素。

jquery選擇器初探

  • 屬性過濾選擇器

    屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素。

jquery選擇器初探

  • 子元素過濾選擇器

    子元素過濾選擇器的過濾規則相對於其他的選擇器稍微有些複雜,不過只要將元素的父元素和子元素區分清楚就很簡單了。

jquery選擇器初探

jquery選擇器初探

  • 表單對象屬性過濾選擇器

    表單對象屬性過濾選擇器主要是對所選擇的表單元素進行過濾,例如選擇被選中的下拉框,多選框等元素。

jquery選擇器初探

表單選擇器

為了使用戶能夠更加靈活地操作表單,jquery中專門加入了表單選擇器。利用這個選擇器,能極其方便地獲取到表單的某個或某類型的元素。

jquery選擇器初探


jquery選擇器參考手冊

jquery選擇器初探

以上即為jquery選擇器的基本內容,值得一提的是jquery選擇器是在css選擇器的基礎上發展而來,二者有許多選擇器是一致的。關於css選擇器的相關內容,詳見《css選擇器初探》。關於jquery的相關知識,詳見《jquery初探》

相關推薦

推薦中...