jQuery中removeClass()方法用法實例

2024-05-06 16:13:44

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jQuery中removeClass()方法用法,實例分析了removeClass()方法的功能、定義及從匹配元素刪除一個或多個類的使用技巧,需要的朋友可以參考下

本文實例講述了jQuery中removeClass()方法用法。分享給大家供大家參考。具體分析如下：

此方法從匹配元素刪除一個或多個類。
根據方法參數的不同，有以下幾種語法結構。

語法結構一:
方法沒有參數。把匹配元素所有的類都移除。

復制代碼代碼如下:

$(selector).removeClass()

實例代碼:

代碼可以將div的所有css類刪除。

復制代碼代碼如下:

		
		<!DOCTYPE HTML>
		<html>
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="author" content="http://www.49028c.com/" />
		<title>removeClass()函數-武林網</title>
		<style type="text/css">
		.font{
		  font-size:18px;
		  color:yellow
		}
		.bg{
		  background:#336;
		}
		</style>
		<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
		  $("button").click(function(){
		    $("div").removeClass();
		  });
		})
		</script>
		</head>
		<body>
		<div class="font bg">武林網歡迎您</div>
		<button>點擊查看效果</button>
		</body>
		</html>

語法結構二:

移除匹配元素中指定的類

復制代碼代碼如下:

$(selector).removeClass(class)

參數	描述
class	一個或多個要刪除的CSS類名。類名之間用空格分隔。

實例代碼:

實例一:

復制代碼代碼如下:

		
		<!DOCTYPE HTML>
		<html>
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="author" content="http://www.49028c.com/" />
		<title>removeClass()函數-武林網</title>
		<style type="text/css">
		.font{
		  font-size:18px;
		  color:yellow
		}
		.bg{background:#336;}
		</style>
		<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
		  $("button").click(function(){
		    $("div").removeClass("font");
		  });
		})
		</script>
		</head>
		<body>
		  <div class="font bg">武林網歡迎您</div>
		  <button>點擊查看效果</button>
		</body>
		</html>

移除一個指定的類。

實例二:

復制代碼代碼如下:

		
		<!DOCTYPE HTML>
		<html>
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="author" content="http://www.49028c.com/" />
		<title>removeClass()函數-武林網</title>
		<style type="text/css">
		.font{
		  font-size:18px;
		  color:yellow
		}
		.bg{background:#336;}
		</style>
		<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
		  $("button").click(function(){
		    $("div").removeClass("font bg");
		  });
		})
		</script>
		</head>
		<body>
		<div class="font bg">武林網歡迎您</div>
		<button>點擊查看效果</button>
		</body>
		</html>

移除兩個CSS類，類名之間用空格分隔。

語法結構三:

復制代碼代碼如下:

$(selector).removeClass(function(index,oldclass))

函數返回要移除的類名。

參數列表:

參數	描述
function(index,oldclass)	方法返回一個或多個空格分隔的要被移除的class名。 index - 可選，接受選擇器的index 位置。 oldclass - 可選，接受選擇器的原有類值。

實例代碼:

實例一:

復制代碼代碼如下:

		
		<!DOCTYPE HTML>
		<html>
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="author" content="http://www.49028c.com/" />
		<title>removeClass()函數-武林網</title>
		<style type="text/css">
		.font{
		  font-size:18px;
		  color:yellow
		}
		.bg{background:#336;}
		</style>
		<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
		  $("button").click(function(){
		    $("div").removeClass(function(){
		      return "font"
		    });
		  });
		})
		</script>
		</head>
		<body>
		  <div class="font bg">武林網歡迎您</div>
		  <button>點擊查看效果</button>
		</body>
		</html>

用函數作為參數，函數返回一個要刪除的CSS類名。

實例二:

復制代碼代碼如下:

		
		<!DOCTYPE HTML>
		<html>
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="author" content="http://www.49028c.com/" />
		<title>removeClass()函數-武林網</title>
		<style type="text/css">
		.font{
		  font-size:18px;
		  color:yellow
		}
		.bg{background:#336;}
		</style>
		<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
		  $("button").click(function(){
		    $("div").removeClass(function(){
		      return "font bg"
		    });
		  });
		})
		</script>
		</head>
		<body>
		<div class="font bg">武林網歡迎您</div>
		<button>點擊查看效果</button>
		</body>
		</html>