如何在 jQuery 中选择类 - Javascript

在 jQuery 中，通过使用 CSS 选择器语法，可以很方便地选取任何 HTML 元素。类是 HTML 中一个重要的属性，相信程序员们都十分熟悉。下面我们就来介绍一下如何在 jQuery 中选择类。

选择类的基本语法

要在 jQuery 中选择类，需要在类名前面加上一个点号 "."，如下所示：

$(".class-name")

这个语法的意思是，选取所有 class 属性为 "class-name" 的 HTML 元素。

选择包含多个类的元素

在 HTML 中，有时候一个元素会有多个类。比如下面这个元素：

<div class="box red"></div>

这个元素同时有 "box" 和 "red" 两个类。

在 jQuery 中，想要选取同时包含多个类的元素，需要在类名之间加上一个没有任何意义的空格，如下所示：

$(".box.red")

这个语法的意思是，选取所有 class 属性既包含 "box" 也包含 "red" 的 HTML 元素。

选择以某个类开头的元素

有时候，想要选取所有 class 属性以某个关键字开头的元素。比如下面这样的 HTML 代码：

<div class="color-red"></div>
<div class="color-blue"></div>
<div class="size-big"></div>
<div class="size-small"></div>

我们想选取所有 class 属性以 "color-" 开头的元素，可以使用下面这个语法：

$("[class^='color-']")

这个语法的意思是，选取所有 class 属性以 "color-" 开头的 HTML 元素。

选择以某个类结尾的元素

同样地，有时候需要选取所有 class 属性以某个关键字结尾的元素。比如下面这样的 HTML 代码：

<div class="box-red"></div>
<div class="box-yellow"></div>
<div class="button-small"></div>
<div class="button-big"></div>

我们想选取所有 class 属性以 "-red" 结尾的元素，可以使用下面这个语法：

$("[class$='-red']")

这个语法的意思是，选取所有 class 属性以 "-red" 结尾的 HTML 元素。

选择包含某个类的元素

除了上面提到的选取同时包含多个类的元素之外，有时候我们还需要选取包含某个类的元素，而不是只选取所有 class 属性完全匹配的元素。

比如下面这个 HTML 代码：

<div class="box blue"></div>
<div class="box red"></div>
<div class="wrapper">
  <div class="box yellow"></div>
</div>

我们想选取所有包含 "box" 类的元素，不管 "box" 是在哪个位置，在哪个元素里，可以使用下面这个语法：

$("[class*='box']")

这个语法的意思是，选取所有 class 属性中包含 "box" 的 HTML 元素。

总结

通过本文的介绍，相信程序员们已经熟悉了在 jQuery 中选择类的基本语法，以及如何选择包含多个类、以某个关键字开头和结尾、包含某个类的元素。这些都是 jQuery 中常用的语法，对于编写 JavaScript 应用程序很有帮助。