Tài liệu tham khảo nhanh jQuery
Tài liệu tham khảo jQuery có thể tìm kiếm và in được — selector, thao tác DOM, sự kiện, hiệu ứng, traversing, AJAX và trình hỗ trợ form. Miễn phí.
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
Không có mục nào khớp với “:q”.
Giới thiệu về Tài liệu tham khảo nhanh jQuery
Bảng tra cứu jQuery này là tài liệu tham khảo gọn gàng cho thư viện vẫn đang vận hành một phần lớn các trang web hiện có: selector, document ready và DOM cơ bản, thao tác DOM, thuộc tính và CSS, sự kiện, hiệu ứng và animation, duyệt phần tử, AJAX, biểu mẫu, cùng tiện ích.
Nếu bạn bảo trì các front-end cũ, plugin hoặc theme CMS đời trước, sự thành thạo jQuery vẫn là một kỹ năng thực tế. Mỗi dòng ghép một lời gọi phương thức với mô tả một câu, để bạn có thể nhớ lại chính xác chữ ký hàm cho ủy quyền sự kiện, duyệt phần tử theo chuỗi hoặc một yêu cầu AJAX mà không cần lục lại tài liệu cũ.
Bảng này miễn phí và chạy hoàn toàn phía client. Lọc các phương thức trực tiếp bằng ô tìm kiếm, nhảy giữa các phần từ mục lục cố định, sao chép bất kỳ đoạn mã nào chỉ bằng một cú click và in trang ra khi bạn đang tái cấu trúc sâu một dự án cũ.
Cách sử dụng Tài liệu tham khảo nhanh jQuery
- Lướt qua các phần, từ Selectors và Document ready & DOM qua Traversing đến AJAX và Utilities.
- Tìm một phương thức như on, closest hoặc ajax để lọc bảng trực tiếp.
- Nhảy đến một phần như Effects & animation qua thanh bên cố định.
- Nhấp vào một đoạn mã hoặc biểu tượng sao chép của nó để sao chép lời gọi jQuery vào code của bạn.
- In bảng để tham khảo ngoại tuyến khi làm việc trên các dự án cũ.
Câu hỏi thường gặp
Mười phần: selector, document ready và DOM cơ bản, thao tác DOM, thuộc tính và CSS, sự kiện, hiệu ứng và animation, duyệt phần tử, AJAX, biểu mẫu, cùng các hàm tiện ích.
Với các dự án mới, hầu hết các nhóm dùng JavaScript thuần, nhưng một lượng lớn code sản xuất, plugin và theme CMS vẫn chạy jQuery — bảng này hướng đến việc bảo trì và di chuyển code đó một cách tự tin.
Có. Phần sự kiện bao gồm dạng ủy quyền của .on() cùng với gắn, gỡ và kích hoạt sự kiện — mẫu bạn cần nhất khi làm việc với các phần tử được chèn động.
Có. Nhấp vào bất kỳ đoạn mã nào, hoặc biểu tượng sao chép trên dòng của nó, và lời gọi được sao chép vào clipboard sẵn sàng để dán.
Có, hoàn toàn miễn phí — có thể tìm kiếm, in được và hiển thị trong trình duyệt của bạn không cần đăng ký.
Tìm kiếm phổ biến
jquery cheat sheet
jquery selectors
jquery ajax syntax
jquery event methods
jquery dom manipulation
jquery effects and animation
jquery traversing methods
jquery reference
Cần trợ giúp?
Gặp sự cố với công cụ này? Hãy cho đội ngũ của chúng tôi biết.