jQuery之addClass与removeClass使用实例

常见的用途

在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>pp>
  <span>spanspan>
  <h2>h2h2>
  <h3>h3h3>
  <p>pp>
div>

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

结合起来的实例

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


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