在前端开发中，css样式是至关重要的。css用于定义页面元素的布局和外观。有时，我们需要在javascript代码中动态改变css样式，这时候jquery的扩展方法可以帮助我们轻松实现这一功能。
一、引入jQuery
在使用jQuery前，需要在HTML中引入jQuery库。可以从官方网站下载jQuery库，或直接使用CDN。例如：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
二、选择元素
在jQuery中，使用选择器来选择页面中的元素。下面是一些常用的选择器：
立即学习“前端免费学习笔记（深入）”；
- 标签选择器
$('p') // 选择所有的<p>元素- ID选择器
$('#myId') // 选择id为"myId"的元素- 类选择器
$('.myClass') // 选择class为"myClass"的元素- 属性选择器
$('[name="email"]') // 选择所有name属性等于"email"的元素- 组合选择器
$('p, span') // 选择所有<p>和<span>元素三、改变CSS样式
一旦选中了元素，就可以使用jQuery扩展方法来改变它们的CSS样式。下面是一些常用的方法：
- css()
使用css()方法可以改变元素的CSS属性。例如，以下代码将改变所有p元素的背景色：
$('p').css('background-color', 'yellow');也可以通过对象来改变多个CSS属性：
$('p').css({
'background-color': 'yellow',
'color': 'black'
});- addClass() 和 removeClass()
使用addClass()和removeClass()可以添加或删除元素的类。例如，以下代码将为所有的p元素添加"red"类：
$('p').addClass('red');这个类可以在CSS样式表中设置，如下所示：
.red {
color: red;
}可以使用removeClass()方法来删除这个类：
$('p').removeClass('red');- toggleClass()
toggleClass()方法可以在指定的类和元素之间切换。例如，以下代码将为单击的按钮添加或删除"active"类：
$('button').click(function() {
$(this).toggleClass('active');
});- height() 和 width()
使用height()和width()方法可以设置元素的高度和宽度。例如，以下代码将设置所有p元素的高度为100像素，宽度为200像素：
$('p').height(100);
$('p').width(200);这些方法也可以接收回调函数，以便计算新的高度和宽度值。
以上就是改变CSS样式的一些常用jQuery扩展方法。通过选择器和这些方法，我们可以轻松地在页面中动态改变CSS样式，从而实现丰富的交互效果和视觉设计。
