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í.
Bộ chọn
14$('#id')
Chọn một phần tử theo id của nó
$('.class')
Chọn mọi phần tử có một class
$('div')
Chọn mọi phần tử của một tên thẻ
$('*')
Chọn mọi phần tử trong trang
$('[name="email"]')
Chọn theo một giá trị thuộc tính
$('a[href^="https"]')
Selector thuộc tính bắt đầu bằng
$('ul li:first')
Phần tử khớp đầu tiên
$('ul li:last')
Phần tử khớp cuối cùng
$('tr:eq(2)')
Phần tử tại chỉ số tính từ 0
$('li:not(.done)')
Loại trừ phần tử khớp một selector
$(':checked')
Mọi checkbox/radio đã chọn
$('div:visible')
Chỉ các phần tử đang hiển thị
$('ul li')
Bộ kết hợp hậu duệ
$('ul > li')
Bộ kết hợp con trực tiếp
Document ready & DOM
10$(function () { /* ... */ });
Chạy mã khi DOM sẵn sàng
$(document).ready(fn)
Trình xử lý document-ready rõ ràng
$(window).on('load', fn)
Chạy sau khi mọi asset đã tải
$(this)
Bọc phần tử ngữ cảnh hiện tại
$(el)
Bọc một node DOM thô trong jQuery
$('<div class="box"></div>')
Tạo một phần tử mới từ HTML
$('#box')[0]
Lấy node DOM bên dưới
$('#box').get(0)
Lấy node DOM qua .get()
$('.item').length
Đếm các phần tử khớp
$('#box').is(':visible')
Kiểm tra một selector trên tập phần tử
Thao tác DOM
12$('#box').html('<b>Hi</b>')
Đặt HTML bên trong
$('#box').text('Hello')
Đặt nội dung văn bản (đã thoát)
$('#name').val('Ada')
Đặt giá trị một trường form
$('#list').append('<li>x</li>')
Chèn nội dung vào cuối
$('#list').prepend('<li>x</li>')
Chèn nội dung vào đầu
$('#box').before('<hr>')
Chèn nội dung trước phần tử
$('#box').after('<hr>')
Chèn nội dung sau phần tử
$('#box').remove()
Xóa phần tử khỏi DOM
$('#box').empty()
Xóa mọi node con
$('#box').clone()
Tạo một bản sao của phần tử
$('#box').wrap('<div>')
Bọc phần tử trong HTML mới
$('#box').replaceWith('<p>')
Thay thế phần tử hoàn toàn
Thuộc tính & CSS
13$('#img').attr('src')
Lấy giá trị một thuộc tính
$('#img').attr('alt', 'Logo')
Đặt giá trị một thuộc tính
$('#cb').prop('checked')
Lấy một property DOM (checked/disabled)
$('#cb').prop('checked', true)
Đặt một property DOM
$('#img').removeAttr('title')
Xóa một thuộc tính
$('.box').addClass('active')
Thêm một class CSS
$('.box').removeClass('active')
Xóa một class CSS
$('.box').toggleClass('open')
Bật/tắt một class CSS
$('.box').hasClass('active')
Kiểm tra một class có tồn tại không
$('#box').css('color', 'red')
Đặt một thuộc tính CSS
$('#box').css({top: 0, left: 0})
Đặt nhiều thuộc tính CSS
$('#box').width()
Lấy chiều rộng tính toán bằng pixel
$('#box').height()
Lấy chiều cao tính toán bằng pixel
Sự kiện
12$('#btn').on('click', fn)
Gắn một trình xử lý sự kiện
$('#btn').off('click')
Gỡ các trình xử lý sự kiện
$('#btn').click(fn)
Trình xử lý click rút gọn
$('#form').submit(fn)
Xử lý gửi form
$('#sel').change(fn)
Xử lý thay đổi giá trị
$('#in').keyup(fn)
Xử lý nhả phím trong một trường
$('#list').on('click', '.item', fn)
Sự kiện ủy quyền cho phần tử con động
$('#btn').trigger('click')
Kích hoạt một sự kiện bằng mã
$('#btn').one('click', fn)
Chạy một trình xử lý tối đa một lần
e.preventDefault()
Ngăn hành động mặc định của trình duyệt
e.stopPropagation()
Ngăn sự kiện nổi bọt
e.target
Phần tử kích hoạt sự kiện
Hiệu ứng & hoạt họa
12$('#box').show()
Hiển thị một phần tử bị ẩn
$('#box').hide()
Ẩn một phần tử
$('#box').toggle()
Bật/tắt hiển thị
$('#box').fadeIn(300)
Làm hiện dần một phần tử
$('#box').fadeOut(300)
Làm mờ dần một phần tử
$('#box').fadeTo(300, 0.5)
Làm mờ tới một độ trong suốt cho trước
$('#box').slideUp()
Trượt một phần tử lên (thu gọn)
$('#box').slideDown()
Trượt một phần tử xuống (mở rộng)
$('#box').slideToggle()
Bật/tắt một hoạt họa trượt
$('#box').animate({left: 100})
Hoạt họa các thuộc tính CSS
$('#box').stop()
Dừng hoạt họa hiện tại
$('#box').delay(500).fadeIn()
Trì hoãn hiệu ứng tiếp theo trong hàng đợi
Duyệt cây
12$('#box').find('.item')
Tìm hậu duệ khớp một selector
$('#box').parent()
Lấy phần tử cha trực tiếp
$('#box').parents('.row')
Lấy mọi tổ tiên khớp một selector
$('#box').closest('.row')
Tổ tiên khớp gần nhất (hoặc chính nó)
$('#box').children()
Lấy các phần tử con trực tiếp
$('#box').siblings()
Lấy các phần tử anh em
$('#box').next()
Lấy phần tử anh em kế tiếp
$('#box').prev()
Lấy phần tử anh em trước đó
$('.item').each(fn)
Lặp qua từng phần tử khớp
$('.item').filter('.on')
Thu hẹp tập theo một selector
$('.item').first()
Thu hẹp tập về phần tử đầu
$('.item').eq(1)
Thu hẹp tập về một chỉ số
AJAX
11$.ajax({url: '/api', method: 'GET'})
Request AJAX kiểm soát đầy đủ
$.get('/api', fn)
Request HTTP GET rút gọn
$.post('/api', data, fn)
Request HTTP POST rút gọn
$.getJSON('/api.json', fn)
Request GET kỳ vọng JSON
$('#box').load('/part.html')
Tải HTML vào một phần tử
$.ajax({dataType: 'json'})
Đặt kiểu phản hồi kỳ vọng
$.ajax({data: {q: 'x'}})
Gửi tham số request
.done(function (res) {})
Chạy một callback khi thành công
.fail(function (err) {})
Chạy một callback khi thất bại
.always(function () {})
Chạy một callback sau khi hoàn tất
$.ajaxSetup({headers: {}})
Đặt mặc định cho mọi request
Form
10$('#form').serialize()
Mã hóa dữ liệu form thành query string
$('#form').serializeArray()
Mã hóa dữ liệu form thành mảng
$('#name').val()
Đọc giá trị một trường
$('#name').val('Ada')
Ghi giá trị một trường
$(':input')
Chọn mọi phần tử input của form
$('#cb').is(':checked')
Kiểm tra một checkbox có được chọn không
$('#sel option:selected')
Lấy tùy chọn được chọn
$('#in').focus()
Đưa tiêu điểm vào một trường
$('#form').on('submit', fn)
Xử lý sự kiện submit của form
$('#in').prop('disabled', true)
Vô hiệu hóa một điều khiển form
Tiện ích
11$.each(arr, fn)
Lặp qua một mảng hoặc đối tượng
$.map(arr, fn)
Xây mảng mới từ mỗi mục
$.grep(arr, fn)
Lọc một mảng theo một vị từ
$.extend({}, a, b)
Gộp các đối tượng vào một đích
$.trim(' hi ')
Cắt khoảng trắng đầu/cuối
$.inArray(2, arr)
Tìm chỉ số một mục trong mảng
$.isArray(x)
Kiểm tra một giá trị có phải mảng không
$.isFunction(x)
Kiểm tra một giá trị có phải hàm không
$.parseJSON(str)
Phân tích chuỗi JSON thành đối tượng
$.now()
Dấu thời gian hiện tại tính bằng mili giây
$.type(x)
Lấy kiểu nội bộ của một giá trị
Không có mục nào khớp với “:q”.
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.