java面试题60JQuery选择器

jQuery 选择器是 jQuery 的核心功能之一，它允许你高效、简洁地查找和选取 HTML 文档中的元素。其语法基于 CSS 选择器，并进行了扩展，使其更加强大和灵活。使用 $() 函数（或 jQuery() 函数）来应用选择器。

核心语法

$(selector)

• selector: 一个字符串，用于指定要查找哪些元素。

主要类型及示例

1. 基本选择器 (最常用):

   • #id (ID 选择器): 选取具有指定 ID 的元素。

     $("#myElement") // 选取 id="myElement" 的元素
     

   • .class (类选择器): 选取所有具有指定类的元素。

     $(".highlight") // 选取所有 class="highlight" 的元素
     

   • element (元素/标签选择器): 选取所有指定标签的元素。

     $("p") // 选取所有 
      元素
     $("div") // 选取所有 
      元素
     

   • * (通配符选择器): 选取所有元素（谨慎使用，性能开销大）。

     $("*") // 选取页面中的所有元素
     

   • 组合 (分组选择器): 用逗号分隔多个选择器，选取匹配任意一个选择器的元素。

     $("h1, h2, .intro") // 选取所有 
     , 
      和 class="intro" 的元素
     

2. 层级选择器 (根据元素在 DOM 树中的位置):

   • ancestor descendant (后代选择器): 选取指定祖先元素内的所有后代元素。

     $("ul li") // 选取所有 
      元素内的 
      元素 (所有层级)
     

   • parent > child (子元素选择器): 选取指定父元素的直接子元素。

     $("ul > li") // 选取所有 
      元素的**直接子级** 
      元素
     

   • prev + next (相邻兄弟选择器): 选取紧接在 prev 元素之后的第一个 next 兄弟元素。

     $("h2 + p") // 选取紧跟在 
      元素**后面**的第一个 
      兄弟元素
     

   • prev ~ siblings (一般兄弟选择器): 选取 prev 元素之后的所有 siblings 兄弟元素。

     $("h2 ~ p") // 选取 
      元素**之后**的所有 
      兄弟元素
     

3. 过滤选择器 (基于特定条件筛选已匹配的元素集):

   • :first / :last: 选取匹配元素集合中的第一个或最后一个元素。

     $("p:first")