jQuery UI 实例 - 移除 Class(Remove Class)
jQuery UI 实例 - 移除 Class(Remove Class)
在 jQuery UI 中,有一个常用的方法是 removeClass()
,可以用来删除元素的一个或多个加入的 class。
语法
$(selector).removeClass(classname,function(index,currentclass));
参数说明
selector
: 必选。规定要移除 class 的元素。classname
: 可选。要移除的一个或多个 class 名称,以空格分隔,也可以为函数。function(index,currentclass)
: 可选。返回一个或多个要移除的 class 名称。函数参数index
表示 class 名称在数组中的索引位置,currentclass
表示正在被遍历的当前元素。
示例
HTML 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery UI 实例 - 移除 Class</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-ui-css/1.12.1/jquery-ui.css">
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-ui/1.12.1/jquery-ui.min.js"></script>
<style>
.red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}
.bold {
font-weight: bold;
}
</style>
</head>
<body>
<p class="red green bold">Hello World!</p>
<p class="blue green">Welcome to jQuery UI</p>
<button id="remove">移除 Class</button>
<script>
$(document).ready(function(){
$("#remove").click(function(){
$("p").removeClass("red green").addClass(function(){
return $(this).prev().attr("class");
});
});
});
</script>
</body>
</html>
解释:
- 第一个
<p>
元素有三个 class 名称:red
、green
和bold
。 - 第二个
<p>
元素有两个 class 名称:blue
和green
。 - 点击“移除 Class”按钮后,jQuery 会移除第一个
<p>
元素中的red
和green
class 名称,并为其添加blue
和green
class 名称。此时,第一个<p>
元素中的 class 名称为blue
、green
和bold
。 - 此时,第二个
<p>
元素中的 class 名称仍然为blue
和green
。
总结
removeClass()
方法用来删除元素的一个或多个 class,语法简洁明了,非常易用,常被用作动态修改元素的样式。