jQuery 多类选择器

在使用 jQuery 选择元素时，除了根据元素名、id、属性等选择器之外，还可以通过类名来选择元素。而在 jQuery 中，我们可以同时选择多个类名相同的元素，这就是所谓的多类选择器。

如何使用多类选择器

jQuery 的多类选择器使用单个空格将多个类名隔开即可，例如：

$(".class1.class2")

上述选择器会选中同时具有 class1 和 class2 类名的元素。

示例

考虑以下 HTML 代码：

<div class="box box-gray">这是一个灰色的盒子</div>
<div class="box">这是一个普通的盒子</div>
<div class="box box-red">这是一个红色的盒子</div>
<div class="box box-green">这是一个绿色的盒子</div>

如果我们想要选择同时具有 box 和 box-red 类名的元素，可以使用以下代码：

$(".box.box-red")

该选择器会选中第三个 div 元素，即红色的盒子。

同样地，如果我们想要选择同时具有 box 和 box-gray 类名的元素，可以使用以下代码：

$(".box.box-gray")

该选择器会选中第一个 div 元素，即灰色的盒子。

多类选择器注意事项

• 多类选择器同时选中多个类名相同的元素，因此其效率较低，需要谨慎使用。
• 多类选择器选择的元素集合顺序与 HTML 文档树种的顺序无关，而是由元素在文档树种出现的顺序决定的。

结语

使用多类选择器，我们可以更加灵活地选择具有多个类名的元素，这在实际开发中非常常见。因此，熟练掌握多类选择器的使用是 jQuery 编程的基本技能之一。