在jQuery中，所謂的“CSS類名操作”類名操作其實就是為元素添加某個類名、刪除某個類名等。
在jQuery中，類名操作包括：添加類名、刪除類名、切換類名這3種情況。
在jQuery中，我們可以使用addClass()方法為元素添加類名。
語法：
$().addClass("類名")
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.myLi
{
color:Red;
background-color:#F1F1F1;
font-weight:bold;
}
</style>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("ul li:nth-child(odd)").addClass("myLi");
})
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input id="btn" type="button" value="添加" />
</body>
</html>
在浏覽器預覽效果如下：
當我們點擊“添加”按鈕之後，在浏覽器預覽效果如下：
分析：
大家拿這個例子，跟設置多個CSS屬性值的例子對比一下就知道：當需要使用jQuery為某些元素設置太多的CSS樣式時，如果使用css()這個方法，jQuery裡面的代碼會顯得比較臃腫。因此，我們更傾向於先在CSS代碼中定義一個類，在這個類中定義相應的CSS代碼，然後再使用jQuery對這個類名進行相應的添加、刪除、切換，從而達到對樣式進行批量操作，這就是CSS類名操作的真正意義所在！
在jQuery中，我們可以使用removeClass()為元素刪除類名。
語法：
$().removeClass("類名")
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.myLi
{
color:Red;
background-color:#F1F1F1;
font-weight:bold;
}
</style>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#add").click(function () {
$("ul li:nth-child(odd)").addClass("myLi");
});
$("#remove").click(function () {
$("ul li:nth-child(odd)").removeClass("myLi");
});
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input id="add" type="button" value="添加" />
<input id="remove" type="button" value="刪除" />
</body>
</html>
在浏覽器預覽效果如下：
分析：
在這裡，我們使用addClass()方法為元素添加類名，使用removeClass()方法為元素刪除類名，很方便地對元素的大量樣式進行一次性地操作。
在jQuery中，我們可以使用toggleClass()方法為元素切換類名。toggle就是“切換”的意思，在後面課程裡面我們會大量接觸這個單詞，例如toggle()、slideToggle()等等，希望大家留個心眼理解一下。
語法：
$().toggleClass("類名")
說明：
toggleClass()方法用於檢查元素是否具有某個類名。如果類名不存在，則為該元素添加類名；如果類名已存在，則為該元素刪除類名。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.myLi
{
color:Red;
background-color:#F1F1F1;
font-weight:bold;
}
</style>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#add").click(function () {
$("ul li:nth-child(odd)").toggleClass("myLi");
});
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input id="add" type="button" value="切換" />
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡使用toggleClass()方法來切換類名，使得元素可以在“默認樣式”以及“class樣式”之間來回切換。我們點擊一次“切換”按鈕，元素就會切換到類名為myLi的樣式，然後再點擊一次“切換”按鈕，元素又會切換到默認樣式。
從這一節的學習我們知道，使用jQuery操作CSS類名是相當有用的。我們把一大塊CSS代碼封裝到一個類中，這樣使得我們每次只需要對類名進行操作即可，而無需在jQuery中使用css()方法編寫大量的樣式控制代碼，使得我們的jQuery代碼精簡便於維護。當然，當樣式較少的時候，我們還是使用css()方法比較方便。
總結一下：使用jQuery操作元素樣式時，當樣式比較少，建議使用“CSS屬性操作”；當樣式比較多時，建議使用“CSS類名操作”。