【jquery速查手册】jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互等操作。对于前端开发者来说，掌握 jQuery 的常用方法和语法是提高开发效率的重要手段。以下是对 jQuery 常用功能的总结与整理，便于快速查阅。
一、基础选择器
| 选择器 | 说明 | 示例 |
| `id` | 通过元素的 ID 进行选择 | `$('myButton')` |
| `.class` | 通过类名选择元素 | `$('.highlight')` |
| `element` | 通过标签名选择元素 | `$('div')` |
| `` | 选择所有元素 | `$('')` |
| `:first` | 选择第一个匹配的元素 | `$('li:first')` |
| `:last` | 选择最后一个匹配的元素 | `$('li:last')` |
二、DOM 操作
| 方法 | 说明 | 示例 |
| `.html()` | 获取或设置匹配元素的 HTML 内容 | `$('content').html('Hello World')` |
| `.text()` | 获取或设置匹配元素的文本内容 | `$('title').text('欢迎访问')` |
| `.val()` | 获取或设置表单元素的值 | `$('username').val('admin')` |
| `.append()` | 在匹配元素内部末尾插入内容 | `$('list').append(' |
| `.prepend()` | 在匹配元素内部开头插入内容 | `$('list').prepend(' |
| `.remove()` | 删除匹配元素及其子元素 | `$('item').remove()` |
三、事件处理
| 事件类型 | 说明 | 示例 |
| `click()` | 点击事件 | `$('btn').click(function() { alert('点击了按钮'); })` |
| `hover()` | 鼠标悬停/移出事件 | `$('menu').hover(function() { $(this).addClass('active'); }, function() { $(this).removeClass('active'); })` |
| `change()` | 表单元素内容变化时触发 | `$('select').change(function() { console.log($(this).val()); })` |
| `submit()` | 表单提交事件 | `$('form').submit(function(e) { e.preventDefault(); })` |
| `ready()` | 页面加载完成后执行 | `$(document).ready(function() { ... })` |
四、动画效果
| 方法 | 说明 | 示例 |
| `.show()` | 显示隐藏的元素 | `$('panel').show()` |
| `.hide()` | 隐藏元素 | `$('panel').hide()` |
| `.fadeIn()` | 渐显效果 | `$('image').fadeIn(1000)` |
| `.fadeOut()` | 渐隐效果 | `$('image').fadeOut(1000)` |
| `.animate()` | 自定义动画 | `$('box').animate({ left: '200px' }, 1000);` |
五、Ajax 请求
| 方法 | 说明 | 示例 |
| `$.ajax()` | 发起 AJAX 请求 | `$.ajax({ url: 'data.json', success: function(data) { console.log(data); } });` |
| `$.get()` | 发送 GET 请求 | `$.get('data.php', function(data) { console.log(data); });` |
| `$.post()` | 发送 POST 请求 | `$.post('login.php', { user: 'admin', pass: '123' }, function(response) { console.log(response); });` |
| `$.getJSON()` | 获取 JSON 数据 | `$.getJSON('users.json', function(data) { console.log(data); });` |
六、其他常用方法
| 方法 | 说明 | 示例 |
| `.each()` | 遍历匹配的元素集合 | `$('li').each(function(index, element) { console.log(index + ': ' + $(element).text()); });` |
| `.attr()` | 获取或设置属性 | `$('link').attr('href', 'https://example.com')` |
| `.css()` | 设置样式 | `$('box').css('background-color', 'red')` |
| `.hasClass()` | 判断是否包含某个类 | `if ($('box').hasClass('active')) { ... }` |
| `.offset()` | 获取元素相对于文档的位置 | `var pos = $('box').offset();` |
总结
jQuery 提供了一套简洁而强大的 API，使得 JavaScript 开发更加高效和直观。虽然现代前端框架（如 React、Vue）逐渐取代了 jQuery 的部分功能，但在一些项目中，jQuery 依然是不可或缺的工具。掌握其常用方法，有助于快速实现页面交互与动态效果。
以上内容为 jQuery 常用功能的简要总结，适合初学者快速上手或老手查阅参考。