jQuery 使用手册之一 在前端开发中，jQuery 是一个非常重要的 JavaScript 库，它简化了 HTML 文档的遍历和操作、事件处理、动画效果以及 AJAX 交互等任务。本手册将对 jQuery 的基本用法进行总结，并通过表格形式展示常用方法及其功能。 一、jQuery 简介 jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它的核心理念是“写得更少，做得更多”，通过简洁的语法实现复杂的 DOM 操作和事件处理。jQuery 支持多种浏览器，并提供了丰富的插件生态系统，广泛应用于各种 Web 开发项目中。 二、常用 jQuery 方法总结 以下是一些 jQuery 中最常用的方法，按类别分类整理如下： 方法名称 功能说明 示例代码 `$(selector)` 选择 HTML 元素 `$('p')` 选择所有段落元素 `ready()` 页面加载完成后执行函数 `$(document).ready(function() { ... })` `each()` 遍历匹配的元素集合 `$('li').each(function() { ... })` `find()` 在匹配元素中查找子元素 `$('list').find('li')` `filter()` 过滤匹配元素 `$('div').filter('.active')` `addClass()` 为匹配元素添加类 `$('p').addClass('highlight')` `removeClass()` 移除匹配元素的类 `$('p').removeClass('highlight')` `toggleClass()` 切换类（存在则移除，不存在则添加） `$('button').toggleClass('active')` `html()` 获取或设置匹配元素的 HTML 内容 `$('div').html('')` `text()` 获取或设置匹配元素的文本内容 `$('h1').text('欢迎来到 jQuery')` `val()` 获取或设置表单元素的值 `$('input').val('输入内容')` `attr()` 获取或设置属性值 `$('img').attr('src', 'image.jpg')` `css()` 设置或获取样式属性 `$('p').css('color', 'red')` `show()` 显示隐藏的元素 `$('hiddenDiv').show()` `hide()` 隐藏显示的元素 `$('visibleDiv').hide()` `fadeIn()` 渐显元素 `$('fadeDiv').fadeIn(1000)` `fadeOut()` 渐隐元素 `$('fadeDiv').fadeOut(1000)` 三、jQuery 事件处理 jQuery 提供了多种事件绑定方式，方便开发者处理用户交互行为： 事件类型 说明 示例代码 `click()` 当元素被点击时触发 `$('button').click(function() { ... })` `hover()` 鼠标进入和离开元素时触发 `$('div').hover(function() { ... }, function() { ... })` `change()` 表单元素的值发生变化时触发 `$('input').change(function() { ... })` `submit()` 表单提交时触发 `$('form').submit(function(e) { e.preventDefault(); ... })` `on()` 绑定事件，支持动态元素 `$(document).on('click', 'button', function() { ... })` 四、总结 jQuery 是一个强大而灵活的 JavaScript 库，适合用于快速开发和维护前端页面。通过掌握其核心方法与事件处理机制，可以显著提高开发效率。本文仅介绍了 jQuery 的基础部分，后续将继续深入讲解高级功能和最佳实践。 如需进一步学习，建议参考官方文档或参与实际项目练习，以加深理解和应用能力。