jQuery — DOM与CSS操作
介绍
jQuery简化了JavaScript的DOM操作与CSS控制，通过简洁的API提升开发效率。在DOM处理中，使用$()选择器精准定位元素，支持链式调用如$("#box").find("p").html("内容")。提供append()/remove()动态修改结构，attr()/prop()管理元素属性，val()快速读写表单值。事件绑定通过on()/click()实现交互逻辑。
CSS操控方面，css()方法直接读写样式属性（$(".item").css("color","red")），addClass()/toggleClass()批量管理类名样式，结合animate()可实现渐变动画。响应式布局常用width()/height()获取动态尺寸，offset()定位元素坐标。通过抽象浏览器差异，jQuery让DOM与CSS操作更统一简洁，尤其擅长批量元素处理和动态效果实现，大幅减少代码量。
jQuery DOM操作
jQueryDOM操作通过简洁语法实现元素选取与动态交互，支持链式调用简化代码，涵盖增删改查节点、样式调整、属性修改及事件绑定等功能，兼容多浏览器，提升开发效率。
元素选择
-
基础选择器：$("tag"), $("#id"), $(".class")
-
层级选择器：$("parent > child"), $("ancestor descendant")
-
属性选择器：$("[attr='value']"), $("input[type='text']")
DOM遍历
-
层级关系：
-
parent()：直接父元素
-
children()：直接子元素
-
siblings()：所有兄弟元素
-
next() / prev()：下一个/上一个兄弟元素
-
-
查找方法：
-
find("selector")：查找后代元素
-
closest("selector")：向上查找最近的匹配祖先
-
元素操作
-
创建元素：
const $newDiv = $("<div>动态创建的元素</div>"); -
插入元素：
-
append() / appendTo()：插入到末尾
-
prepend() / prependTo()：插入到开头
-
after()：插入到元素之后
-
before()：插入到元素之前
-
-
内容操作：
-
html()：获取/设置HTML内容
-
text()：获取/设置纯文本内容
-
-
删除元素：
-
remove()：删除元素及其事件
-
empty()：清空元素内容
-
属性与数据
-
属性操作：
-
attr("name", "value")：设置或获取属性（如src, href）
-
prop("property", value)：处理布尔属性（如checked, disabled）
-
-
数据存储：
-
data("key", value)：存储数据到元素
-
removeData("key")：移除存储的数据
-
jQuery CSS操作
jQueryCSS操作通过.css()方法动态调整元素样式，支持属性获取与设置，结合addClass()等实现类名切换，语法简洁且兼容多浏览器，简化页面样式交互逻辑。
样式修改
-
直接操作CSS：
// 单个样式
$("p").css("color", "red");
// 多个样式
$("div").css({"font-size": "16px","background-color": "#f0f0f0"
});-
类操作：
-
addClass("className")：添加类
-
removeClass("className")：移除类
-
toggleClass("className")：切换类
-
hasClass("className")：判断是否存在类
-
尺寸与位置
-
尺寸获取：
-
width() / height()：内容宽高
-
innerWidth() / innerHeight()：包含内边距
-
-
位置获取：
-
offset()：相对于文档的位置（返回{ top, left }）
-
position()：相对于最近定位父元素的位置
-
scrollTop() / scrollLeft()：获取或设置滚动条位置
-
动画与效果
jQuery动画与效果提供animate()、fadeIn()等方法，支持链式调用与自定义CSS动画，内置渐变、滑动效果，简化动态交互实现，兼容多浏览器并支持队列控制。
内置动画
-
显示/隐藏：
-
hide() / show() / toggle()：默认或指定速度
-
-
淡入淡出：
-
fadeIn() / fadeOut() / fadeToggle() / fadeTo()（调整透明度）
-
自定义动画
-
animate
()方法：
$("div").animate({ left: "250px", opacity: 0.5 }, // 目标样式1000, // 持续时间（ms）"linear", // 缓动函数() => console.log("动画完成")
);-
动画控制：
-
stop()：停止当前动画
-
finish()：立即完成所有动画
-
示例代码
动态添加列表项
$("#btnAdd").click(() => {const $li = $("<li>").text("新项目").addClass("list-item");$("#list").append($li);
});切换主题
$("#btnTheme").click(() => {$("body").toggleClass("dark-mode");
});总结
jQuery简化了DOM操作与CSS样式管理，通过封装原生API提供跨浏览器兼容性。DOM操作核心在于选择器定位元素后执行增删改查，常用方法如html()获取或设置元素内容，text()处理纯文本，val()操作表单值。
创建元素使用$("<div>")语法，插入方法包括append()尾部添加、prepend()头部插入、before()前邻插入和after()后邻插入，remove()删除节点，empty()清空子元素。遍历DOM时，parent()找父级，children()获子元素，find()深度搜索，siblings()定位兄弟节点。CSS操作通过css()方法直接读写样式属性，支持单属性修改或对象批量设置。类名控制使用addClass()、removeClass()和toggleClass()动态切换样式，hasClass()检测类存在性。尺寸处理方面，width()/height()获取或设定内容尺寸，innerWidth()包含内边距，outerWidth()追加边框，offset()获取相对视口位置，position()取得相对父级定位。所有方法均支持链式调用，且具备隐式迭代特性，无需手动循环即可批量操作元素集合，极大提升开发效率。