【jquery速查手册】在Web开发中,jQuery 是一个非常流行的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画效果以及 Ajax 交互等操作。为了帮助开发者更高效地使用 jQuery,本文将对常用方法和功能进行简要总结,并以表格形式展示关键内容。
一、核心选择器
| 选择器 | 描述 |
| `$("id")` | 通过元素的 ID 选择元素 |
| `$(".class")` | 通过类名选择元素 |
| `$("")` | 选择所有元素 |
| `$("element")` | 通过标签名选择元素 |
| `$("selector1, selector2")` | 选择多个选择器匹配的元素 |
二、DOM 操作方法
| 方法 | 描述 |
| `.html()` | 获取或设置匹配元素的 HTML 内容 |
| `.text()` | 获取或设置匹配元素的文本内容 |
| `.attr()` | 获取或设置属性值 |
| `.prop()` | 获取或设置属性(如 checked, disabled) |
| `.remove()` | 移除匹配元素及其子元素 |
| `.empty()` | 清空匹配元素的所有子节点 |
三、事件处理
| 方法 | 描述 |
| `.click()` | 绑定点击事件 |
| `.hover()` | 鼠标悬停时触发两个函数 |
| `.on()` | 绑定事件(推荐方式) |
| `.off()` | 移除事件绑定 |
| `.trigger()` | 手动触发事件 |
四、动画与效果
| 方法 | 描述 |
| `.show()` | 显示隐藏的元素 |
| `.hide()` | 隐藏元素 |
| `.fadeIn()` | 渐显元素 |
| `.fadeOut()` | 渐隐元素 |
| `.slideUp()` | 上滑隐藏元素 |
| `.slideDown()` | 下滑显示元素 |
| `.animate()` | 自定义动画效果 |
五、Ajax 请求
| 方法 | 描述 |
| `.ajax()` | 发起异步请求(灵活) |
| `.get()` | 发送 GET 请求 |
| `.post()` | 发送 POST 请求 |
| `.load()` | 加载远程数据并插入到元素中 |
六、工具方法
| 方法 | 描述 |
| `.each()` | 遍历匹配的元素集合 |
| `.map()` | 将每个元素转换为新的值 |
| `.grep()` | 过滤数组中的元素 |
| `.extend()` | 合并对象或扩展 jQuery 的功能 |
| `.inArray()` | 查找数组中的元素索引 |
七、常见用法示例
```javascript
// 获取某个元素的内容
var content = $("myDiv").html();
// 点击按钮时执行函数
$("myBtn").click(function() {
alert("按钮被点击了!");
});
// 动画效果
$("myDiv").fadeIn(1000);
```
总结
jQuery 提供了一套简洁而强大的 API,使得 JavaScript 开发更加高效。无论是 DOM 操作、事件处理还是动画效果,jQuery 都能提供便捷的方法支持。虽然现代前端框架如 React 和 Vue 已经广泛应用,但在一些传统项目中,jQuery 依然具有不可替代的作用。掌握 jQuery 的基本语法和常用方法,能够显著提升开发效率和代码可维护性。


