jQuery 速查表
可搜索、可打印的 jQuery 参考手册——选择器、DOM 操作、事件、特效、遍历、AJAX 以及表单辅助方法。免费。
选择器
14$('#id')
按 id 选择元素
$('.class')
选择所有带某类的元素
$('div')
选择某标签名的所有元素
$('*')
选择页面中的所有元素
$('[name="email"]')
按属性值选择
$('a[href^="https"]')
属性前缀匹配选择器
$('ul li:first')
首个匹配元素
$('ul li:last')
末个匹配元素
$('tr:eq(2)')
按从 0 起的索引取元素
$('li:not(.done)')
排除匹配某选择器的元素
$(':checked')
所有已勾选的复选/单选框
$('div:visible')
仅当前可见的元素
$('ul li')
后代组合器
$('ul > li')
直接子代组合器
文档就绪与 DOM
10$(function () { /* ... */ });
DOM 就绪后运行代码
$(document).ready(fn)
显式的文档就绪处理器
$(window).on('load', fn)
所有资源加载后运行
$(this)
包装当前上下文元素
$(el)
将原始 DOM 节点包装为 jQuery 对象
$('<div class="box"></div>')
从 HTML 创建新元素
$('#box')[0]
获取底层 DOM 节点
$('#box').get(0)
通过 .get() 获取 DOM 节点
$('.item').length
统计匹配元素的数量
$('#box').is(':visible')
对集合测试某选择器
DOM 操作
12$('#box').html('<b>Hi</b>')
设置 inner HTML
$('#box').text('Hello')
设置文本内容（转义）
$('#name').val('Ada')
设置表单字段值
$('#list').append('<li>x</li>')
在末尾插入内容
$('#list').prepend('<li>x</li>')
在开头插入内容
$('#box').before('<hr>')
在元素前插入内容
$('#box').after('<hr>')
在元素后插入内容
$('#box').remove()
从 DOM 中移除元素
$('#box').empty()
移除所有子节点
$('#box').clone()
创建元素的副本
$('#box').wrap('<div>')
用新 HTML 包裹元素
$('#box').replaceWith('<p>')
完全替换元素
属性与 CSS
13$('#img').attr('src')
获取属性值
$('#img').attr('alt', 'Logo')
设置属性值
$('#cb').prop('checked')
获取 DOM 属性（checked/disabled）
$('#cb').prop('checked', true)
设置 DOM 属性
$('#img').removeAttr('title')
移除属性
$('.box').addClass('active')
添加 CSS 类
$('.box').removeClass('active')
移除 CSS 类
$('.box').toggleClass('open')
切换 CSS 类的开/关
$('.box').hasClass('active')
测试某类是否存在
$('#box').css('color', 'red')
设置单个 CSS 属性
$('#box').css({top: 0, left: 0})
设置多个 CSS 属性
$('#box').width()
获取计算后的宽度（像素）
$('#box').height()
获取计算后的高度（像素）
事件
12$('#btn').on('click', fn)
绑定事件处理器
$('#btn').off('click')
解绑事件处理器
$('#btn').click(fn)
简写的点击处理器
$('#form').submit(fn)
处理表单提交
$('#sel').change(fn)
处理值变化
$('#in').keyup(fn)
处理字段中的按键抬起
$('#list').on('click', '.item', fn)
针对动态子元素的委托事件
$('#btn').trigger('click')
以编程方式触发事件
$('#btn').one('click', fn)
处理器最多运行一次
e.preventDefault()
阻止浏览器默认行为
e.stopPropagation()
阻止事件冒泡
e.target
触发事件的元素
效果与动画
12$('#box').show()
显示隐藏元素
$('#box').hide()
隐藏元素
$('#box').toggle()
切换可见性
$('#box').fadeIn(300)
淡入元素
$('#box').fadeOut(300)
淡出元素
$('#box').fadeTo(300, 0.5)
淡化到指定不透明度
$('#box').slideUp()
向上滑动元素（折叠）
$('#box').slideDown()
向下滑动元素（展开）
$('#box').slideToggle()
切换滑动动画
$('#box').animate({left: 100})
对 CSS 属性做动画
$('#box').stop()
停止当前动画
$('#box').delay(500).fadeIn()
延迟下一个排队效果
遍历
12$('#box').find('.item')
查找匹配选择器的后代
$('#box').parent()
获取直接父级
$('#box').parents('.row')
获取所有匹配选择器的祖先
$('#box').closest('.row')
最近的匹配祖先（或自身）
$('#box').children()
获取直接子元素
$('#box').siblings()
获取兄弟元素
$('#box').next()
获取下一个兄弟元素
$('#box').prev()
获取上一个兄弟元素
$('.item').each(fn)
遍历每个匹配元素
$('.item').filter('.on')
用选择器缩减集合
$('.item').first()
将集合缩减为首个元素
$('.item').eq(1)
将集合缩减为某个索引
AJAX
11$.ajax({url: '/api', method: 'GET'})
完全可控的 AJAX 请求
$.get('/api', fn)
简写的 HTTP GET 请求
$.post('/api', data, fn)
简写的 HTTP POST 请求
$.getJSON('/api.json', fn)
期望 JSON 的 GET 请求
$('#box').load('/part.html')
将 HTML 加载到元素中
$.ajax({dataType: 'json'})
设置期望的响应类型
$.ajax({data: {q: 'x'}})
发送请求参数
.done(function (res) {})
成功时运行回调
.fail(function (err) {})
失败时运行回调
.always(function () {})
完成后运行回调
$.ajaxSetup({headers: {}})
为所有请求设置默认值
表单
10$('#form').serialize()
将表单数据编码为查询字符串
$('#form').serializeArray()
将表单数据编码为数组
$('#name').val()
读取字段值
$('#name').val('Ada')
写入字段值
$(':input')
选择所有表单输入元素
$('#cb').is(':checked')
测试复选框是否勾选
$('#sel option:selected')
获取选中的选项
$('#in').focus()
将焦点移到字段
$('#form').on('submit', fn)
处理表单提交事件
$('#in').prop('disabled', true)
禁用表单控件
工具函数
11$.each(arr, fn)
遍历数组或对象
$.map(arr, fn)
从每项构建新数组
$.grep(arr, fn)
按谓词筛选数组
$.extend({}, a, b)
将对象合并到目标中
$.trim(' hi ')
去除首尾空白
$.inArray(2, arr)
在数组中查找项的索引
$.isArray(x)
测试值是否为数组
$.isFunction(x)
测试值是否为函数
$.parseJSON(str)
将 JSON 字符串解析为对象
$.now()
当前时间戳（毫秒）
$.type(x)
获取值的内部类型
没有条目匹配“:q”。
需要帮助？
使用此工具时遇到问题？请告诉我们的团队。