jquery 添加类
使用 jQuery 添加类的方法
jQuery 提供了多种方法来为元素添加类,以下是常用的几种方式:
使用 .addClass() 方法
这是最常用的方法,可以为选中的元素添加一个或多个类名:
$('selector').addClass('className');
多个类名可以用空格分隔:
$('selector').addClass('class1 class2');
动态添加类
可以根据条件动态添加类:
$('selector').addClass(function(index, currentClass) {
return 'newClass';
});
切换类
如果需要根据当前状态添加或移除类,可以使用 .toggleClass():

$('selector').toggleClass('className');
注意事项
- 确保在 DOM 完全加载后执行 jQuery 代码:
$(document).ready(function() { $('selector').addClass('className'); }); - 类名区分大小写
- 重复添加相同的类名不会产生重复效果
示例代码
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").addClass("highlight");
});
});
</script>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button id="btn1">添加高亮类</button>
</body>
</html>






