本文主要是介绍jq: 属性-class，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
.aadClass() 添加class
用法和前面的text方法一样，可以传字符串，可以传函数。值用空格隔开可以增加多个class
<div>给我安排class</div>
<div>给我安排class</div>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>$('div').addClass('test');
</script>
.removeClass() 移出class值
<div class="test">给我移出class</div>
<div class="test">给我移出class</div>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>$('div').removeClass('test');
</script>
他们在一起也可以链式调用。
链式调用: 取值的时候返回return结果，赋值返回this,表示可以继续调用。
做个小demo，点击添加背景颜色，再点击取消。
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>demo</title><style>ul, li {list-style: none;}.item {width: 150px;margin: 10px 0;font-size: 20px;color: #ffa400;border: 1px solid #ccc;border-radius: 10%;}.active {color: #fff;background: #a3d900;}</style>
</head>
<body><ul><li class="item">可乐 ￥3.0</li><li class="item">雪碧 ￥3.0</li><li class="item">营养快线 ￥4.0</li><li class="item">芬达 ￥3.0</li><li class="item">冰红茶 ￥3.0</li><li class="item">加多宝 4.0</li></ul>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>$('.item').click(function() {console.log(this); // 这个this指向点击谁的dom
if($(this).attr('class') == 'item active') { // 这里要写两个class, 不仅仅active, 还有item， 不然找不到
$(this).removeClass('active');}else{$(this).addClass('active'); // 这个this是原生dom，在jq中使用原生dom
// this.addClass('active'); // 这样不能写，原生dom没有addClass方法
}})
</script>
</body>
</html>
优化1:
hasClass() 判断class是否有某个属性
有返回true，没有返回false
$('.item').click(function() {if($(this).hasClass('active')) {$(this).removeClass('active');}else{$(this).addClass('active');}
})
功能还是一样。
优化2:
toggleClass() 判断class中是否有某个属性， 有就删除，没有就增加
$('.item').click(function() {$(this).toggleClass('active')
})
省了多少代码...
功能一样。
这篇关于jq: 属性-class的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
