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