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和greenclass 名称，并为其添加blue和greenclass 名称。此时，第一个<p>元素中的 class 名称为blue、green和bold。 - 此时，第二个
<p>元素中的 class 名称仍然为blue和green。
总结
removeClass() 方法用来删除元素的一个或多个 class，语法简洁明了，非常易用，常被用作动态修改元素的样式。