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

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'));

效果：

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>

效果：

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

效果：

做一个小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'
效果：

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);//代表没有时不添加，一直没有此类名