jQuery 关于伪类选择符的使用说明

在 jQuery 中，你可以使用伪类选择符来选择一些特定的元素，比如选中光标当前所处行的最后一个元素，或者选中表格中的奇数行。伪类选择符共有三种类型，分别是基本伪类选择器、结构性伪类选择器和动态伪类选择器。

基本伪类选择器

基本伪类选择器是最常用的类型，常用的基本伪类选择器有以下几种：

:eq(index)

选中某个索引值的元素。其中 index 是从 0 开始的元素索引值。

示例：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

// 选中第 2 个 li 元素（索引值为 1）
$("li:eq(1)").addClass("selected");

:first

选中第一个元素。

示例：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

// 选中第一个 li 元素
$("li:first").addClass("selected");

结构性伪类选择器

结构性伪类选择器用于选择符合某种结构条件的元素，常用的结构性伪类选择器有以下几种：

:nth-child(index)

选中某个元素的第 index 个子元素。注意，这里的 index 不是元素索引值，而是在其父元素中的子元素的排列顺序。

示例：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

// 选中第 2 个 li 元素
$("li:nth-child(2)").addClass("selected");

:even 和 :odd

选中表格中偶数行或奇数行。

示例：

<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
</table>

// 选中表格中奇数行
$("tr:odd").addClass("odd-row");

动态伪类选择器

动态伪类选择器用于在某些特定状态下选择元素，常用的动态伪类选择器有以下几种：

:focus

选中当前获得焦点的元素。

示例：

<input type="text" placeholder="Focus to see effect" />

// 当文本框获得焦点时，改变其边框颜色
$("input").on("focus", function() {
  $(this).addClass("focus");
});

:hover

选中当前鼠标悬停的元素。

示例：

<a href="#">Hover to see effect</a>

a:hover {
  color: red;
}

以上就是关于 jQuery 中伪类选择器的使用说明，希望对你有所帮助。