jQuery - 選擇器與遍歷

發表於 更新於

選擇器（Selectors）

jQuery 的選擇器以 CSS 為規範，以最快速、便捷的方式選擇到元素，是 jQuery 的強項之一，並且自訂了許多屬於自己的偽類過濾器來擴展選擇，不過，這些偽類並不是 CSS 的規範，不能被 querySelectorAll 所獲取，因此在 3.4 不推薦使用，改由相對應的方法進行篩選。

基本選擇器（Basic）

CSS 基本選擇器：

選擇器 說明
$(‘*‘) 全體選擇器
$(‘element’) 元素選擇器
$(‘.class’) 類別選擇器
$(‘#id’) ID 選擇器
$(‘selector1,selector,selectorN’) 群組選擇器
$(‘parent > child’) 子代選擇器
$(‘ancestor descendant’) 後代選擇器
$(‘prev + next’) 兄弟或相鄰選擇器
$(‘prev ~ siblings’) 同層全體選擇器

屬性選擇器（Attribute）

與屬性有關的選擇器 說明
元素[name] 有 name 屬性的元素
元素[name = “value”] name 屬性值為 value 的元素
元素[name ~= “value”] 有多個 name 屬性，且其中一個的值為 value 的元素
元素[name ^= “value”] name 屬性值開頭為 value 的元素
元素[name = “value”] name 屬性值為 value 的元素，或屬性值開頭為 value 的元素
元素[name *= “value”] name 屬性值包含 value 的元素
元素[name $= “value”] name 屬性值結尾為 value 的元素
元素[name != “value”] name 屬性值不為 value 的元素
元素[name=”value”][name2=”value2”] 屬性值符合多項指定條件的元素

基本過濾器（Basic Filter）

基本過濾器是為了擴展 jQuery 選擇 DOM 而自訂義的偽類，大部分都已經在 3.4 不建議使用，改由相對應的篩選方法來代替，可以在篩選找到它們，以下為尚未替代或是其他方式替代的偽類。

:gt(index)

選擇大於 index 的 jQuery 元素物件集合（一個或多個）。index 為負數則從最後面開始選擇。

3.4 不推薦使用，可用 .slice() 代替，:gt(3) 等於 .slice(4)。

$('#menu li').slice(1).css('color', 'red') // 第二個開始之後全部選擇

:lt(index)

選擇小於 index 的 jQuery 元素物件集合（一個或多個）。index 為負數則從最後面開始選擇。

3.4 不推薦使用，可用 .slice() 代替，:lt(3) 等於 .slice(0,3)。

$('#menu li').slice(0, 3).css('color', 'red') // 選擇 1 ~ 3

:root

選擇到文件的 html 元素。

:focus

選擇目前聚焦的 jQuery 元素物件集合（一個或多個）。

:animated

選擇套用動畫效果功能的 jQuery 元素物件集合（一個或多個）。如果這物件集合沒有任何 jQuery 動畫效果，會出現錯誤。

3.4 不推薦使用

$('div:animated') // 3.4 不推薦使用
$('div').filter(':animated') // 建議使用 .filter() 來選擇

Child 過濾器

Child 過濾器指的是 CSS 的 child 或 type 這類的選擇器，它們符合 CSS 規範，可以使用沒問題。

選擇器 說明
:first-child 只能選擇父元素的第一個子元素，等同於 nth-child(1)
:last-child 只能選擇父元素的最後一個子元素
:nth-child(n) 選擇父元素之下的第 n 個子元素
:first-of-type 元素的同種類元素之中第 1 個子元素
:last-of-type 元素的同種類元素之中最後 1 個子元素
:nth-of-type(n) 元素的同種類元素之中第 n 個子元素
:nth-last-child(n) 元素之下倒數第 n 個子元素
:nth-last-of-type(n) 元素的同種類元素之中，倒數第 n 個子元素
:only-child 元素之下僅有 1 個的子元素
:only-of-type 元素的同種類元素之中，僅有 1 個的子元素

Content 過濾器

選擇器 說明
:contains(‘text’) 選取文字內容包含 text 字串的元素
:empty 選取無子元素沒有內容的元素，與:parent 相反
:parent 選取擁有子元素或文字內容的元素，與:empty 相反，:parent 不是 CSS 規範

:parent 與 .parent()不一樣，不能搞混。

Form 過濾器

選擇器 說明
:text type 屬性值為 text 的 input 元素 (單行文字)，使用[type=”input”]會有較佳的效能
:radio type 屬性值為 radio 的 input 元素 (單選核取方塊)
:checkbox type 屬性值為 checkbox 的 input 元素 (多選核取方塊)，使用$(‘[type=”checkbox”]’)會有較佳的效能
:password type 屬性值為 password 的 input 元素 (密碼輸入) ，使用$(‘input:password’)會有較佳效能
:file type 屬性值為 file 的 input 元素 (檔案選擇)
:image type 屬性值為 image 的 input 元素 (圖片按鈕) ，使用[type=”image”]會有較佳的效能
:submit type 屬性值為 submit 的 input 元素 (送出按鈕)，使用[type=”submit”]會有較佳的效能
:reset type 屬性值為 reset 的 input 元素 (清除重填按鈕)
:input input 元素、textarea 元素、select 元素、button 元素，使用.filter(“:input”)會有較佳效能
:hidden type 屬性值為 hidden 的 input 元素 (隱藏欄位)
:button 選取 button 與 inpput 元素的 type 屬性值為 button
:checked 已核選的元素 (單選核取方塊或多選核取方塊)
:disabled 無法輸入停用的元素
:enabled 可輸入已起用的元素
:focus 選取目前聚焦的元件。$(document.activeElement) 會有較佳的效能
:selected select 元素裡 option 元素中被選擇的項目，在.filter()中使用 CSS 樣式選擇器會有較佳的效能，.filter(“:selected”)

Visibility 過濾器

選擇器 說明
:hidden 隱藏的元素
:visible 顯示的元素

遍歷（Traversing）

jQuery 的優點，除了能快速抓取 DOM 元素，結合遍歷 DOM 去走訪 HTML 中的節點，讓 jQuery 在 DOM 控制上成為網站設計者的首選。一份文件的最外層的結界是 document，而不是 html，document 再往外找就沒有東西了，就如同離開了世界，進入渾沌一片虛無。

Filtering 過濾方法

過濾方法是用來替代 jQuery 自訂義的偽類，因此會在 jQuery 文件裡面被這些很相似的玩意兒干擾，這些自訂義的偽類不是 CSS 標準規範，因此無法被原生 JavaScript 的 querySelectorAll()方法獲取，因此在 jQuery 3.4 已經不推薦使用，如果要選擇到它們，必須使用 .filter()，例如：.filter(‘:eq’)來獲取 :eq 偽類。不過，既然有相對應的過濾方法，我們可以直接使用這些方法。

.eq()

選擇一個 jQuery 物件集合（一個或多個）時，可以使用 .eq(index) 選擇該對象的索引編號的元素，index 從 0 開始。index 是負數時為從最後面開始選擇。

  1. index 可為負值，-1 為選擇倒數第一個。
  2. 空字串 “”，可以選擇到第一個。
  3. true 會轉換為 eq(1)，選擇到第二個。
$('#menu li').eq(0) // jQuery 物件
$('#menu li')[0] // JavaScript 的原生 DOM
$('#menu li').get(0) // JavaScript 的原生 DOM

與偽類 :eq 相同功能，3.4 不推薦使用

.first()

選擇一個 jQuery 物件集合（一個或多個）時，可以使用 .first() 找到它們的第一個元素。

與偽類 :first 相同功能，3.4 不推薦使用

.first() 等同 .eq(0)

.last()

選擇一個 jQuery 物件集合（一個或多個）時，可以使用 .last() 找到它們的最後一個元素。

與偽類 :last 相同功能，3.4 不推薦使用

.last() 等同 .eq(-1)

.odd()

選擇一個 jQuery 物件集合（一個或多個）時，index 是奇數的元素。注意，index 是從 0 開始，會與視覺相反，在視覺上會顯示偶數。

與偽類 :odd 相同功能，3.4 不推薦使用

// 可用 filter 配合 :odd 偽類選擇
$('#menu li').filter(':odd').css('color', 'red')
// 或使用 .odd()
$('#menu li').odd().css('color', 'red')

.even()

選擇一個 jQuery 物件集合（一個或多個）時，index 是偶數的元素。注意，因為 index 是從 0 開始，會與視覺相反，在視覺上會顯示奇數。

與偽類 :even 相同功能，3.4 不推薦使用

// 可用 filter 配合 :even 偽類選擇
$('#menu li').filter(':even').css('color', 'red')
// 或使用 .odd()
$('#menu li').even().css('color', 'red')

.not(selector)

選擇一個 jQuery 物件集合（一個或多個）時，篩選選擇不符合 .not() 該 selector 條件的對象，selector 為符合 CSS 選擇器規範的字串。

:not(selector) 相同功能，雖然 CSS 選擇器也有 :not()，但仍推薦使用 .not(selector)

.filter(selector)

選擇一個 jQuery 物件集合（一個或多個）時，對該對象篩選出符合 filter 該條件的對象，selector 為符合 CSS 選擇器規範的字串。

  • 可使用函式：

使用該方法的第二個形式是，通過函數而不是選擇器來篩選元素。對於每個元素，如果該函數返回 true，則元素會被包含在已篩選集合中；否則，會排除這個元素。

$('li')
  .filter(function (index, element) {
    return $('strong', this).length == 1
  })
  .css('background-color', 'red')

.find(selector)

選擇一個 jQuery 物件集合（一個或多個）時，對該對象裡面搜尋指定對象的所有節點，包括子、孫、曾孫節點，selector 為符合 CSS 選擇器規範的字串，不能省略參數。
selector 可以一次找多個用逗號分開。

.has(selector)

選擇一個 jQuery 物件集合（一個或多個）後，在這個集合中擁有後代元素符合 selector 的元素的才是要被選取到的元素。

:has(selector) 相同功能，不推薦使用

$('#box').has('.active')

.is()

與其它方法不同，.is() 不會創建新的 jQuery 物件，.is() 取一個CSS 選擇器字串或 jQuery 物件作為它的引數，測試選擇的 jQuery 物件的內容，並且回傳一個 Boolean，若是所選元素至少有一個元素符合指定選擇，它就會回傳 true。

$(selector).is(selector or elements or jQuery Object)
$(selector).is(function(index,element){})

  • selector: 它是必需的參數，用於指定 CSS 選擇器，元素或 jQuery 物件以匹配當前的元素集。如果給定參數至少有一個匹配項，則返回 true；否則返回 false。
  • function(index, element): 它是一個可選參數，用於指定要為所選元素組運行的函數。
// 第一種方法
$('#menu').on('click', 'li', function () {
  $(this).css('backgroundColor', 'red')
})

// 第二種方法
$('#menu').on('click', function (e) {
  const target = $(e.target)
  if (target.is('li')) {
    target.css('backgroundColor', 'red')
  }
})

.slice()

  • .slice(start,end)
    選擇一個 jQuery 物件集合（一個或多個）時，選擇 start 至 end 之前的節點（不包含 end）。

  • .slice(index)
    選擇 index 開始之後的節點。

DOM 遍歷

兄弟（同層）

prevAll()、nextAll()、prevUntil()、nextUntil() 裡面可以放 CSS 選擇器參數再做一次篩選。

.next()

選擇與指定對象同層的後一個弟元素，如果有指定參數 CSS 選擇器，則只有在與這個 CSS 選擇器匹配且也為弟弟時，才會有效果。如同 JavaScript 的 .nextElementSibling。

$(selector).next([selector])

.nextAll

選擇與指定對象同層的後面所有弟元素，如果有指定參數 CSS 選擇器，則只有在與這個 CSS 選擇器匹配且也為弟弟時，才會有效果。

$(selector).nextAll([selector])

.nextUntil()

選擇與指定對象同層的後一個到 nextUntil(selector) 選擇器之間的弟元素，不包括指定對象本身。

.prev()

選擇與指定對象同層的前一個兄元素。如果有指定參數 CSS 選擇器，則只有在與這個 CSS 選擇器匹配且也為哥哥時，才會有效果。

$(selector).prev([selector])

.prevAll()

選擇與指定對象同層的前面所有兄元素，如果有指定參數 CSS 選擇器，則只有在與這個 CSS 選擇器匹配且也為哥哥時，才會有效果。

$(selector).prevAll([selector])

.prevUntil()

選擇與指定對象同層的前一個到 prevUntil(selector) 選擇器之間的兄元素，不包括指定對象本身。

$(selector).prevUntil( [selector ] [, filter ] )

.siblings()

選擇指定對象的其他兄弟節點，不包括指定對象。

$(selector).siblings([selector])

父元素（上層）

.parent()

往上一層選擇指定對象的父元素，如同 JavaScript 的 .parentNode。

.parents()

選擇指定對象的祖先元素，parents() 往上查找，不會停止，找出所有符合條件的祖先們。

.parentsUntil()

選擇對象到 parentsUntil() 參數條件之間的祖先節點，直到那個目標為止之間的對象。

$(selector).parentsUntil(selector)

.closest()

根據 css 選擇器，返回第一個祖先節點，參數可指定第一個祖先節點是誰。closest() 往上查找，只要找到符合條件的就停止。

$(selector).closest(selector)

.offsetParent()

返回第一個被定位的祖先對象，有設定 position 屬性 (static 除外)且最近的元素。

子元素

.children()

.children() 只會選取子元素，並且可以使用 selector 進行過濾。

$(selector).children([selector])

// 選擇所有兒子
$('#menu').children().css('color', 'red')
// 選擇有 .c 兒子
$('#menu').children('.c').css('color', 'red')

雜項遍歷

.add()

指定該對象 jQuery 物件集合後，可再增加新的選擇對象，一起設定接下來的動作。

$(selector).add(selector)

$('li').add('p').css('background-color', 'red')

$(selector).add(html)

$('li').add("<p id='new'>new paragraph</p>").css('background-color', 'red')

$(selector).add(selection)

$('li').add(document.getElementsByTagName('p')).css('background-color', 'red')
$('li').add($('p')).css('background-color', 'red')

.addBack()

指定該對象 jQuery 物件集合後，若遇到排除該選擇對象的方法，例如 nexAll()，它不會選擇到自己，該方法會選擇到自己之後的目標，此時可以使用 addBack() 再把自己加回去，一起建立一個 jQuery 物件。
.addBack() 是用來代替 .andSelf()，.andSelf() 在 3.0 後已經移除。

$('#week li.selected').nextAll().addBack()

.contents()

指定該對象 jQuery 物件集合後，獲取裡面所有的子元素並存入 jQuery 物件陣列，包含 text 與 comment nodes。

.end()

當 jQuery 對象物件因為操作而被改變目標後，可利用 end()結束目前處理並回傳上一次所選的 jQuery 物件。