jQuery的屬性與樣式之刪除樣式.removeClass()

jQuery通過.addClass()方法可以很便捷的增加樣式。如果需要樣式之間的切換,同樣jQuery提供了一個很方便的.removeClass(),它的作用是從匹配的元素中刪除全部或者指定的class

.removeClass( )方法

.removeClass( [className ] ):每個匹配元素移除的一個或多個用空格隔開的樣式名
.removeClass( function(index, class) ) : 一個函數(shù),返回一個或多個將要被移除的樣式名
注意事項

如果一個樣式類名作為一個參數(shù),只有這樣式類會被從匹配的元素集合中刪除 。 如果沒有樣式名作為參數(shù),那么所有的樣式類將被移除

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left,
.right {
    width: 300px;
    height: 120px;
}

.left div,
.right div {
    width: 100px;
    height: 90px;
    padding: 5px;
    margin: 5px;
    float: left;
    border: 1px solid #ccc;
}
    
.newClass{
    background: #bbffaa;
}

.imoocClass{
    background: red;
}

</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head><body>

<h2>.removeClass()方法</h2>
<div class="left">
    <div class="aaron newClass">
        <p>newClass</p>
    </div>
    <div class="aaron newClass">
        <p>newClass</p>
    </div>
</div>
<div class="right">
    <div class="aa bb imoocClass">
        <article>
            <p>imoocClass</p>
        </article>
    </div>
    <div>
        <article>
            <p>imoocClass</p>
        </article>
    </div>
</div>

<script type="text/javascript"> 
    //class=left下div元素刪除newClass樣式
    $('.left div').removeClass('newClass')
</script>


<script type="text/javascript"> 
    //.removeClass() 方法允許我們指定一個函數(shù)作為參數(shù),返回將要被刪除的樣式
    $('.right > div:first').removeClass(function(index,className){
        
        //className = aa bb imoocClass
        //把div的className賦給下一個兄弟元素div上作為它的class
        $(this).next().addClass(className)

        //刪除自己本身的imoocClass
        return 'imoocClass'
    })


</script>

</body>

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 第一章 jQuery簡介 1-1 jQuery簡介 1.簡介 2.優(yōu)勢 3.特性與工具方法 1-2 環(huán)境搭建 進入...
    mo默22閱讀 1,773評論 0 11
  • 一、樣式篇 第1章 初識jQuery (1)環(huán)境搭建 進入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,665評論 0 44
  • jQuery的屬性與樣式之.attr()與.removeAttr() 每個元素都有一個或者多個特性,這些特性的用途...
    阿r阿r閱讀 700評論 0 6
  • jQuery基礎(一)——樣式篇 1-2環(huán)境搭建 1-3 jQuery HelloWorld體驗 $(docume...
    croyance0601閱讀 1,162評論 0 8
  • 花如雪,雪似花,交替綠窗紗。 合則好,分亦佳,最煩他,人兩地還心一涯。
    陶然忘機閱讀 224評論 6 4

友情鏈接更多精彩內(nèi)容