jQuery 选择器怎么用?有哪些常用类型和用法?

文章导读
Previous Quiz Next jQuery 选择器 用于根据元素名称、id、classes、类型、attributes、值等“查找”(或选择)HTML 元素。jQuery 提供了一系列选择器,包括 basic selectors、attribute selector
📋 目录
  1. A jQuery 选择器参考
A A

jQuery - 选择器参考



Previous
Quiz
Next

jQuery 选择器 用于根据元素名称、id、classes、类型、attributes、值等“查找”(或选择)HTML 元素。jQuery 提供了一系列选择器,包括 basic selectors、attribute selectors 等。

这些选择器简化了识别和与特定元素交互的过程,降低了 JavaScript 代码的复杂性。

jQuery 选择器参考

在下表中,我们列出了所有 jQuery 选择器 −

序号 方法 & 描述
1 *

选择所有元素。

2 #id

选择具有指定 id 的元素。

3 .class

选择具有指定 class 的所有元素。

4 .class,.class

选择具有任一指定 class 的所有元素。

5 element

选择具有指定标签名的所有元素。

6 el1,el2,el3

选择具有任一指定标签名的所有元素。

7 :first

选择匹配元素集合中的第一个元素。

8 :last

选择匹配元素集合中的最后一个元素。

9 :even

选择偶数元素(基于零索引)。

10 :odd

选择奇数元素(基于零索引)。

11 :first-child

选择每个是其父元素第一个子元素的元素。

12 :first-of-type

选择每个在其同胞元素中是其类型第一个的元素。

13 :last-child

选择每个是其父元素最后一个子元素的元素。

14 :last-of-type

选择每个在其同胞元素中是其类型最后一个的元素。

15 :nth-child(n)

选择每个是其父元素第 n 个子元素的元素。

16 :nth-last-child(n)

选择每个是其父元素第 n 个子元素的元素,从最后一个子元素开始计数。

17 :nth-of-type(n)

选择每个在其同胞元素中是其类型第 n 个的元素。

18 :nth-last-of-type(n)

选择每个在其同胞元素中是其类型第 n 个的元素,从最后一个开始计数。

19 :only-child

选择每个是其父元素唯一子元素的元素。

20 :only-of-type

选择每个在其同胞元素中是其类型唯一的元素。

21 parent > child

选择所有是父元素直接子元素的子元素。

22 parent descendant

选择所有是父元素后代元素的后代元素。

23 element + next

选择紧接在 element 之前的下一个元素。

24 element ~ siblings

选择所有由 element 之前的同胞元素。

25 :eq(index)

选择具有指定索引的元素。

26 :gt(no)

选择索引大于指定数字的所有元素。

27 :lt(no)

选择索引小于指定数字的所有元素。

28 :not(selector)

选择不匹配给定选择器的所有元素。

29 :header

选择所有标题元素(<h1> 到 <h6&g;)。

30 :animated

选择当前正在执行动画的所有元素。

31 :focus

选择当前具有焦点的元素。

32 :contains(text)

选择包含指定文本的所有元素。

33 :has(selector)

选择所有至少有一个匹配指定选择器的后代元素的元素。

34 :empty

选择没有子元素(包括文本节点)的所有元素。

35 :parent

选择至少有一个子节点(元素或文本)的所有元素。

36 :hidden

选择所有隐藏的元素。

37 :visible

选择所有可见的元素。

38 :root

选择文档的根元素。

39 :lang(language)

选择具有指定语言属性的所有元素。

40 [attribute]

选择具有指定属性的所有元素。

41 [attribute=value]

选择具有指定属性和值的的所有元素。

42 [attribute!=value]

选择具有指定属性但不具有指定值的的所有元素。

43 [attribute$=value]

选择具有指定属性且以指定值结尾的所有元素。

44 [attribute|=value]

选择属性值精确匹配指定值或以指定值后跟连字符 (-) 开头的所有元素。

45 [attribute^=value]

选择具有指定属性且以指定值开头的所有元素。

46 [attribute~=value]

选择具有指定属性且包含指定值(空格分隔列表)的所有元素。

47 [attribute*=value]

选择具有指定属性且包含指定值的的所有元素。

48 :input

选择所有 input、textarea、select 和 button 元素。

49 :text

选择所有 type="text" 的 input 元素。

50 :password

选择所有 type="password" 的 input 元素。

51 :radio

选择所有 type="radio" 的 input 元素。

52 :checkbox

选择所有 type="checkbox" 的 input 元素。

53 :submit

选择所有 type="submit" 的 input 元素。

54 :reset

选择所有 type="reset" 的 input 元素。

55 :button

选择所有 button 元素和 type="button" 的 input 元素。

56 :image

选择所有 type="image" 的 input 元素。

57 :file

选择所有 type="file" 的 input 元素。

58 :enabled

选择所有启用的元素。

59 :disabled

选择所有禁用的元素。

60 :selected

选择下拉列表中所有选中的选项。

61 :checked

选择所有选中的复选框或单选按钮。