jquery选择器大全 jquery选择器的基本语法

jQuery 选择器是 jQuery 库的一个重要特性，它允许开发者通过简洁的语法来选择和操作 DOM 元素。jQuery 提供了丰富多样的选择器，涵盖了 CSS 选择器的功能，并扩展了更多特性。以下是 jQuery 选择器的大全及其简要说明：

### 基本选择器

1. **元素选择器**: 选择所有指定标签的元素。

```javascript

$('div') // 选择所有 <div> 元素

```

2. **ID 选择器**: 选择具有特定 ID 的元素。

```javascript

$('#myId') // 选择 ID 为 "myId" 的元素

```

3. **类选择器**: 选择具有特定类的元素。

```javascript

$('.myClass') // 选择所有 class 为 "myClass" 的元素

```

### 层次选择器

4. **后代选择器**: 选择某元素的后代元素。

```javascript

$('#container .item') // 选择 ID 为 "container" 的元素中的所有 class 为 "item" 的后代元素

```

5. **子选择器**: 选择某元素的子元素。

```javascript

$('ul > li') // 选择所有 <ul> 的直接子元素 <li>

```

6. **相邻兄弟选择器**: 选择紧接在某元素后的兄弟元素。

```javascript

$('h1 + p') // 选择紧跟在 <h1> 后的第一个 <p> 元素

```

7. **一般兄弟选择器**: 选择某元素之后的所有兄弟元素。

```javascript

$('h1 ~ p') // 选择 <h1> 元素之后的所有 <p> 元素

```

### 属性选择器

8. **[attribute]**: 选择具有指定属性的元素。

```javascript

$('input[name]') // 选择所有具有 "name" 属性的 <input> 元素

```

9. **[attribute=value]**: 选择具有指定属性和值的元素。

```javascript

$('input[type="text"]') // 选择所有 type 为 "text" 的 <input> 元素

```

10. **[attribute!=value]**: 选择不具有指定属性值的元素。

```javascript

$('input[type!="text"]') // 选择所有 type 不为 "text" 的 <input> 元素

```

11. **[attribute^=value]**: 选择指定属性以某值开头的元素。

```javascript

$('a[href^="https"]') // 选择所有 href 属性以 "https" 开头的 <a> 元素

```

12. **[attribute$=value]**: 选择指定属性以某值结尾的元素。

```javascript

$('a[href$=".pdf"]') // 选择所有 href 属性以 ".pdf" 结尾的 <a> 元素

```

13. **[attribute*=value]**: 选择指定属性包含某值的元素。

```javascript

$('a[href*="example"]') // 选择所有 href 属性包含 "example" 的 <a> 元素

```

### 表单选择器

14. **:input**: 选择所有输入类表单元素。

```javascript

$(':input') // 选择所有 <input>、<textarea>、<select>、<button> 元素

```

15. **:text**: 选择所有单行文本输入框。

```javascript

$(':text') // 选择所有 type 为 "text" 的 <input> 元素

```

16. **:checked**: 选择所有被选中的复选框或单选按钮。

```javascript

$(':checked') // 选择所有选中的复选框和单选按钮

```

17. **:selected**: 选择所有被选中的选项。

```javascript

$('select option:selected') // 选择所有被选中的 <select> 元素的 <option>

```

### 内容过滤选择器

18. **:contains(text)**: 选择包含指定文本的元素。

```javascript

$('p:contains("hello")') // 选择包含 "hello" 文本的 <p> 元素

```

19. **:empty**: 选择没有子元素的元素。

```javascript

$('div:empty') // 选择没有子元素的 <div>

```

20. **:has(selector)**: 选择包含特定元素的元素。

```javascript

$('div:has(p)') // 选择包含 <p> 元素的 <div>

```

### 可见性选择器

21. **:visible**: 选择所有可见元素。

```javascript

$(':visible') // 选择所有可见元素

```

22. **:hidden**: 选择所有隐藏元素。

```javascript

$(':hidden') // 选择所有隐藏元素

```

### 子元素过滤选择器

23. **:first**: 选择第一个元素。

```javascript

$('li:first') // 选择第一个 <li> 元素

```

24. **:last**: 选择最后一个元素。

```javascript

$('li:last') // 选择最后一个 <li> 元素

```

25. **:nth-child(n)**: 选择第 n 个子元素。

```javascript

$('li:nth-child(2)') // 选择第二个 <li> 元素

```

26. **:odd / :even**: 选择索引为奇数/偶数的元素。

```javascript

$('li:odd') // 选择索引为奇数的 <li> 元素

$('li:even') // 选择索引为偶数的 <li> 元素

```

这些选择器可以单独使用，也可以组合使用，以实现复杂的选择逻辑。jQuery 的强大选择器功能使得操作 DOM 变得非常高效和直观。

我的文章可能还有不足之处，如有不同意见，请留言讨论。