jquery 样式
jQuery 样式操作基础
jQuery 提供了多种方法来操作 HTML 元素的样式，包括直接修改 CSS 属性、添加/移除类名等。
修改 CSS 属性
使用 .css() 方法可以直接修改元素的样式属性。可以传递单个属性或一组属性。
// 修改单个属性
$('#element').css('color', 'red');
// 修改多个属性
$('#element').css({
'color': 'blue',
'font-size': '16px'
});添加/移除类名
使用 .addClass() 和 .removeClass() 可以动态添加或移除类名，适合批量样式修改。
// 添加类名
$('#element').addClass('highlight');
// 移除类名
$('#element').removeClass('inactive');切换类名
.toggleClass() 方法根据当前状态切换类名的存在与否。
// 切换类名（存在则移除，不存在则添加）
$('#element').toggleClass('active');样式相关工具方法
检查类名是否存在
使用 .hasClass() 可以检查元素是否包含指定类名。
if ($('#element').hasClass('hidden')) {
console.log('元素已隐藏');
}获取样式属性值
通过 .css() 方法传入属性名可以获取当前计算样式值。
const fontSize = $('#element').css('font-size');
console.log(fontSize);动画样式效果
基础动画
使用 .animate() 方法可以实现自定义动画效果。
$('#box').animate({
opacity: 0.5,
left: '+=50px'
}, 1000);预定义动画 jQuery 提供了一些预设动画方法：
// 滑动效果
$('#panel').slideUp(300);
$('#panel').slideDown(300);
// 淡入淡出
$('#image').fadeIn();
$('#image').fadeOut();样式操作最佳实践
性能优化 避免频繁操作样式，尽量使用类名切换而非直接修改 CSS 属性。
响应式处理 结合窗口大小事件动态调整样式：
$(window).resize(function() {
if ($(window).width() < 768) {
$('.menu').addClass('mobile');
} else {
$('.menu').removeClass('mobile');
}
});现代替代方案 考虑使用 CSS 变量配合 jQuery 实现更灵活的样式控制：
// 设置 CSS 变量
$(':root').css('--theme-color', '#4285f4');
// 使用 CSS 变量
$('.header').css('background-color', 'var(--theme-color)');
