【jquery速查手册】jQuery 是一个广泛使用的 JavaScript 库，旨在简化 HTML 文档遍历、事件处理、动画和 Ajax 交互。对于前端开发者来说，掌握 jQuery 的常用方法和语法是提高开发效率的重要途径。以下是一份简明的 jQuery 速查手册，帮助快速查阅常用功能。
一、核心选择器
| 选择器 | 描述 | 示例 |
| `$()` | 选择元素 | `$("div")` |
| `$("id")` | 通过 ID 选择元素 | `$("myButton")` |
| `$(".class")` | 通过类名选择元素 | `$(".highlight")` |
| `$("[attribute]")` | 通过属性选择元素 | `$("[href]")` |
| `$(":nth-child(n)")` | 选择第 n 个子元素 | `$(":nth-child(2)")` |
二、DOM 操作
| 方法 | 描述 | 示例 |
| `.html()` | 获取或设置匹配元素的 HTML 内容 | `$("content").html("Hello")` |
| `.text()` | 获取或设置匹配元素的文本内容 | `$("message").text("Welcome!")` |
| `.val()` | 获取或设置表单元素的值 | `$("username").val("John")` |
| `.append()` | 向匹配元素内部追加内容 | `$("ul").append(" |
| `.prepend()` | 向匹配元素内部前置内容 | `$("ul").prepend(" |
| `.remove()` | 移除匹配元素 | `$("deleteMe").remove()` |
| `.empty()` | 清空匹配元素的所有内容 | `$("clear").empty()` |
三、事件处理
| 方法 | 描述 | 示例 |
| `.on()` | 绑定事件 | `$("btn").on("click", function() { ... })` |
| `.click()` | 触发点击事件 | `$("btn").click(function() { ... })` |
| `.hover()` | 鼠标悬停事件 | `$("menu").hover(function() { ... }, function() { ... })` |
| `.focus()` / `.blur()` | 聚焦/失去焦点事件 | `$("input").focus(function() { ... })` |
| `.change()` | 表单内容变化事件 | `$("select").change(function() { ... })` |
四、样式与效果
| 方法 | 描述 | 示例 |
| `.css()` | 设置或获取样式 | `$("box").css("color", "red")` |
| `.show()` / `.hide()` | 显示/隐藏元素 | `$("toggle").show()` |
| `.fadeIn()` / `.fadeOut()` | 淡入/淡出效果 | `$("fade").fadeIn(1000)` |
| `.animate()` | 自定义动画 | `$("move").animate({ left: '200px' }, 1000)` |
| `.addClass()` / `.removeClass()` | 添加/移除类 | `$("element").addClass("active")` |
五、Ajax 请求
| 方法 | 描述 | 示例 |
| `.ajax()` | 发起 AJAX 请求 | `$.ajax({ url: "data.json", success: function(data) { ... } })` |
| `.get()` | 发送 GET 请求 | `$.get("data.php", function(data) { ... })` |
| `.post()` | 发送 POST 请求 | `$.post("submit.php", { name: "John" }, function(data) { ... })` |
| `.getJSON()` | 获取 JSON 数据 | `$.getJSON("data.json", function(data) { ... })` |
六、工具函数
| 函数 | 描述 | 示例 |
| `$.each()` | 遍历数组或对象 | `$.each([1,2,3], function(index, value) { ... })` |
| `$.map()` | 转换数组 | `$.map([1,2,3], function(num) { return num 2; })` |
| `$.inArray()` | 判断元素是否在数组中 | `$.inArray("apple", ["banana", "apple", "orange"])` |
| `$.trim()` | 去除字符串两端空格 | `$.trim("Hello")` |
| `$.extend()` | 合并对象 | `$.extend({ a: 1 }, { b: 2 })` |
总结
jQuery 提供了简洁的 API 和强大的功能，适用于各种前端交互场景。虽然现代框架如 React、Vue 等逐渐流行，但 jQuery 仍然在许多项目中发挥着重要作用。掌握其常用方法和技巧，能够显著提升开发效率和代码可维护性。
本手册涵盖 jQuery 的基本用法和常见操作，适合初学者快速上手，也适合有经验的开发者作为参考工具。