jQuery removeClass()的应用实例
removeClass()方法是jQuery内置的一个方法,用于从选定的元素中删除一个或多个类名。
语法:
$(selector).removeClass(class_name, function(index, current_class_name))
参数:该函数接受上面提到的和下面描述的两个参数。
- class_name: 这是一个可选参数,用于指定要删除的类名(一个或多个类)。多个类名用空格隔开。
- function。这是一个可选参数,它返回一个或多个需要被删除的类名。
- index。该参数用于返回元素的索引。
- current_class_name: 这个参数返回所选元素的类别名称。
返回值:该方法返回具有指定删除类名称的选定元素。
下面的例子说明了jQuery中的removeClass()方法。
示例 1:
<html>
<head>
<title>The removeClass Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
(document).ready(function() {
("p").click(function() {
$("p").removeClass("GFG");
});
});
</script>
<style>
.GFG {
font-size: 120%;
color: green;
font-weight: bold;
font-size: 35px;
}
div {
width: 50%;
height: 200px;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div>
<!-- click on any paragraph and see the change -->
<p class="GFG">Welcome to</p>
<p class = "GFG">GeeksforGeeks</p>
</div>
</body>
</html>
输出:
在点击该段之前。
点击该段后。
例子2:这个例子不包含参数。这将删除所选元素的所有类。
<!DOCTYPE html>
<html>
<head>
<title>The removeClass Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
(document).ready(function() {
("p").click(function() {
$("p").removeClass();
});
});
</script>
<style>
.GFG {
font-size: 120%;
color: green;
font-weight: bold;
font-size: 35px;
}
div {
width: 300px;
height: 200px;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div>
<!-- click on any paragraph and see the change -->
<p class="GFG">Welcome to </p>
<p class="GFG">GeeksforGeeks!</p>
</div>
</body>
</html>
输出:
在点击该段之前。
点击该段后。