jQuery之addClass与removeClass使用实例

最新推荐文章于 2023-12-10 19:02:02 发布

原创最新推荐文章于 2023-12-10 19:02:02 发布 · 4.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #addClass #removeClas #siblings

jquery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了jQuery中addClass和removeClass方法的使用，用于方便地添加和移除DOM元素的类名，结合siblings方法实现复杂样式效果，如按钮颜色切换等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常见的用途

在HTML里，多个class以空格分隔，当一个节点（或称为一个标签）含有多个class时，DOM元素响应的className属性获取的不是class名称的数组，而是一个含有空格的字符串，这就使得多class操作变得很麻烦。

而jQuery已经将原来解析字符串等精细的操作变成了很简洁的API。例如，addClass()就是添加class类名，removeClass()就是移除class类名，这里您想添加几个class就添加几个，想移除几个就可以移除几个。于是呢，在jQuery里，很多看似复杂的样式效果就变得非常简单，小菜一碟了。

//====按钮切换颜色（两个箭头样式的切换）
这里写图片描述

addClass() 方法

向被选元素添加一个或多个类

--展示如何向不同的元素添加 class 属性。该例子、；点击button按钮时候，对p元素添加一个blue的属性，而blue属性是颜色变蓝
    --jquery样式
    $("button").click(
        $("p").addClass("blue");
    );
    --css样式
    .blue
    {
    color:blue;
    }

removeClass()

从被选元素删除一个或多个类

--该例子、；点击button按钮时候，对p元素删除一个blue的属性
    $("button").click(function(){
      $("p").removeClass("blue");
    });

siblings() 方法

siblings() 方法返回被选元素的所有同胞元素。

--jquery样式
$(document).ready(function(){
  $("h2").siblings();
});

--css样式
<div>div (parent)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

--结果是：返回 <h2> 的所有同胞元素：p,span,h3,p

结合起来的实例

--css的样式
<div class="tss">
    <span class="ts1 ts1s" data-type="0">宝贝</span>
    <span class="ts1" data-type="1">店铺</span>                   
</div>

--jquery样式
    点击事件
        $('.tss .ts1').click(function(){		   	   $(this).addClass('ts1s').siblings().removeClass('ts1s')                                
    })