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中的deferred使用方法
Mar 27 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery实现滚动效果
Nov 17 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
jQuery实现动态加载瀑布流
Sep 01 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
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
php url路由入门实例
2014/04/23 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
JavaScript While 循环基础教程
2007/04/05 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
python绘制条形图方法代码详解
2017/12/19 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
项目投资建议书
2014/05/16 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
大学生个人学年总结
2015/02/15 职场文书
党员理论学习心得体会
2016/01/21 职场文书
MySQL批量更新不同表中的数据
2022/05/11 MySQL
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技