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>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')
})