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