類樣式的操作：指對DOM屬性className進行添加、移除操作。比如addClass()、removeClass()、toggleClass()。
1. addClass()
1.1 概述
$(selector).addClass(className)
className
類型： String
為每個比對元素所要增加的一個或多個樣式名
傳回值：jQuery
描述： 為每個比對的元素添加指定的樣式類名
1.2 為比對到的元素添加指定類名
格式為： $(selector).addClass("className");
1 <!doctype html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <title>addClass Demo</title>
6 <script type="text/javascript" src="jquery.js"></script>
7 <script type="text/javascript">
8 $(function () {
9 $("div").addClass("divClass2");
10 })
11 </script>
12 </head>
13 <body>
14 <div class="divClass1"></div>
15 </body>
16 </html> 1.3 為比對到的元素添加多個類名
格式為：
＄(selector).addClass("className1 className2")
示例代碼：
1 <!doctype html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <title>addClass() Demo</title>
6 <script type="text/javascript" src="jquery.js"></script>
7 <script type="text/javascript">
8 $(function () {
9 $("div").addClass("divClass1 divClass2")
10 })
11 </script>
12 </head>
13 <body>
14 <div></div>
15 </body>
16 </html> 2. removeClass()
從所有比對的元素中删除全部或者指定的類
2.1 移除指定的單個類
格式： $(selector).removeClass("className");
示例代碼：
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>removeClass Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("div").removeClass("className1");
$("div").removeClass("className2");
})
</script>
</head>
<body>
<div class="className1 className2"></div>
</body>
</html> 2.2 移除指定的多個類
格式： $(selector).removeClass("className1 className2");
示例代碼：
1 <!doctype html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <title>removeClass() Demo</title>
6 <script type="text/javascript" src="jquery.js"></script>
7 <script type="text/javascript">
8 $(function () {
9 $("div").removeClass("className1 className2");
10 })
11 </script>
12 </head>
13 <body>
14 <div class="className1 className2"></div>
15 </body>
16 </html> 2.3 移除全部的類
格式:
$(selector).removeClass();
示例代碼：
1 <!doctype html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <title>removeClass() Demo</title>
6 <script type="text/javascript" src="jquery.js"></script>
7 <script type="text/javascript">
8 $(function () {
9 $("div").removeClass();
10 })
11 </script>
12 </head>
13 <body>
14 <div class="className1 className2"></div>
15 </body>
16 </html> 2.4 removeClass()案例， 解決“排他”問題
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>removeClass() Demo</title>
<style type="text/css">
.active{
color: red;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$("ul li").click(function () {
$(this).addClass("active").siblings("li").removeClass("active");
})
})
</script>
</head>
<body>
<ul>
<li class="item">This is the first line.</li>
<li class="item">This is the second line.</li>
<li class="item">This is the third line.</li>
<li class="item">This is the fourth line.</li>
</ul>
</body>
</html> 3. toggleClass()
作用： 如果存在（不存在）就删除（添加）一個類
格式： $(selector).toggleClass("className");
示例代碼：
1 <!doctype html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <title>toggleClass() Demo</title>
6 <style type="text/css">
7 .active{
8 color: red;
9 }
10 </style>
11 <script type="text/javascript" src="jquery.js"></script>
12 <script type="text/javascript">
13 $(function () {
14 $("p").click(function () {
15 $("p").toggleClass("active");
16 });
17 })
18 </script>
19 </head>
20 <body>
21 <p>This is the test.</p>
22 </body>
23 </html> 轉載于:https://www.cnblogs.com/yang-wei/p/9507787.html
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)