jQuery中removeClass()方法用法實(shí)例

更新時(shí)間：2015年01月05日 11:32:39 投稿：shichen2014

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

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

此方法從匹配元素刪除一個(gè)或多個(gè)類。
根據(jù)方法參數(shù)的不同，有以下幾種語法結(jié)構(gòu)。

語法結(jié)構(gòu)一:
方法沒有參數(shù)。把匹配元素所有的類都移除。

復(fù)制代碼代碼如下:

$(selector).removeClass()

實(shí)例代碼:

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

復(fù)制代碼代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="author" content="http://m.fzitv.net/" />

<title>removeClass()函數(shù)-腳本之家</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>點(diǎn)擊查看效果</button>

</body>

</html>

語法結(jié)構(gòu)二:

移除匹配元素中指定的類

復(fù)制代碼代碼如下:

$(selector).removeClass(class)

參數(shù)	描述
class	一個(gè)或多個(gè)要?jiǎng)h除的CSS類名。類名之間用空格分隔。

實(shí)例代碼:

實(shí)例一:

復(fù)制代碼代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="author" content="http://m.fzitv.net/" />

<title>removeClass()函數(shù)-腳本之家</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>點(diǎn)擊查看效果</button>

</body>

</html>

移除一個(gè)指定的類。

實(shí)例二:

復(fù)制代碼代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="author" content="http://m.fzitv.net/" />

<title>removeClass()函數(shù)-腳本之家</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>點(diǎn)擊查看效果</button>

</body>

</html>

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

語法結(jié)構(gòu)三:

復(fù)制代碼代碼如下:

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

函數(shù)返回要移除的類名。

參數(shù)列表:

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

實(shí)例代碼:

實(shí)例一:

復(fù)制代碼代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="author" content="http://m.fzitv.net/" />

<title>removeClass()函數(shù)-腳本之家</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>點(diǎn)擊查看效果</button>

</body>

</html>

用函數(shù)作為參數(shù)，函數(shù)返回一個(gè)要?jiǎng)h除的CSS類名。

實(shí)例二:

復(fù)制代碼代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="author" content="http://m.fzitv.net/" />

<title>removeClass()函數(shù)-腳本之家</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>點(diǎn)擊查看效果</button>

</body>

</html>