jQuery Attributes(属性)的使用(二、类篇)

接下来我会详细讲解一下jQuery中Attributes（属性）的使用，特别是二、类篇。

1.使用addClass()方法添加类

jQuery提供了addClass()方法，可以在元素上添加指定的类名。其语法如下：

$(selector).addClass(classname);

其中，selector表示需要添加类名的元素选择器，而classname则表示要添加的类名。如果需要添加多个类名，可以使用空格隔开。例如：

$("p").addClass("red big");

上述代码通过选择器选取了所有的p元素，并添加了red和big两个类名。

2.使用removeClass()方法移除类

与addClass()方法类似，jQuery还提供了removeClass()方法，可以从元素中移除一个或多个类名。其语法如下：

$(selector).removeClass(classname);

其中，selector表示需要移除类名的元素选择器，而classname则表示要移除的类名。如果要移除多个类名，同样可以使用空格隔开。例如：

$("p").removeClass("big");

上述代码会从所有的p元素中移除big类名。

3.使用toggleClass()方法切换类

jQuery的toggleClass()方法可以在元素上添加或移除类名，即根据元素是否已经拥有指定类名来切换该类名的状态。其语法如下：

$(selector).toggleClass(classname);

其中，selector表示需要切换类名的元素选择器，而classname则表示要切换的类名。例如：

$("p").toggleClass("big");

上述代码会在所有的p元素中切换big类名的状态，如果该元素已经拥有big类名，则移除该类名，否则添加该类名。

示例一：在按钮上切换类名实现图片变换

此示例中，我们通过给按钮添加click事件来切换图片的显示。初始时，图片以hidden的方式隐藏，而当按钮被点击时，就会切换图片的显示状态。具体实现代码如下：

HTML代码：

<button>切换图片</button>
<img src="img/demo.jpg" alt="演示图片" class="hidden">

CSS代码：

.hidden {
  display: none;
}

JavaScript代码：

$(function () {
  $("button").click(function () {
    $("img").toggleClass("hidden");
  });
});

上述代码中，我们给按钮添加了click事件处理函数，当按钮被点击时，就会调用toggleClass()方法来切换图片的显示状态。在CSS中，我们使用了.hidden类来将图片设置为隐藏状态。

示例二：在表格中切换行的类名实现高亮显示

此示例中，我们在表格中切换行的类名，实现对某行的高亮显示。具体实现代码如下：

HTML代码：

<table id="mytable">
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
  </tr>
</table>

CSS代码：

.highlight {
  background-color: yellow;
}

JavaScript代码：

$(function () {
  $("#mytable tr").click(function () {
    $(this).toggleClass("highlight");
  });
});

上述代码中，我们给表格的每一行添加了click事件处理函数，当某行被点击时，就会调用toggleClass()方法，来切换该行的高亮显示状态。在CSS中，我们使用了.highlight类来定义高亮显示的样式。