jQuery的属性与样式之删除样式.removeClass()

作者: 土豆萝卜君 | 来源:发表于2017-08-14 16:29 被阅读0次

jQuery的属性与样式之删除样式.removeClass()
jQuery学习笔记（二）样式篇
jQuery的DOM操作2
day9-jQuery
jquery
jQuery 样式操作
jQuery 属性、样式操作
jQuery中的样式操作
jQuery（样式和DOM）
JQuery CSS

jQuery通过.addClass()方法可以很便捷的增加样式。如果需要样式之间的切换，同样jQuery提供了一个很方便的.removeClass()，它的作用是从匹配的元素中删除全部或者指定的class

.removeClass( )方法

.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
.removeClass( function(index, class) ) ：一个函数，返回一个或多个将要被移除的样式名
注意事项

如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除。如果没有样式名作为参数，那么所有的样式类将被移除

<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() 方法允许我们指定一个函数作为参数，返回将要被删除的样式
    $('.right > div:first').removeClass(function(index,className){
        
        //className = aa bb imoocClass
        //把div的className赋给下一个兄弟元素div上作为它的class
        $(this).next().addClass(className)

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


</script>

</body>