jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()


Posted in jQuery onMarch 31, 2021

1.addClass()与removeClass()基本使用

addClass:添加class;removeClass:移除class,返回this对象,支持链式操作

$('div').addClass('test').removeClass('test');

另:
当一个方法要取值时返回要取的值;不需要返回时,返回this对象,方便链式调用
就像text(),当取文本时,返回文本;设置文本时,返回this

console.log ($('div').text());
console.log ($('div').text('newDiv'));

效果:
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()

2.addClass()与removeClass()参数可以是字符串也可以是函数

函数有索引和class名两个参数
当索引值为偶数时,背景颜色改变,将背景颜色的设置放在.activate下:

li {
    list-style: none;
    width: 300px;
}
.activate {
    background: #ccc;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
    $('li').addClass(function(index){
        if (index%2 ==0){
            return 'activate';//索引值符合条件,就给该元素加上activate类名
        }
    })
</script>

效果:
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()

3.想要设置多个class名,空格分开即可

jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
效果:
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()

做一个小demo

有一个简易菜单,可以点击商品和取消选中商品;点中商品时,商品栏呈蓝色背景,白色字色
css样式:

body,ul,li {
    padding: 0;
    margin: 0;
    list-style: none;
}
.item {
    width: 300px;
    background: #ededed;
    margin: 10px;
    border-radius: 10px;
}
p {
    margin: 0 10px;
    padding: 10px 0;
}
span {
    float: right;
}
button {
    width: 100px;
    color: #23a1ec;
    border-radius: 10px;
    border: 1px solid #23a1ec;
    outline: none;
    background: #fff;
    margin: 10px;
    padding: 10px;
}
.activate {
    background: #23a1ec;
    color: #fff;
} /*选中时的样式*/

菜单:

<ul>
    <li class="item">
        <p>枸杞
            <span>¥20</span>
        </p>
    </li>
    <li class="item">
        <p>红枣
            <span>¥20</span>
        </p>
    </li>
    <li class="item">
        <p>可乐
        <span>¥20</span>
        </p>
    </li>
    <li class="item">
        <p>雪碧
        <span>¥20</span>
        </p>
    </li>
    <button>buy</button>
</ul>

jq:

$('li').click(function(){
    if ( $(this).attr('class') == 'item activate' ){
        $(this).removeClass('activate');
    }else {
        $(this).addClass('activate');
    }
        
    }
)

此处的this指的是被点击的原生dom元素(其他li没有受影响),但原生dom没有addClass方法,需要转成jQuery对象,所以用$(this)

attr('class')获取的是全部类名,所以有acivate类名时要写全:'item activate'
效果:
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()

4.hasClass(‘className’)

上面的代码,在判断是否有activate时,要写全部的class名,比较麻烦,可以用hasClass判断,被匹配到的dom元素有没有其中一个有指定的类名,只要有一个元素有这个类名,就返回true

<div class="item">div1</div>
<div class="item">div2</div>
<div class="a">div3</div>
<div class="item">div4</div>
<div class="item">div5</div>

<script src="./jQuery/jquery-3.6.0.js"></script>
<script>
    console.log(
        $('div').hasClass('a')
    );
</script>

输出结果为:true,div里有包含’a’类名即可

改造前面那个小demo的jQ代码:
当有activate类名,就取消掉这个类名,没有就加上;
此处添加了click事件,被影响的只有当前被选中的这个元素,不影响其他li;

$('li').click(function(){
    if ( $(this).hasClass('activate') ){
        $(this).removeClass('activate');
    }else {
        $(this).addClass('activate');
    }
    }
)

效果依然

5.toggleClass(‘className’)

使用toggleClass方法,可以免去自己判断是否有某类名的操作
当dom元素没有这个类名时,自动添加;有这个类名时,自动移除

$('li').click(function(){
    $(this).toggleClass('activate');
    }//点击时,如果元素没有activate类名,就加上,有就移除activate
)

效果依旧
toggleClass还有第二个参数,true代表添加,false代表不添加

$(this).toggleClass('activate', true);//代表没有时添加该类名,有时不移除
$(this).toggleClass('activate', false);//代表没有时不添加,一直没有此类名
jQuery 相关文章推荐
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jquery插件实现搜索历史
Apr 24 jQuery
jQuery treeview树形结构应用
Mar 24 #jQuery
jQuery实现鼠标拖动图片功能
Mar 04 #jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 #jQuery
jquery实现广告上下滚动效果
Mar 04 #jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 #jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 #jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 #jQuery
You might like
谨慎使用PHP的引用原因分析
2012/09/06 PHP
php简单压缩css样式示例
2016/09/22 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
jquery 分页控件实现代码
2009/11/30 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python基于百度云文字识别API
2018/12/13 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
Python自带的IDE在哪里
2020/07/01 Python
python requests库的使用
2021/01/06 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
毕业生面试求职信
2014/06/23 职场文书
语文教育专业求职信
2014/06/28 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
2014年社区工作总结
2014/11/18 职场文书
2015年加油站工作总结
2015/05/13 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android