addClass(添加多个类名)removeClass
为每个匹配的元素添加指定的类名。
//追加一个类名到原有的类名
$('div').addClass("box");
还可以为匹配的元素添加多个类名
$('div').addClass("box box2");//追加多个类名
//从所有匹配的元素中删除全部或者指定的类。
//移除指定的类(一个或多个)
$('div').removeClass('box');
//移除全部的类
$('div').removeClass();
#案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
<style type="text/css">
/* 定义类属性changeColor */
.changeColor{
color: #6DA5FF;
}
</style>
</head>
<body>
<ul>
<li class="item">张三</li>
<li class="item">李四</li>
<li class="item">王五</li>
</ul>
<script type="text/javascript">
$(function(){
$('ul li').click(function(){
// this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
$(this).addClass('changeColor').siblings('li').removeClass('changeColor');
})
})
</script>
</body>
</html>
toggleClass
如果存在(不存在)就删除(添加)一个类。
$('span').click(function(){
//动态的切换class类名为active
$(this).toggleClass('active')
})
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
<style type="text/css">
/* 定义类属性changeColor */
.changeColor{
color: #6DA5FF;
}
</style>
</head>
<body>
<ul>
<li class="item">张三</li>
<li class="item">李四</li>
<li class="item">王五</li>
</ul>
<script type="text/javascript">
$(function(){
$('ul li').click(function(){
// this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
$(this).toggleClass("changeColor");
})
})
</script>
</body>
</html>
也就是如果存在就删除,不存在就添加的意思;
点击后颜色去掉,再次点击颜色由于不存在所以又出现;