jquery dom

jQuery DOM 操作基础

jQuery 提供了丰富的 DOM 操作方法，用于简化原生 JavaScript 的 DOM 操作。以下是一些核心功能：

选择元素

• $("selector")：通过 CSS 选择器获取元素
• $(".class")：通过类名选择元素
• $("#id")：通过 ID 选择元素

修改内容

• text()：获取或设置元素的文本内容
• html()：获取或设置元素的 HTML 内容
• val()：获取或设置表单元素的值

元素遍历与操作

遍历 DOM

• parent()：获取父元素
• children()：获取所有子元素
• siblings()：获取兄弟元素
• find()：查找后代元素

修改属性

• attr()：获取或设置属性值
• removeAttr()：移除属性
• prop()：获取或设置属性（针对布尔属性）

样式操作与类管理

样式操作

• css()：获取或设置 CSS 样式
• width()/height()：获取或设置元素尺寸

类操作

• addClass()：添加类
• removeClass()：移除类
• toggleClass()：切换类
• hasClass()：检查类是否存在

事件处理

绑定事件

• on()：绑定事件处理程序
• click()：点击事件快捷方式
• hover()：鼠标悬停事件

事件触发

• trigger()：手动触发事件
• off()：移除事件处理程序

DOM 修改与操作

创建元素

$("<div>新元素</div>")

插入元素

• append()：在元素内部末尾插入
• prepend()：在元素内部开头插入
• after()：在元素之后插入
• before()：在元素之前插入

移除元素

• remove()：移除元素及其事件
• empty()：清空元素内容

实用工具方法

AJAX 相关

• $.ajax()：执行 AJAX 请求
• $.get()/$.post()：简化 GET/POST 请求

实用函数

• $.each()：遍历数组或对象
• $.extend()：合并对象
• $.trim()：去除字符串两端空格

性能优化建议

• 缓存 jQuery 对象避免重复查询
• 使用事件委托减少事件处理程序数量
• 合并 DOM 操作减少重绘和回流
• 使用链式调用优化代码结构

兼容性注意事项

• 新版本 jQuery 已移除部分旧 API
• 某些方法在移动端可能有不同表现
• 动画效果在不同浏览器中可能有差异

这些方法构成了 jQuery DOM 操作的核心功能，能够满足大多数前端开发需求。使用时应注意选择器的效率和操作的性能影响。