[分享]📘 jQuery有哪些常用的选择器？

jQuery 提供了丰富的选择器，使得从 DOM 中选择元素变得非常简单。以下是一些常用的 jQuery 选择器：1. 基本选择器元素选择器：通过元素名称选择元素。$("div")...

jQuery 提供了丰富的选择器，使得从 DOM 中选择元素变得非常简单。以下是一些常用的 jQuery 选择器：

1. 基本选择器

• 元素选择器：通过元素名称选择元素。

  $("div") // 选择所有 div 元素

• ID 选择器：通过元素的 ID 选择元素。

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

• 类选择器：通过元素的类名选择元素。

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

2. 层次选择器

• 后代选择器：选择指定元素的后代元素。

  $("ul li") // 选择 ul 元素内部的所有 li 元素

• 子代选择器：选择指定元素的直接子元素。

  $("ul > li") // 选择 ul 元素的直接子元素 li

• 相邻兄弟选择器：选择紧随指定元素之后的相邻兄弟元素。

  $("h1 + p") // 选择紧随 h1 元素之后的 p 元素

• 通用兄弟选择器：选择指定元素之后的所有兄弟元素。

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

3. 基本过滤器

• :first：选择匹配元素集合中的第一个元素。

  $("li:first") // 选择第一个 li 元素

• :last：选择匹配元素集合中的最后一个元素。

  $("li:last") // 选择最后一个 li 元素

• :eq(index)：选择匹配元素集合中指定索引的元素（索引从0开始）。

  $("li:eq(2)") // 选择第三个 li 元素

• :even：选择匹配元素集合中的偶数项。

  $("li:even") // 选择所有偶数索引的 li 元素

• :odd：选择匹配元素集合中的奇数项。

  $("li:odd") // 选择所有奇数索引的 li 元素

4. 内容过滤器

• :contains(text)：选择包含指定文本的元素。

  $("div:contains('text')") // 选择包含文本 'text' 的 div 元素

• :has(selector)：选择包含指定元素的父元素。

  $("div:has(p)") // 选择包含 p 元素的 div 元素

5. 可见性过滤器

• :visible：选择所有可见元素。

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

• :hidden：选择所有隐藏元素。

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

6. 属性过滤器

• [attribute]：选择具有指定属性的元素。

  $("div[title]") // 选择所有具有 title 属性的 div 元素

• [attribute=value]：选择具有指定属性值的元素。

  $("div[title='demo']") // 选择 title 属性值为 'demo' 的 div 元素

• [attribute!=value]：选择属性值不等于指定值的元素。

  $("div[title!='demo']") // 选择 title 属性值不等于 'demo' 的 div 元素

• [attribute^=value]：选择属性值以指定值开头的元素。

  $("div[title^='demo']") // 选择 title 属性值以 'demo' 开头的 div 元素

• [attribute$=value]：选择属性值以指定值结尾的元素。

  $("div[title$='demo']") // 选择 title 属性值以 'demo' 结尾的 div 元素

• [attribute=value]*：选择属性值包含指定值的元素。

  $("div[title*='demo']") // 选择 title 属性值包含 'demo' 的 div 元素

这些是 jQuery 中常用的选择器，它们可以帮助你快速地选择和操作 DOM 元素。