【jquery速查手册】jQuery 是一个广泛使用的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画效果和 AJAX 交互等操作。对于开发者来说,掌握 jQuery 的常用方法和语法是提升开发效率的重要途径。以下是一份简明的 jQuery 速查手册,以加表格的形式呈现,帮助你快速查阅常用功能。
一、基本选择器
在 jQuery 中,选择器用于选取 HTML 元素,并对它们进行操作。以下是常用的几种选择器:
| 选择器 | 描述 |
| `$("element")` | 选取所有指定元素(如 `$("div")`) |
| `$("id")` | 通过 ID 选取元素 |
| `$(".class")` | 通过类名选取元素 |
| `$("")` | 选取所有元素 |
| `$("element, element")` | 多个元素的组合选择 |
二、DOM 操作
jQuery 提供了多种方法来操作 DOM 元素,包括添加、删除、修改等。
| 方法 | 描述 |
| `.append(content)` | 在匹配元素内部末尾插入内容 |
| `.prepend(content)` | 在匹配元素内部开头插入内容 |
| `.before(content)` | 在匹配元素之前插入内容 |
| `.after(content)` | 在匹配元素之后插入内容 |
| `.remove()` | 移除匹配元素及其子元素 |
| `.empty()` | 清空匹配元素的所有子节点 |
三、属性操作
jQuery 可以方便地读取或设置 HTML 元素的属性。
| 方法 | 描述 |
| `.attr(name, value)` | 设置或获取属性值 |
| `.removeAttr(name)` | 移除属性 |
| `.prop(name, value)` | 设置或获取属性值(适用于表单控件等) |
| `.removeClass(class)` | 移除类名 |
| `.addClass(class)` | 添加类名 |
| `.toggleClass(class)` | 切换类名 |
四、事件处理
jQuery 简化了事件绑定与触发的操作,使代码更加简洁。
| 方法 | 描述 |
| `.on(event, handler)` | 绑定事件处理函数 |
| `.click(handler)` | 绑定点击事件 |
| `.hover(handlerIn, handlerOut)` | 鼠标悬停时触发 |
| `.submit(handler)` | 表单提交事件 |
| `.trigger(event)` | 触发指定事件 |
五、动画与效果
jQuery 提供了一系列内置动画方法,可用于增强用户交互体验。
| 方法 | 描述 |
| `.hide()` / `.show()` | 隐藏或显示元素 |
| `.fadeIn()` / `.fadeOut()` | 渐显或渐隐 |
| `.slideDown()` / `.slideUp()` | 滑动显示或隐藏 |
| `.animate(properties, duration)` | 自定义动画 |
| `.toggle()` | 切换显示/隐藏状态 |
六、AJAX 请求
jQuery 提供了强大的 AJAX 支持,用于异步加载数据。
| 方法 | 描述 |
| `.ajax(options)` | 发起 AJAX 请求 |
| `.get(url, data, callback)` | 发起 GET 请求 |
| `.post(url, data, callback)` | 发起 POST 请求 |
| `.load(url, data, callback)` | 加载远程 HTML 内容到指定元素中 |
七、工具方法
jQuery 还提供了一些实用的工具函数,帮助开发者更高效地完成任务。
| 方法 | 描述 |
| `.each(function)` | 遍历集合中的每个元素 |
| `.map(callback)` | 对集合中的每个元素执行函数并返回新数组 |
| `.grep(array, callback)` | 过滤数组中的元素 |
| `.extend(target, object1, object2...)` | 合并对象属性 |
| `.inArray(value, array)` | 查找值在数组中的位置 |
总结
jQuery 作为一款轻量级、跨浏览器的 JavaScript 库,为前端开发提供了极大的便利。无论是基础的选择器、DOM 操作,还是高级的事件处理和 AJAX 请求,jQuery 都有完善的 API 支持。本手册整理了 jQuery 常用的方法和语法,适合初学者快速上手,也适合有经验的开发者作为参考手册使用。
在实际开发中,建议结合官方文档进行深入学习,以充分发挥 jQuery 的强大功能。


