Lembar Contekan jQuery
Referensi jQuery yang dapat dicari dan dicetak — selektor, manipulasi DOM, event, efek, traversing, AJAX, dan helper form. Gratis.
Selektor
14$('#id')
Pilih elemen berdasarkan id-nya
$('.class')
Pilih semua elemen dengan suatu kelas
$('div')
Pilih semua elemen dengan nama tag
$('*')
Pilih setiap elemen di halaman
$('[name="email"]')
Pilih berdasarkan nilai atribut
$('a[href^="https"]')
Selektor atribut diawali-dengan
$('ul li:first')
Elemen pertama yang cocok
$('ul li:last')
Elemen terakhir yang cocok
$('tr:eq(2)')
Elemen pada index berbasis nol
$('li:not(.done)')
Kecualikan elemen yang cocok dengan selektor
$(':checked')
Semua checkbox/radio yang dicentang
$('div:visible')
Hanya elemen yang saat ini terlihat
$('ul li')
Kombinator keturunan
$('ul > li')
Kombinator anak langsung
Document ready & DOM
10$(function () { /* ... */ });
Jalankan kode setelah DOM siap
$(document).ready(fn)
Handler document-ready eksplisit
$(window).on('load', fn)
Jalankan setelah semua aset dimuat
$(this)
Bungkus elemen konteks saat ini
$(el)
Bungkus node DOM mentah dalam jQuery
$('<div class="box"></div>')
Buat elemen baru dari HTML
$('#box')[0]
Ambil node DOM yang mendasari
$('#box').get(0)
Ambil node DOM via .get()
$('.item').length
Hitung elemen yang cocok
$('#box').is(':visible')
Uji selektor terhadap himpunan
Manipulasi DOM
12$('#box').html('<b>Hi</b>')
Atur inner HTML
$('#box').text('Hello')
Atur konten teks (di-escape)
$('#name').val('Ada')
Atur nilai field formulir
$('#list').append('<li>x</li>')
Sisipkan konten di akhir
$('#list').prepend('<li>x</li>')
Sisipkan konten di awal
$('#box').before('<hr>')
Sisipkan konten sebelum elemen
$('#box').after('<hr>')
Sisipkan konten setelah elemen
$('#box').remove()
Hapus elemen dari DOM
$('#box').empty()
Hapus semua node anak
$('#box').clone()
Buat salinan elemen
$('#box').wrap('<div>')
Bungkus elemen dalam HTML baru
$('#box').replaceWith('<p>')
Ganti elemen sepenuhnya
Atribut & CSS
13$('#img').attr('src')
Ambil nilai atribut
$('#img').attr('alt', 'Logo')
Atur nilai atribut
$('#cb').prop('checked')
Ambil properti DOM (checked/disabled)
$('#cb').prop('checked', true)
Atur properti DOM
$('#img').removeAttr('title')
Hapus atribut
$('.box').addClass('active')
Tambahkan kelas CSS
$('.box').removeClass('active')
Hapus kelas CSS
$('.box').toggleClass('open')
Alihkan kelas CSS nyala/mati
$('.box').hasClass('active')
Uji apakah kelas ada
$('#box').css('color', 'red')
Atur satu properti CSS
$('#box').css({top: 0, left: 0})
Atur beberapa properti CSS
$('#box').width()
Ambil lebar terhitung dalam piksel
$('#box').height()
Ambil tinggi terhitung dalam piksel
Event
12$('#btn').on('click', fn)
Lampirkan handler event
$('#btn').off('click')
Lepaskan handler event
$('#btn').click(fn)
Handler klik singkat
$('#form').submit(fn)
Tangani pengiriman formulir
$('#sel').change(fn)
Tangani perubahan nilai
$('#in').keyup(fn)
Tangani key-up di sebuah field
$('#list').on('click', '.item', fn)
Event terdelegasi untuk anak dinamis
$('#btn').trigger('click')
Picu event secara programatis
$('#btn').one('click', fn)
Jalankan handler paling banyak sekali
e.preventDefault()
Hentikan aksi default peramban
e.stopPropagation()
Hentikan event dari bubbling
e.target
Elemen yang memicu event
Efek & animasi
12$('#box').show()
Tampilkan elemen tersembunyi
$('#box').hide()
Sembunyikan elemen
$('#box').toggle()
Alihkan visibilitas
$('#box').fadeIn(300)
Munculkan elemen secara memudar
$('#box').fadeOut(300)
Lenyapkan elemen secara memudar
$('#box').fadeTo(300, 0.5)
Pudar ke opasitas tertentu
$('#box').slideUp()
Geser elemen ke atas (ciutkan)
$('#box').slideDown()
Geser elemen ke bawah (perluas)
$('#box').slideToggle()
Alihkan animasi geser
$('#box').animate({left: 100})
Animasikan properti CSS
$('#box').stop()
Hentikan animasi saat ini
$('#box').delay(500).fadeIn()
Tunda efek berikutnya dalam antrean
Penjelajahan
12$('#box').find('.item')
Temukan keturunan yang cocok dengan selektor
$('#box').parent()
Ambil induk langsung
$('#box').parents('.row')
Ambil semua leluhur yang cocok dengan selektor
$('#box').closest('.row')
Leluhur terdekat yang cocok (atau diri sendiri)
$('#box').children()
Ambil anak langsung
$('#box').siblings()
Ambil elemen saudara
$('#box').next()
Ambil saudara berikutnya
$('#box').prev()
Ambil saudara sebelumnya
$('.item').each(fn)
Iterasi atas setiap elemen yang cocok
$('.item').filter('.on')
Persempit himpunan dengan selektor
$('.item').first()
Persempit himpunan ke elemen pertama
$('.item').eq(1)
Persempit himpunan ke satu index
AJAX
11$.ajax({url: '/api', method: 'GET'})
Permintaan AJAX kendali penuh
$.get('/api', fn)
Permintaan GET HTTP singkat
$.post('/api', data, fn)
Permintaan POST HTTP singkat
$.getJSON('/api.json', fn)
Permintaan GET yang mengharapkan JSON
$('#box').load('/part.html')
Muat HTML ke dalam elemen
$.ajax({dataType: 'json'})
Atur tipe respons yang diharapkan
$.ajax({data: {q: 'x'}})
Kirim parameter permintaan
.done(function (res) {})
Jalankan callback saat berhasil
.fail(function (err) {})
Jalankan callback saat gagal
.always(function () {})
Jalankan callback setelah selesai
$.ajaxSetup({headers: {}})
Atur default untuk semua permintaan
Formulir
10$('#form').serialize()
Kodekan data formulir sebagai query string
$('#form').serializeArray()
Kodekan data formulir sebagai array
$('#name').val()
Baca nilai field
$('#name').val('Ada')
Tulis nilai field
$(':input')
Pilih semua elemen input formulir
$('#cb').is(':checked')
Uji apakah checkbox dicentang
$('#sel option:selected')
Ambil opsi yang dipilih
$('#in').focus()
Pindahkan fokus ke field
$('#form').on('submit', fn)
Tangani event submit formulir
$('#in').prop('disabled', true)
Nonaktifkan kontrol formulir
Utilitas
11$.each(arr, fn)
Iterasi atas array atau objek
$.map(arr, fn)
Bangun array baru dari setiap item
$.grep(arr, fn)
Filter array berdasarkan predikat
$.extend({}, a, b)
Gabungkan objek ke dalam target
$.trim(' hi ')
Pangkas whitespace di awal/akhir
$.inArray(2, arr)
Temukan index item dalam array
$.isArray(x)
Uji apakah suatu nilai adalah array
$.isFunction(x)
Uji apakah suatu nilai adalah fungsi
$.parseJSON(str)
Parse string JSON menjadi objek
$.now()
Timestamp saat ini dalam milidetik
$.type(x)
Ambil tipe internal dari suatu nilai
Tidak ada entri yang cocok dengan “:q”.
Butuh bantuan?
Menemukan masalah dengan alat ini? Beri tahu tim kami.