.css()获取与设置方法
jQuery的CSS操作核心围绕.css()方法展开。该方法承担着双重职责：作为getter获取元素计算后的样式值，或作为setter为元素设定内联样式。当作为getter使用时，.css( propertyName )接受一个CSS属性名（驼峰式或连字符式均可），并返回第一个匹配元素的计算后样式值。例如，$('h1').css('fontSize')将返回<h1>元素的计算字号。需要注意的是，获取的值可能因浏览器而异，例如尺寸常以’px’为单位的字符串返回，颜色则可能以rgb或十六进制格式呈现。
作为setter时，有两种常见的调用模式。其一是接受一个属性名和一个属性值：.css( propertyName, value )，为所有匹配元素设置内联样式。其二是接受一个对象：.css( properties )，该对象包含零个或多个键值对，用于一次性设置多个样式属性。例如，$('p').css({ color: 'red', fontSize: '14px' })将为所有段落设置红色文字和14像素字号。从jQuery 1.4开始，属性值可以是函数，该函数接收元素的索引和当前值，返回要设置的新值，便于根据元素状态动态调整样式。
对于数值类属性（如width、fontSize），若设置的值为数值，jQuery默认会将其转换为字符串并追加’px’后缀。但像opacity、zIndex等无单位属性则不会追加。这一行为在jQuery 4.0中通过jQuery.cssNumber对象得到更明确的定义和控制。
样式类操作
操作元素的class属性是高效管理样式的常用手段。jQuery提供了一系列专门用于样式类操作的方法，它们仅修改类名，不直接操作内联样式，有助于保持样式与结构的分离。
.addClass( className )方法为匹配元素集添加一个或多个类名。可以传入用空格分隔的多个类名字符串，例如$('div').addClass('highlight bordered')。从jQuery 1.4开始，参数也可以是一个函数，该函数返回一个或多个需添加的类名。
.removeClass( className )方法与前者相反，用于移除元素上的一个或多个类名。若不传入任何参数，则移除元素上的所有类名。同样支持传入函数作为参数。
.toggleClass( className )方法根据元素是否已存在该类名而进行添加或移除。这相当于在.addClass()和.removeClass()之间切换。该方法也接受一个可选的布尔值作为第二个参数，强制指定是添加（true）还是移除（false）。例如，$('p').toggleClass('hidden', true)等同于$('p').addClass('hidden')。
.hasClass( className )方法用于检查匹配元素集中任意一个元素是否包含指定的类名。它返回布尔值，常用于条件判断。
尺寸与位置相关方法
这部分方法用于获取或设置元素的几何尺寸及其相对于文档或父元素的位置。返回值通常是数值，默认单位为像素。
| 方法 | 描述 | 版本说明与示例 |
|---|---|---|
.width() / .height() | 获取或设置匹配元素的内容宽度/高度，不包含内边距、边框或外边距。 | 1.0 引入。$('div').width(200) 设置内容宽度为200px。 |
.innerWidth() / .innerHeight() | 获取或设置匹配元素的内部宽度/高度，包含内边距，不包含边框。 | 1.2.6 引入。可用于获取元素的实际内部空间。 |
.outerWidth() / .outerHeight() | 获取或设置匹配元素的外部宽度/高度，包含内边距和边框。若传入参数 true，则还包含外边距。 | 1.2.6 引入。$('div').outerHeight(true) 获取包含外边距的总高度。 |
.offset() | 获取或设置匹配元素相对于文档的当前坐标。返回一个包含 top 和 left 属性的对象。 | 1.2 引入。设置时需传入 { top: 100, left: 200 } 这样的对象。 |
.position() | 获取匹配元素相对于其最近的定位（relative, absolute, fixed）父元素的偏移坐标。此方法为只读，不能用于设置。 | 1.2 引入。返回对象包含 top 和 left 属性。 |
.scrollLeft() / .scrollTop() | 获取或设置匹配元素（通常是带有滚动条的窗口或元素）的水平/垂直滚动条位置。 | 1.2.6 引入。对窗口操作非常有用，如 $(window).scrollTop()。 |
在使用.offset()设置元素位置时，需注意它会改变元素的top和left内联样式，且元素的定位方式必须为relative、absolute或fixed才会生效。
其他相关方法与高级主题
除了上述核心操作，jQuery还提供了一些辅助功能，并允许开发者深入其内部机制。
.css()方法配合jQuery.cssHooks提供了扩展能力。开发者可以通过添加钩子来覆盖特定CSS属性的获取和设置方式，实现跨浏览器标准化或自定义属性的处理。例如，可以为borderRadius属性编写钩子，使其在所有浏览器中都能正确工作。
jQuery.cssNumber属性是一个对象，其中包含了那些在通过.css()设置时无需自动添加’px’单位的CSS属性名（如zIndex、opacity、fontWeight等）。这一机制在jQuery 1.x到3.x版本中持续存在，并在4.0版本中得到了进一步的优化和明确。
对于简单的可见性切换，.show()和.hide()方法通过修改元素的display属性来工作，但也可以接受参数实现动画效果。而.css('display', 'none')则是直接且同步地隐藏元素。
在动画章节中提到的.animate()方法，其核心操作便是通过逐步改变元素的CSS属性值来实现动画效果。因此，.css()方法是所有视觉变化的基础。
版本行为变更一览
jQuery CSS相关操作在演进过程中有细微变化，了解这些有助于编写兼容性更强的代码。
1.0 – 1.2.x 早期版本奠定了.css()、addClass()等基础方法。.width()和.height()在当时对于文档元素和窗口的支持逐渐完善。
1.4 – 1.6.x 这一阶段对.css()的setter功能进行了增强，允许传入函数作为动态值。同时，对.addClass()、.removeClass()等方法的函数支持也在此时期引入。.prop()方法的引入（1.6）虽主要针对元素属性，但与样式相关布尔属性（如disabled）的交互变得更清晰。
1.8 – 1.12.x jQuery.cssHooks的机制变得更加稳定和常用。对box-sizing模型的支持在处理.width()/.height()时得到优化，使其行为更符合预期。
2.x – 3.x 2.x版本放弃了对IE<9的支持，使得内部代码得以简化。3.x版本进一步修复了大量与CSS计算相关的边缘情况，特别是在获取某些CSS变量（自定义属性）和复杂计算值时更加健壮。.show()/.hide()等方法的内部实现也得到了优化。
4.0 展望 虽然具体细节可能随最终版本变化，但jQuery.cssNumber的角色会更加明确，用于标识哪些CSS属性是“无单位的”，.css()方法处理数值的方式会更加一致和可预测。整体上，4.0会延续对现代浏览器特性的支持，并可能移除一些针对过时浏览器的修复代码。
本jQuery CSS操作手册旨在为开发者提供一个清晰、准确且全面的参考，涵盖从基础的样式读写到高级的尺寸位置控制，帮助在项目中高效、可靠地管理元素样式。掌握这些方法，是熟练运用jQuery进行DOM操作的重要一环。