jQuery选择器(常用选择器说明)

什么是jQuery选择器？

jQuery选择器是一种用于查找HTML元素的表达式。它由一个美元符号加上圆括号组成：$()。

常用选择器说明

基本选择器

元素选择器（Element Selector）

选取指定元素名称的所有元素。

$("p");

ID选择器（ID Selector）

选取指定ID属性的元素。

$("#myId");

类选择器（Class Selector）

选取指定class名称的元素。

$(".myClass");

层次选择器

后代选择器（Descendant Selector）

选取所有指定元素的后面代元素。

$("div p");

子元素选择器（Child Selector）

选取所有指定元素的直接子元素。

$("div > p");

相邻兄弟选择器（Adjacent Sibling Selector）

选择所有指定元素之后的第一个同级元素。

$("h2 + p");

一般兄弟选择器（General Sibling Selector）

选择指定元素之后的所有同级元素。

$("h2 ~ p");

过滤选择器

基本过滤选择器

• :first：选取第一个符合条件的元素。
• :last：选取最后一个符合条件的元素。
• :eq(index)：选取指定索引位置的元素。
• :even：选取偶数位置的元素。
• :odd：选取奇数位置的元素。
• :not(selector)：选取不符合条件的元素。
• :header：选取标题元素（h1-h6）。
• :focus：选取当前获取焦点的元素。
• :contains(text)：选取包含指定文本的元素。
• :empty：选取没有子元素的元素。
• :parent：选取有子元素的元素。

$("ul li:first");

表单过滤选择器

• :input：选取表单中的所有input、textarea、select和button元素。
• :text：选取类型为text的input元素。
• :password：选取类型为password的input元素。
• :radio：选取类型为radio的input元素。
• :checkbox：选取类型为checkbox的input元素。
• :submit：选取类型为submit的button元素。
• :image：选取类型为image的input元素。
• :reset：选取类型为reset的button元素。
• :button：选取类型为button的button元素。
• :file：选取类型为file的input元素。

$(":input");

示例说明

示例1

HTML代码：

<ul>
  <li class="w3-blue">蓝色</li>
  <li class="w3-red">红色</li>
  <li class="w3-green">绿色</li>
  <li class="w3-yellow">黄色</li>
</ul>

jQuery代码：

$("li").css("background-color", "yellow");

解释：将所有li元素的背景颜色改为黄色。

示例2

HTML代码：

<div>
  <p>一号段</p>
  <p>二号段</p>
  <p>三号段</p>
  <p>四号段</p>
  <p>五号段</p>
</div>

jQuery代码：

$("div p:even").css("background-color", "lightgray");

解释：将所有奇数段的p元素的背景颜色改为浅灰色。

结束语

本文介绍了常见的jQuery选择器，内涵涉及基本选择器、层次选择器和过滤选择器等内容，并给出了示例说明。希望本文能够帮助读者更好地理解和运用jQuery选择器。