jQuery 常用 API 速查手册
约 1489 字大约 5 分钟
jquery前端
2020-05-08
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。本文整理了 jQuery 常用 API，方便快速查阅。
安装
通过 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>或通过 npm 安装：
npm install jquery选择器
jQuery 选择器用于选取 HTML 元素，语法与 CSS 选择器一致。
基本选择器
| 选择器 | 示例 | 说明 |
|---|---|---|
| 元素选择器 | $('p') | 选取所有 <p> 元素 |
| ID 选择器 | $('#id') | 选取 ID 为 id 的元素 |
| Class 选择器 | $('.className') | 选取 class 为 className 的元素 |
DOM 操作
获取与设置内容
| 方法 | 示例 | 说明 |
|---|---|---|
text() | $('p').text() | 获取或设置文本内容 |
html() | $('div').html() | 获取或设置 HTML 内容 |
val() | $('input').val() | 获取或设置表单值 |
attr() | $('a').attr('href') | 获取或设置属性值 |
prop() | $('div').prop('outerHTML') | 获取 DOM 属性 |
插入元素
| 方法 | 示例 | 说明 |
|---|---|---|
prepend() | $('div').prepend(content) | 在元素内部开头插入 |
append() | $('div').append(content) | 在元素内部末尾插入 |
before() | $('div').before(content) | 在元素外部之前插入 |
after() | $('div').after(content) | 在元素外部之后插入 |
删除元素
| 方法 | 示例 | 说明 |
|---|---|---|
remove() | $('div').remove() | 删除元素及其子元素 |
remove() | $('div').remove('.top') | 删除匹配 .top 的元素 |
empty() | $('div').empty() | 清空元素内部所有子元素 |
CSS 操作
| 方法 | 示例 | 说明 |
|---|---|---|
addClass() | $('div').addClass('clazz') | 添加 CSS 类 |
removeClass() | $('div').removeClass('clazz') | 删除 CSS 类 |
toggleClass() | $('div').toggleClass('clazz') | 切换 CSS 类 |
css() | $('div').css('background') | 获取 CSS 属性 |
css() | $('div').css('background', 'red') | 设置单个 CSS 属性 |
css() | $('div').css({'background': 'red', 'font-size': '20px'}) | 设置多个 CSS 属性 |
尺寸操作
| 方法 | 示例 | 说明 |
|---|---|---|
width() | $('div').width() | 获取元素宽度（不含内边距） |
height() | $('div').height() | 获取元素高度（不含内边距） |
innerWidth() | $('div').innerWidth() | 获取元素宽度（含内边距） |
innerHeight() | $('div').innerHeight() | 获取元素高度（含内边距） |
outerWidth() | $('div').outerWidth() | 获取元素宽度（含内边距和边框） |
outerHeight() | $('div').outerHeight() | 获取元素高度（含内边距和边框） |
DOM 遍历
祖先元素
| 方法 | 示例 | 说明 |
|---|---|---|
parent() | $('p').parent() | 获取直接父元素 |
parents() | $('p').parents() | 获取所有祖先元素 |
parentsUntil() | $('span').parentsUntil('div') | 获取两个元素之间的祖先元素 |
后代元素
| 方法 | 示例 | 说明 |
|---|---|---|
children() | $('p').children() | 获取直接子元素 |
find() | $('p').find('span') | 获取所有后代元素 |
同胞元素
| 方法 | 示例 | 说明 |
|---|---|---|
siblings() | $('p').siblings() | 获取所有同胞元素 |
next() | $('p').next() | 获取下一个同胞元素 |
prev() | $('p').prev() | 获取上一个同胞元素 |
nextAll() | $('p').nextAll() | 获取之后所有同胞元素 |
prevAll() | $('p').prevAll() | 获取之前所有同胞元素 |
nextUntil() | $('p').nextUntil('a') | 获取两个元素之间的同胞元素 |
prevUntil() | $('p').prevUntil('a') | 获取两个元素之间的同胞元素 |
结果集过滤
| 方法 | 示例 | 说明 |
|---|---|---|
first() | $('p').first() | 选取第一个元素 |
last() | $('p').last() | 选取最后一个元素 |
eq() | $('p').eq(2) | 选取索引为 2 的元素 |
filter() | $('p').filter('.url') | 过滤匹配选择器的元素 |
not() | $('p').not('.url') | 排除匹配选择器的元素 |
slice() | $('ul li').slice(1, 4) | 选取第 2 ~ 4 个元素 |
事件处理
文档就绪
// 完整写法
$(document).ready(function() {
// DOM 加载完成后执行
});
// 简写
$(function() {
// DOM 加载完成后执行
});鼠标事件
| 事件 | 示例 | 说明 |
|---|---|---|
click() | $('a').click(handler) | 单击事件 |
dblclick() | $('a').dblclick(handler) | 双击事件 |
mouseenter() | $('a').mouseenter(handler) | 鼠标进入元素 |
mouseleave() | $('a').mouseleave(handler) | 鼠标离开元素 |
mousedown() | $('a').mousedown(handler) | 鼠标按下 |
mouseup() | $('a').mouseup(handler) | 鼠标松开 |
hover() | $('a').hover(enterHandler, leaveHandler) | 悬停事件（组合 mouseenter 和 mouseleave） |
表单事件
| 事件 | 示例 | 说明 |
|---|---|---|
focus() | $('input').focus(handler) | 获得焦点事件 |
blur() | $('input').blur(handler) | 失去焦点事件 |
移除事件
// 解绑特定命名空间的事件
$('#Control17').find('.select2-choices').unbind('click.SheetUser');效果动画
显示与隐藏
| 方法 | 示例 | 说明 |
|---|---|---|
hide() | $('p').hide() | 隐藏元素 |
show() | $('p').show() | 显示元素 |
toggle() | $('p').toggle() | 切换显示/隐藏状态 |
淡入淡出
| 方法 | 示例 | 说明 |
|---|---|---|
fadeIn() | $('p').fadeIn() | 淡入显示 |
fadeOut() | $('p').fadeOut() | 淡出隐藏 |
fadeToggle() | $('p').fadeToggle() | 切换淡入/淡出 |
fadeTo() | $('p').fadeTo(0.5) | 调整透明度到指定值 |
滑动效果
| 方法 | 示例 | 说明 |
|---|---|---|
slideUp() | $('p').slideUp() | 上滑隐藏 |
slideDown() | $('p').slideDown() | 下滑显示 |
slideToggle() | $('p').slideToggle() | 切换滑动状态 |
自定义动画
| 方法 | 示例 | 说明 |
|---|---|---|
animate() | $('p').animate({left: '250px'}) | 自定义动画 |
stop() | $('p').stop() | 停止当前动画 |
动画链
// 链式调用多个动画
$('p').css('color', 'red').slideUp(2000).slideDown(3000);Ajax 请求
| 方法 | 示例 | 说明 |
|---|---|---|
load() | $('div').load('demo.txt') | 加载远程 HTML 内容 |
$.get() | $.get(url, function(data, status){}) | GET 请求 |
$.post() | $.post(url, data, function(data, status){}) | POST 请求 |
同步请求
// 设置同步请求
$.ajaxSettings.async = false;
// 恢复异步请求
$.ajaxSettings.async = true;常用代码片段
元素筛选
$("#test1").parent(); // 父节点
$("#test1").parents(); // 全部父节点
$("#test1").parents(".mui-content"); // 匹配选择器的父节点
$("#test").children(); // 全部子节点
$("#test").children("#test1"); // 匹配选择器的子节点
$("#test").contents(); // 返回所有内容（包括节点和文本）
$("#test1").prev(); // 上一个兄弟节点
$("#test1").prevAll(); // 之前所有兄弟节点
$("#test1").next(); // 下一个兄弟节点
$("#test1").nextAll(); // 之后所有兄弟节点
$("#test1").siblings(); // 所有兄弟节点
$("#test1").siblings("#test2"); // 匹配选择器的兄弟节点
$("#test").find("#test1"); // 查找后代元素
$("ul li").eq(1); // 索引为 1 的元素（第二个）
$("ul li").first(); // 第一个元素
$("ul li").last(); // 最后一个元素
$("ul li").slice(1, 4); // 第 2 ~ 4 个元素
$("ul li").filter(":even"); // 所有奇数索引元素总结
- jQuery 提供简洁的 API 进行 DOM 操作、事件处理和动画
- 选择器语法与 CSS 一致，学习成本低
- 链式调用使代码更简洁
- 现代 Vue、React 等框架已逐渐取代 jQuery，但在维护旧项目时仍需掌握