jQuery选择器：快速定位你需要的标签

jQuery选择器：快速定位你需要的标签

jQuery是一种用于操作HTML元素、CSS样式和处理事件的JavaScript库，它提供了许多强大的选择器来定位DOM元素，帮助我们快速准确地找到所需的标签。

基本选择器

基本选择器是用于匹配HTML元素的简单选择器，包括：

• id选择器 ：通过元素的id属性来匹配元素，语法为"#id"。
• 类选择器 ：通过元素的class属性来匹配元素，语法为".class"。
• 标签选择器 ：通过元素的标签名来匹配元素，语法为"tag"。
• 后代选择器 ：匹配所有属于父元素的后代元素，语法为"parent > child"。
• 子选择器 ：匹配所有属于父元素的直接子元素，语法为"parent child"。
• 相邻选择器 ：匹配所有与目标元素相邻的元素，语法为"element + element"。
• 兄弟选择器 ：匹配所有与目标元素相邻且具有相同父元素的元素，语法为"element ~ element"。
• 并列选择器 ：匹配所有匹配多个选择器的元素，语法为"selector1, selector2"。

高级选择器

高级选择器是用于匹配HTML元素的更复杂的选择器，包括：

• 伪类选择器 ：用于匹配具有特定状态或属性的元素，例如：
  • :hover ：匹配鼠标悬停在元素上的元素。
  • :focus ：匹配具有焦点(focus)的元素。
  • :active ：匹配正在被点击的元素。
• 属性选择器 ：用于匹配具有特定属性或属性值的元素，例如：
  • [attr="value"] ：匹配具有属性attr且值为value的元素。
  • [attr^=value] ：匹配具有属性attr且值以value开头的元素。
  • [attr$="value"] ：匹配具有属性attr且值以value结尾的元素。
  • [attr="value"]* ：匹配具有属性attr且值包含value的元素。
• 结构选择器 ：用于匹配具有特定结构的元素，例如：
  • :first ：匹配第一个匹配的选择器元素。
  • :last ：匹配最后一个匹配的选择器元素。
  • :even ：匹配索引值为偶数的匹配的选择器元素。
  • :odd ：匹配索引值为奇数的匹配的选择器元素。
• 层次选择器 ：用于匹配具有特定层次关系的元素，例如：
  • parent > child ：匹配所有属于parent元素的直接子元素child。
  • parent child ：匹配所有属于parent元素的后代元素child。
• 组合选择器 ：用于组合多个选择器来匹配元素，例如：
  • selector1 selector2 ：匹配所有同时匹配selector1和selector2的选择器元素。
  • selector1, selector2 ：匹配所有匹配selector1或selector2的选择器元素。

示例代码

$(function() {
  // 获取id为"my-id"的元素
  $("#my-id").hide();

  // 获取类名为"my-class"的元素
  $(".my-class").show();

  // 获取所有