jQuery 复合选择器应用的几个例子

我将为您详细讲解“jQuery 复合选择器应用的几个例子”的完整攻略，过程中将为您举出两个示例说明。

一、什么是复合选择器

复合选择器 是针对多个属性值选择元素的选择器。例如：$("p:first-of-type.red")是由两个简单选择器p:first-of-type和.red组成。

二、使用复合选择器的注意事项

在使用复合选择器时需要注意以下两点：

1. 选择器中的简单选择器之间没有空格，否则会选择所有符合条件的后代元素，例如：$("div .red")会选中所有包含class为.red的后代元素。而$("div.red")才是选择所有符合条件的class为.red的div元素。

2. 复合选择器中的属性选择器也不能缺少双引号或单引号，否则在一些浏览器会存在兼容性问题，例如：$("[name=article]")应该写成$("[name='article']")。

三、两个使用复合选择器的示例

示例一：选择特定颜色的特定标签

下面是一个示例，我们要选择所有class为.red且是div或p标签的元素：

<div class="red">我是红色的div</div>
<p class="red">我是红色的p</p>
<h1 class="red">我不是红色的h1</h1>

使用复合选择器可以轻松实现上述需求：

$("div.red, p.red");

上面代码的意思是选择所有class为.red且是div或p标签的元素。

示例二：选择表格中特定行与特定列对应的元素

下面是一个示例，我们要选择表格中第三行，第四列的元素：

<table>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>4</td><td>5</td><td>6</td></tr>
  <tr><td>7</td><td>8</td><td>9</td></tr>
</table>

使用复合选择器可以轻松实现上述需求：

$("tr:eq(2) td:eq(3)");

tr:eq(2)选择的是页面上对应的第三行，td:eq(3)选择的是第四列（因为序号从0开始），两个选择器组合起来就可以找到特定行、列的元素。

以上就是使用 jQuery 复合选择器应用的几个例子的完整攻略，希望能对您有所帮助！