jquery有哪些讀取節點的方法

# jQuery有哪些讀取節點的方法

## 前言
在Web開發中，DOM操作是核心技能之一。jQuery作為曾經最流行的JavaScript庫，提供了簡潔高效的DOM操作API。本文將詳細介紹jQuery中常用的節點讀取方法。

## 一、基礎選擇器方法

### 1. ID選擇器
```javascript
$("#elementId")  // 獲取指定ID的單個元素

2. 類選擇器

$(".className")  // 獲取所有指定類名的元素集合

3. 標簽選擇器

$("div")  // 獲取所有指定標簽的元素集合

4. 屬性選擇器

$("[name='username']")  // 獲取具有特定屬性的元素

二、層級選擇方法

1. 后代選擇器

$("parent child")  // 獲取parent元素下的所有child元素

2. 子元素選擇器

$("parent > child")  // 只獲取parent的直接子元素

3. 相鄰兄弟選擇器

$("prev + next")  // 獲取緊接在prev后的next元素

4. 通用兄弟選擇器

$("prev ~ siblings")  // 獲取prev之后的所有兄弟元素

三、過濾選擇方法

1. :first/:last

$("li:first")  // 獲取第一個li元素
$("li:last")   // 獲取最后一個li元素

2. :even/:odd

$("tr:even")  // 獲取偶數索引行
$("tr:odd")   // 獲取奇數索引行

3. :eq(n)

$("li:eq(2)")  // 獲取索引為2的li元素

4. :contains(text)

$("div:contains('Hello')")  // 獲取包含指定文本的元素

四、遍歷DOM樹方法

1. 父元素查找

$("span").parent()      // 獲取直接父元素
$("span").parents()     // 獲取所有祖先元素
$("span").closest("div") // 獲取最近的匹配祖先元素

2. 子元素查找

$("ul").children()     // 獲取所有直接子元素
$("ul").find("li")     // 獲取所有后代匹配元素

3. 兄弟元素查找

$("li").siblings()     // 獲取所有兄弟元素
$("li").next()         // 獲取下一個兄弟元素
$("li").prev()         // 獲取上一個兄弟元素
$("li").nextAll()      // 獲取后面所有兄弟元素
$("li").prevAll()      // 獲取前面所有兄弟元素

五、特殊選擇方法

1. :has(selector)

$("div:has(p)")  // 獲取包含p元素的div

2. :not(selector)

$("input:not(:checked)")  // 獲取未選中的input

3. :hidden/:visible

$("div:hidden")   // 獲取隱藏的div
$("div:visible")  // 獲取可見的div

六、表單相關選擇器

1. :input

$(":input")  // 獲取所有表單元素

2. :checked

$(":checked")  // 獲取所有選中的復選框和單選按鈕

3. :selected

$(":selected")  // 獲取所有選中的option元素

結語

jQuery提供了豐富的DOM選擇方法，從基礎選擇器到復雜的過濾方法，開發者可以根據需求靈活組合使用。雖然現代前端開發逐漸轉向原生JavaScript和框架，但理解這些方法仍有助于DOM操作思維的培養。

提示：在實際開發中，應盡量使用更具體的選擇器以提高查詢效率，避免過度寬泛的選擇器如$("*")。 “`