jQuery 速查表
可搜索、可打印的 jQuery 参考手册——选择器、DOM 操作、事件、特效、遍历、AJAX 以及表单辅助方法。免费。
Selectors
14$('#id')
Select an element by its id
$('.class')
Select all elements with a class
$('div')
Select all elements of a tag name
$('*')
Select every element in the page
$('[name="email"]')
Select by an attribute value
$('a[href^="https"]')
Attribute starts-with selector
$('ul li:first')
First matched element
$('ul li:last')
Last matched element
$('tr:eq(2)')
Element at a zero-based index
$('li:not(.done)')
Exclude elements matching a selector
$(':checked')
All checked checkboxes/radios
$('div:visible')
Only currently visible elements
$('ul li')
Descendant combinator
$('ul > li')
Direct child combinator
Document ready & DOM
10$(function () { /* ... */ });
Run code once the DOM is ready
$(document).ready(fn)
Explicit document-ready handler
$(window).on('load', fn)
Run after all assets have loaded
$(this)
Wrap the current context element
$(el)
Wrap a raw DOM node in jQuery
$('<div class="box"></div>')
Create a new element from HTML
$('#box')[0]
Get the underlying DOM node
$('#box').get(0)
Get the DOM node via .get()
$('.item').length
Count the matched elements
$('#box').is(':visible')
Test a selector against the set
DOM manipulation
12$('#box').html('<b>Hi</b>')
Set the inner HTML
$('#box').text('Hello')
Set the text content (escaped)
$('#name').val('Ada')
Set a form field value
$('#list').append('<li>x</li>')
Insert content at the end
$('#list').prepend('<li>x</li>')
Insert content at the start
$('#box').before('<hr>')
Insert content before the element
$('#box').after('<hr>')
Insert content after the element
$('#box').remove()
Remove the element from the DOM
$('#box').empty()
Remove all child nodes
$('#box').clone()
Create a copy of the element
$('#box').wrap('<div>')
Wrap the element in new HTML
$('#box').replaceWith('<p>')
Replace the element entirely
Attributes & CSS
13$('#img').attr('src')
Get an attribute value
$('#img').attr('alt', 'Logo')
Set an attribute value
$('#cb').prop('checked')
Get a DOM property (checked/disabled)
$('#cb').prop('checked', true)
Set a DOM property
$('#img').removeAttr('title')
Remove an attribute
$('.box').addClass('active')
Add a CSS class
$('.box').removeClass('active')
Remove a CSS class
$('.box').toggleClass('open')
Toggle a CSS class on/off
$('.box').hasClass('active')
Test if a class is present
$('#box').css('color', 'red')
Set a single CSS property
$('#box').css({top: 0, left: 0})
Set multiple CSS properties
$('#box').width()
Get the computed width in pixels
$('#box').height()
Get the computed height in pixels
Events
12$('#btn').on('click', fn)
Attach an event handler
$('#btn').off('click')
Detach event handlers
$('#btn').click(fn)
Shorthand click handler
$('#form').submit(fn)
Handle form submission
$('#sel').change(fn)
Handle value changes
$('#in').keyup(fn)
Handle key-up in a field
$('#list').on('click', '.item', fn)
Delegated event for dynamic children
$('#btn').trigger('click')
Programmatically fire an event
$('#btn').one('click', fn)
Run a handler at most once
e.preventDefault()
Stop the default browser action
e.stopPropagation()
Stop the event from bubbling
e.target
The element that triggered the event
Effects & animation
12$('#box').show()
Display a hidden element
$('#box').hide()
Hide an element
$('#box').toggle()
Toggle visibility
$('#box').fadeIn(300)
Fade an element in
$('#box').fadeOut(300)
Fade an element out
$('#box').fadeTo(300, 0.5)
Fade to a given opacity
$('#box').slideUp()
Slide an element up (collapse)
$('#box').slideDown()
Slide an element down (expand)
$('#box').slideToggle()
Toggle a slide animation
$('#box').animate({left: 100})
Animate CSS properties
$('#box').stop()
Stop the current animation
$('#box').delay(500).fadeIn()
Delay the next queued effect
Traversing
12$('#box').find('.item')
Find descendants matching a selector
$('#box').parent()
Get the direct parent
$('#box').parents('.row')
Get all ancestors matching a selector
$('#box').closest('.row')
Nearest matching ancestor (or self)
$('#box').children()
Get the direct children
$('#box').siblings()
Get sibling elements
$('#box').next()
Get the next sibling
$('#box').prev()
Get the previous sibling
$('.item').each(fn)
Iterate over each matched element
$('.item').filter('.on')
Reduce the set by a selector
$('.item').first()
Reduce the set to the first element
$('.item').eq(1)
Reduce the set to one index
AJAX
11$.ajax({url: '/api', method: 'GET'})
Full-control AJAX request
$.get('/api', fn)
Shorthand HTTP GET request
$.post('/api', data, fn)
Shorthand HTTP POST request
$.getJSON('/api.json', fn)
GET request expecting JSON
$('#box').load('/part.html')
Load HTML into an element
$.ajax({dataType: 'json'})
Set the expected response type
$.ajax({data: {q: 'x'}})
Send request parameters
.done(function (res) {})
Run a callback on success
.fail(function (err) {})
Run a callback on failure
.always(function () {})
Run a callback after completion
$.ajaxSetup({headers: {}})
Set defaults for all requests
Forms
10$('#form').serialize()
Encode form data as a query string
$('#form').serializeArray()
Encode form data as an array
$('#name').val()
Read a field value
$('#name').val('Ada')
Write a field value
$(':input')
Select all form input elements
$('#cb').is(':checked')
Test if a checkbox is checked
$('#sel option:selected')
Get the selected option
$('#in').focus()
Move focus to a field
$('#form').on('submit', fn)
Handle the form submit event
$('#in').prop('disabled', true)
Disable a form control
Utilities
11$.each(arr, fn)
Iterate over an array or object
$.map(arr, fn)
Build a new array from each item
$.grep(arr, fn)
Filter an array by a predicate
$.extend({}, a, b)
Merge objects into a target
$.trim(' hi ')
Trim leading/trailing whitespace
$.inArray(2, arr)
Find an item index in an array
$.isArray(x)
Test whether a value is an array
$.isFunction(x)
Test whether a value is a function
$.parseJSON(str)
Parse a JSON string into an object
$.now()
Current timestamp in milliseconds
$.type(x)
Get the internal type of a value
没有条目匹配“:q”。
关于 jQuery 速查表
这份 jQuery 速查表是这个至今仍支撑着大量现有网站的库的简明参考：选择器、文档就绪与 DOM 基础、DOM 操作、属性和 CSS、事件、特效和动画、遍历、AJAX、表单,以及实用工具函数。
如果你维护的是旧版前端、插件或较老的 CMS 主题,熟练使用 jQuery 仍然是一项实用技能。每一行都把一个方法调用和一句话说明配对在一起,让你无需翻阅旧文档,就能想起事件委托、链式遍历或 AJAX 请求的确切写法。
本速查表免费,完全在客户端运行。用搜索框实时过滤方法,通过粘性目录在各章节间跳转,一键复制任意代码片段,并在深入进行旧代码重构时打印本页。
如何使用 jQuery 速查表
- 浏览各章节,从「选择器」「文档就绪与 DOM」经「遍历」到「AJAX」和「实用工具」。
- 搜索 on、closest 或 ajax 等方法,即可实时过滤速查表。
- 通过粘性侧边栏跳转到「特效与动画」等章节。
- 点击代码片段或其复制图标,把这条 jQuery 调用复制到你的代码中。
- 在处理旧项目时,打印速查表以便离线参考。
常见问题
共十个章节：选择器、文档就绪与 DOM 基础、DOM 操作、属性和 CSS、事件、特效和动画、遍历、AJAX、表单,以及实用工具函数。
对于新项目,大多数团队会使用原生 JavaScript,但大量生产环境代码、插件和 CMS 主题仍然运行在 jQuery 之上——本速查表就是为了帮助你有信心地维护和迁移这些代码。
有。事件章节包含了 .on() 的委托用法,以及绑定、解绑和触发事件——这是处理动态插入元素时最常用到的模式。
可以。点击任意代码片段,或该行的复制图标,该调用就会被复制到剪贴板,随时可以粘贴使用。
是的,完全免费——可搜索、可打印,在浏览器中渲染,无需注册。
热门搜索
jquery 速查表
jquery 选择器
jquery ajax 语法
jquery 事件方法
jquery dom 操作
jquery 特效和动画
jquery 遍历方法
jquery 参考手册
需要帮助？
使用此工具时遇到问题？请告诉我们的团队。