前端提高篇(八十六)：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);//代表没有时不添加，一直没有此类名