jQuery中removeClass()方法用法實(shí)例
更新時(shí)間：2015年01月05日 11:32:39 投稿：shichen2014
這篇文章主要介紹了jQuery中removeClass()方法用法,實(shí)例分析了removeClass()方法的功能、定義及從匹配元素刪除一個(gè)或多個(gè)類的使用技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery中removeClass()方法用法。分享給大家供大家參考。具體分析如下：
此方法從匹配元素刪除一個(gè)或多個(gè)類。
根據(jù)方法參數(shù)的不同，有以下幾種語(yǔ)法結(jié)構(gòu)。
語(yǔ)法結(jié)構(gòu)一:
方法沒(méi)有參數(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://chabaoo.cn/" />
<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>
語(yǔ)法結(jié)構(gòu)二:
移除匹配元素中指定的類
復(fù)制代碼 代碼如下:
$(selector).removeClass(class)
實(shí)例代碼:
實(shí)例一:
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<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://chabaoo.cn/" />
<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類，類名之間用空格分隔。
語(yǔ)法結(jié)構(gòu)三:
復(fù)制代碼 代碼如下:
$(selector).removeClass(function(index,oldclass))
函數(shù)返回要移除的類名。
參數(shù)列表:
實(shí)例代碼:
實(shí)例一:
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<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://chabaoo.cn/" />
<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>
用函數(shù)作為參數(shù)，函數(shù)返回兩個(gè)要?jiǎng)h除的CSS類名，類名之間用空格分隔。
您可能感興趣的文章:
- 使用JS實(shí)現(xiàn)jQuery的addClass, removeClass, hasClass函數(shù)功能
- jQuery使用addClass()方法給元素添加多個(gè)class樣式
- jQuery中addClass()方法用法實(shí)例
- Jquery.addClass始終無(wú)效原因分析
- jQuery源碼解讀之a(chǎn)ddClass()方法分析
- jQuery使用removeClass方法刪除元素指定Class的方法
- jQuery源碼解讀之removeClass()方法分析
- jQuery中toggleClass()方法用法實(shí)例
- jQuery使用toggleClass方法動(dòng)態(tài)添加刪除Class樣式的方法
- 用jQuery toggleClass 實(shí)現(xiàn)鼠標(biāo)移上變色
- JQuery使用屬性addClass、removeClass和toggleClass實(shí)現(xiàn)增加和刪除類操作示例
相關(guān)文章
jquery獲得同源iframe內(nèi)body下標(biāo)簽的值的方法
這篇文章主要介紹了jquery獲得同源iframe內(nèi)body下標(biāo)簽的值的方法,很簡(jiǎn)單，很實(shí)用，需要的朋友可以參考下2014-09-09
jquery操作iframe實(shí)現(xiàn)父頁(yè)面和子頁(yè)面相互操作的九種情況
現(xiàn)實(shí)開(kāi)發(fā)中難免會(huì)遇到子頁(yè)面、父頁(yè)面相互操作的情況,本文主要介紹了jquery操作iframe實(shí)現(xiàn)父頁(yè)面和子頁(yè)面相互操作的九種情況,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
本文目的：為了了解stop()的用法，舉個(gè)例子，直觀的方式看看。非常的簡(jiǎn)單實(shí)用，有需要的小伙伴參考下2014-11-11
jquery.messager.js插件導(dǎo)致頁(yè)面抖動(dòng)的解決方法
這盤(pán)文章介紹了jquery.messager.js插件導(dǎo)致頁(yè)面抖動(dòng)的解決方法，有需要的朋友可以參考一下2013-07-07
jQuery實(shí)現(xiàn)MSN中文網(wǎng)滑動(dòng)Tab菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)MSN中文網(wǎng)滑動(dòng)Tab菜單效果代碼,基于jQuery鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面元素屬性動(dòng)態(tài)切換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
Javascript jquery css 寫(xiě)的簡(jiǎn)單進(jìn)度條控件
很多的時(shí)候用戶需要等待你“臃腫”的 Javascript 代碼處理完成（Web 2.0 的特色）。期間或許加入一個(gè)類似于進(jìn)度條的東西讓用戶有點(diǎn)“安慰”。這個(gè)東西實(shí)現(xiàn)起來(lái)并不復(fù)雜，無(wú)非就是獲得總的處理?xiàng)l目，然后獲得一個(gè)百分比，再顯示輸出。2008-03-03
jquery的index方法實(shí)現(xiàn)tab效果
jquery的index方法實(shí)現(xiàn)tab效果，需要的朋友可以參考下。2011-02-02
jquery按回車鍵實(shí)現(xiàn)表單提交的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery按回車鍵實(shí)現(xiàn)表單提交的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jQuery實(shí)現(xiàn)圖片滑動(dòng)效果
本文主要介紹了jQuery實(shí)現(xiàn)圖片滑動(dòng)效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
jQuery+css實(shí)現(xiàn)的換頁(yè)標(biāo)簽欄效果
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的換頁(yè)標(biāo)簽欄效果,涉及jQuery動(dòng)態(tài)操作頁(yè)面元素構(gòu)造換頁(yè)標(biāo)簽的相關(guān)技巧,需要的朋友可以參考下2016-01-01