jQuery 操作類樣式
1、addClass()向匹配的元素新增指定的類名
addClass() 方法向被選元素新增一個或多個類。該方法不會移除已存在的 class 屬性，僅僅新增一個或多個 class 屬性。提示：如需新增多個類，請使用空格分隔類名。
語法：$(selector).addClass(class)
class必需。規定一個或多個 class 名稱。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p:first").addClass("intro"); }); }); </script> <style type="text/css"> .intro { font-size:120%; color:red; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>向第一個 p 元素新增一個類</button> </body> </html>
使用函式向被選元素新增類。
語法：$(selector).addClass(function(index,oldclass))
function(index,oldclass) 必需。規定返回一個或多個待新增類名的函式。
index - 可選。選擇器的 index 位置。
class - 可選。選擇器的舊的類名。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $('p').addClass(function(n){ return 'par_' + n; }); }); }); </script> <style type="text/css"> .par_0 { color:blue; } .par_1 { color:red; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>向 p 元素新增類</button> </body> </html>
2、removeClass()從所有匹配的元素中刪除全部或者指定的類
removeClass() 方法從被選元素移除一個或多個類。註釋：如果沒有規定引數，則該方法將從被選元素中刪除所有類。
語法：$(selector).removeClass(class)
class可選。規定要移除的 class 的名稱。如需移除若干類，請使用空格來分隔類名。如果不設定該引數，則會移除所有類。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").removeClass("intro"); }); }); </script> <style type="text/css"> .intro { font-size:120%; color:red; } </style> </head> <body> <h1 id="h1">This is a heading</h1> <p class="intro">This is a paragraph.</p> <p>This is another paragraph.</p> <button>從第一個段落中刪除類</button> </body> </html>
使用函式來移除類，使用函式來刪除被選元素中的類。
語法：$(selector).removeClass(function(index,oldclass))
function(index,oldclass)必需。通過執行函式來移除指定的類。
index - 可選。接受選擇器的 index 位置。
html - 可選。接受選擇器的舊的類值。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$('ul li').removeClass(function() {
return 'listitem_' + $(this).index();
});
});
});
</script>
<style type="text/css">
.listitem_1, .listitem_3
{
color:red;
}
.listitem_0, .listitem_2
{
color:blue;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1>
<ul>
<li class="listitem_0">Apple</li>
<li class="listitem_1">IBM</li>
<li class="listitem_2">Microsoft</li>
<li class="listitem_3">Google</li>
</ul>
<button>刪除列表項中的類</button>
</body>
</html>
3、toggleClass() 切換樣式
toggleClass() 對設定或移除被選元素的一個或多個類進行切換。該方法檢查每個元素中指定的類。如果不存在則新增類，如果已設定則刪除之。這就是所謂的切換效果。不過，通過使用 "switch" 引數，您能夠規定只刪除或只新增類。
語法：$(selector).toggleClass(class,switch)
class必需。規定新增或移除 class 的指定元素。如需規定若干 class，請使用空格來分隔類名。
switch可選。布林值。規定是否新增或移除 class。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切換段落的 "main" 類</button>
</body>
</html>
使用函式來切換類
語法：$(selector).toggleClass(function(index,class),switch)
function(index,class) 必需。規定返回需要新增或刪除的一個或多個類名的函式。
index - 可選。接受選擇器的 index 位置。
class - 可選。接受選擇器的當前的類。
switch 可選。布林值。規定是否新增(true)或移除(false)類。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$('ul li').toggleClass(function(){
return 'listitem_' + $(this).index();
});
});
});
</script>
<style type="text/css">
.listitem_1, .listitem_3
{
color:red;
}
.listitem_0, .listitem_2
{
color:blue;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1>
<ul>
<li>Apple</li>
<li>IBM</li>
<li>Microsoft</li>
<li>Google</li>
</ul>
<button class="btn1">新增或移除列表項的類</button>
</body>
</html>
4、hasClass()檢查匹配的元素是否擁有指定的類
hasClass() 方法檢查被選元素是否包含指定的 class。
語法：$(selector).hasClass(class)
class必需。規定需要在指定元素中查詢的類。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert($("p:first").hasClass("intro"));
});
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1>
<p class="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>檢查第一個段落是否擁有類 "intro"</button>
</body>
</html>