全面看jQuery选择者

本文受益于马特·史密斯（Matt Smith）和蒂姆·塞维恩（Tim Severien）的同行评论。 感谢SitePoint的同行评审提高了内容质量！ 选择元素对于用jQuery操纵网页至关重要。 无论您是修改内容，附加事件还是执行其他操作，都需要先定位正确的元素。 本教程探索了jQuery选择器，这是库的关键组成部分。

键概念

jQuery选择器对于针对网页元素进行内容操作，事件附件等是必不可少的。 这些选择者使用标准，例如ID，类，属性或组合。

>

> jQuery提供了广泛的选择器，包括基本，基于索引，儿童，属性，内容，层次结构，表单和可见性选择器。每种类型都基于特定条件和参数提供唯一的选择功能。
• > JQuery 3中的增强功能显着提高了自定义选择器的速度，例如
>和
• （在某些情况下最多17倍）。 现在，可见性是由
>的布局框的存在确定的
• 缓存选定的元素可以提高性能，尤其是在许多选择器中。 在变量中存储选择会减少冗余DOM扫描。:visible :hidden>许多jQuery选择器镜像CSS选择器，jQuery还包括其自己的自定义选择器，以进行更简洁有效的元素选择。> getClientRects
• > jQuery选择器详细
> jQuery选择器主要基于ID，类，属性或组合等标准识别元素。 许多基于CSS选择器，但JQuery通过自定义选择器扩展功能。

基本选择器

>选择ID（），类（

）或标签名称（

）的元素。 组合这些（例如，

）或使用由逗号分开的多个选择器（例如，

）。

其他基本选择器：

$("#id") $(".class")$("li")：选择所有标题（$(".class tag")>$("selectorA, selectorB, selectorC")）。 比单独列出每个标签标签更简洁。

：选择匹配URL片段标识符的元素（例如，

）。
• :header：选择当前正在动画的元素（需要jQuery效果模块）。 <h1></h1> 基于索引的选择器<h6></h6>
> jQuery提供基于零的索引选择器：
• • :eq(n)：选择索引n的元素（支持正索引和负数）。
  >
  • :lt(n)：选择索引小于n的元素。
  。
  • :gt(n)：选择索引大于或等于n>
  >的元素
  • :first：选择第一个匹配的元素。
  • :last：选择最后一个匹配的元素。
  • :even：选择具有均匀索引的元素（0，2，4 ...）。
  • ：选择具有奇数索引的元素（1，3，5 ...）。 :odd 基于

  交互式演示索引的选择器>

  儿童选择器
  这些选择器基于索引或类型针对儿童：
  • ：选择每个父母的第一个孩子。:first-child>
  • ：选择其类型的第一个兄弟姐妹。:first-of-type>
  • ：选择每个父母的最后一个孩子。:last-child>
  • ：选择其类型的最后一个兄弟姐妹。:last-of-type>
  • ：选择第n个孩子（支持各种表达式，例如数字，:nth-child(n)，even，公式）。odd
  • ：类似于:nth-last-child(n)>，但从最后一个孩子计算。:nth-child>
  • ：选择其类型的nth兄弟姐妹。:nth-of-type(n)
  • ：类似于:nth-last-of-type(n)>，但从最后一个同胞计算。:nth-of-type>
  • ：选择是父母唯一子女的元素。:only-child>
  • ：选择没有相同类型的兄弟姐妹的元素。:only-of-type>

  交互式演示儿童选择器>

  属性选择器

  基于属性值的选择元素：

  ：选择具有确切属性值的元素。
  • > [attribute="value"]
  ：选择其属性值以“ value”开头的元素。
  • [attribute^="value"]：选择其属性值以“ value”结尾的元素。
  >
  • [attribute$="value"]：选择其属性值包含“值”的元素。
  >
  • [attribute*="value"]：选择其属性值等于或以“值”开始的元素，其次是连字符。
  >
  • [attribute|="value"]：选择其属性值包含“值”的元素作为空间分离的单词。
  • ：选择没有属性或具有不同值的元素。> [attribute~="value"]
  ：选择具有指定属性的元素，无论价值如何。
  • [attribute!="value"]
  内容选择器
  • [attribute]这些选择器基于其内容的目标元素：
  • :contains(text)：选择包含指定文本（情况敏感）的元素。
  >
  • :has(selector)：选择至少包含一个匹配提供的选择器的元素的元素。
  • :empty：选择没有孩子的元素。
  • :parent：选择至少一个孩子的元素。
  >

  层次结构选择器

  这些选择器使用DOM层次结构：

  • ancestor descendant：选择祖先元素的所有后代。
  >
  • parent > child：选择父元素的直接子女。
  >
  • prev next：选择prev元素的下一个兄弟姐妹。
  >
  • prev ~ siblings：选择prev元素的所有后续兄弟姐妹。
  >

  形式选择器

  的形式元素的简化选择器：

  • :button：选择按钮元素。
  • :checkbox：选择复选框元素。
  • :radio：选择单选按钮元素。
  • ：选择文本输入元素。:text
  • ：选择密码输入元素。:password
  • ：选择提交按钮元素。:submit
  • ：选择重置按钮元素。:reset
  • ：选择图像按钮元素。:image
  • ：选择文件输入元素。:file
  • ：选择隐藏的形式元素。:hidden
  • ：选择启用的表单元素。:enabled>
  • ：选择禁用的表单元素。:disabled
  • ：选择选中的复选框和无线电按钮，以及选定的选项。:checked>
  • ：在:selectedelements中选择选定的选项。<select></select>
  可见性选择器
  • ：选择可见元素。:visible
  • ：选择隐藏的元素。:hidden

  jQuery 3更改

  > jQuery 3引入了>和

  的性能改进，并完善了可见性的定义。 无效选择器的错误处理也得到了增强。:visible> :hidden

  >性能的缓存 通过避免重复的DOM扫描，缓存选定的元素可以改善性能。 将选择存储在变量中以进行重复使用。

  结论

  >本教程全面涵盖了jQuery选择器。切记使用缓存以进行最佳性能。 了解这些选择器对于有效的jQuery开发至关重要。

  常见问题（FAQS）

  > 原始输入的FAQ部分已经结构良好且全面。 我建议保持原样，也许通过较小的措辞调整以提高流量和清晰度。

以上是全面看jQuery选择者的详细内容。更多信息请关注PHP中文网其他相关文章！