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

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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 5,631评论 0 11
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 8,893评论 0 44
  • jQuery的属性与样式之.attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途...
    阿r阿r阅读 3,878评论 0 6
  • jQuery基础(一)——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
    croyance0601阅读 4,760评论 0 8
  • 花如雪,雪似花,交替绿窗纱。 合则好,分亦佳,最烦他,人两地还心一涯。
    陶然忘机阅读 1,544评论 6 4

友情链接更多精彩内容