Helaian Rujukan jQuery

Percuma

Rujukan jQuery yang boleh dicari dan dicetak — pemilih, manipulasi DOM, peristiwa, kesan, traversing, AJAX, dan pembantu borang. Percuma.

Pemilih

$('#id')

Pilih elemen mengikut idnya

$('.class')

Pilih semua elemen dengan kelas

$('div')

Pilih semua elemen bagi nama tag

$('*')

Pilih setiap elemen dalam halaman

$('[name="email"]')

Pilih mengikut nilai atribut

$('a[href^="https"]')

Pemilih atribut bermula-dengan

$('ul li:first')

Elemen padanan pertama

$('ul li:last')

Elemen padanan terakhir

$('tr:eq(2)')

Elemen pada indeks berasaskan sifar

$('li:not(.done)')

Kecualikan elemen yang padan pemilih

$(':checked')

Semua kotak semak/radio yang ditanda

$('div:visible')

Hanya elemen yang kelihatan kini

$('ul li')

Pengkombinasi keturunan

$('ul > li')

Pengkombinasi anak langsung

Document ready & DOM

$(function () { /* ... */ });

Jalankan kod sebaik DOM sedia

$(document).ready(fn)

Pengendali document-ready eksplisit

$(window).on('load', fn)

Jalankan selepas semua aset dimuat

$(this)

Bungkus elemen konteks semasa

$(el)

Bungkus nod DOM mentah dalam jQuery

$('<div class="box"></div>')

Cipta elemen baharu daripada HTML

$('#box')[0]

Dapatkan nod DOM asas

$('#box').get(0)

Dapatkan nod DOM melalui .get()

$('.item').length

Kira elemen yang padan

$('#box').is(':visible')

Uji pemilih terhadap set

Manipulasi DOM

$('#box').html('<b>Hi</b>')

Tetapkan HTML dalaman

$('#box').text('Hello')

Tetapkan kandungan teks (di-escape)

$('#name').val('Ada')

Tetapkan nilai medan borang

$('#list').append('<li>x</li>')

Sisip kandungan di penghujung

$('#list').prepend('<li>x</li>')

Sisip kandungan di permulaan

$('#box').before('<hr>')

Sisip kandungan sebelum elemen

$('#box').after('<hr>')

Sisip kandungan selepas elemen

$('#box').remove()

Buang elemen dari DOM

$('#box').empty()

Buang semua nod anak

$('#box').clone()

Cipta salinan elemen

$('#box').wrap('<div>')

Bungkus elemen dalam HTML baharu

$('#box').replaceWith('<p>')

Ganti elemen sepenuhnya

Atribut & CSS

$('#img').attr('src')

Dapatkan nilai atribut

$('#img').attr('alt', 'Logo')

Tetapkan nilai atribut

$('#cb').prop('checked')

Dapatkan sifat DOM (checked/disabled)

$('#cb').prop('checked', true)

Tetapkan sifat DOM

$('#img').removeAttr('title')

Buang atribut

$('.box').addClass('active')

Tambah kelas CSS

$('.box').removeClass('active')

Buang kelas CSS

$('.box').toggleClass('open')

Togol kelas CSS hidup/mati

$('.box').hasClass('active')

Uji jika kelas hadir

$('#box').css('color', 'red')

Tetapkan satu sifat CSS

$('#box').css({top: 0, left: 0})

Tetapkan berbilang sifat CSS

$('#box').width()

Dapatkan lebar dikira dalam piksel

$('#box').height()

Dapatkan tinggi dikira dalam piksel

Peristiwa

$('#btn').on('click', fn)

Lampirkan pengendali peristiwa

$('#btn').off('click')

Tanggalkan pengendali peristiwa

$('#btn').click(fn)

Pengendali klik ringkas

$('#form').submit(fn)

Kendalikan penghantaran borang

$('#sel').change(fn)

Kendalikan perubahan nilai

$('#in').keyup(fn)

Kendalikan key-up dalam medan

$('#list').on('click', '.item', fn)

Peristiwa diwakilkan untuk anak dinamik

$('#btn').trigger('click')

Cetus peristiwa secara aturcara

$('#btn').one('click', fn)

Jalankan pengendali sekali sahaja

e.preventDefault()

Hentikan tindakan pelayar lalai

e.stopPropagation()

Hentikan peristiwa daripada menggelembung

e.target

Elemen yang mencetuskan peristiwa

Kesan & animasi

$('#box').show()

Papar elemen tersembunyi

$('#box').hide()

Sembunyi elemen

$('#box').toggle()

Togol keterlihatan

$('#box').fadeIn(300)

Pudarkan elemen masuk

$('#box').fadeOut(300)

Pudarkan elemen keluar

$('#box').fadeTo(300, 0.5)

Pudar ke kelegapan tertentu

$('#box').slideUp()

Luncurkan elemen ke atas (runtuh)

$('#box').slideDown()

Luncurkan elemen ke bawah (kembang)

$('#box').slideToggle()

Togol animasi luncur

$('#box').animate({left: 100})

Animasikan sifat CSS

$('#box').stop()

Hentikan animasi semasa

$('#box').delay(500).fadeIn()

Lengahkan kesan beratur seterusnya

Pelintasan

$('#box').find('.item')

Cari keturunan yang padan pemilih

$('#box').parent()

Dapatkan induk langsung

$('#box').parents('.row')

Dapatkan semua moyang yang padan pemilih

$('#box').closest('.row')

Moyang padan terdekat (atau diri sendiri)

$('#box').children()

Dapatkan anak langsung

$('#box').siblings()

Dapatkan elemen adik-beradik

$('#box').next()

Dapatkan adik-beradik seterusnya

$('#box').prev()

Dapatkan adik-beradik sebelumnya

$('.item').each(fn)

Lelar ke atas setiap elemen yang padan

$('.item').filter('.on')

Kurangkan set mengikut pemilih

$('.item').first()

Kurangkan set kepada elemen pertama

$('.item').eq(1)

Kurangkan set kepada satu indeks

AJAX

$.ajax({url: '/api', method: 'GET'})

Permintaan AJAX kawalan penuh

$.get('/api', fn)

Permintaan HTTP GET ringkas

$.post('/api', data, fn)

Permintaan HTTP POST ringkas

$.getJSON('/api.json', fn)

Permintaan GET menjangka JSON

$('#box').load('/part.html')

Muat HTML ke dalam elemen

$.ajax({dataType: 'json'})

Tetapkan jenis respons dijangka

$.ajax({data: {q: 'x'}})

Hantar parameter permintaan

.done(function (res) {})

Jalankan callback semasa berjaya

.fail(function (err) {})

Jalankan callback semasa gagal

.always(function () {})

Jalankan callback selepas selesai

$.ajaxSetup({headers: {}})

Tetapkan lalai untuk semua permintaan

Borang

$('#form').serialize()

Kodkan data borang sebagai rentetan pertanyaan

$('#form').serializeArray()

Kodkan data borang sebagai tatasusunan

$('#name').val()

Baca nilai medan

$('#name').val('Ada')

Tulis nilai medan

$(':input')

Pilih semua elemen input borang

$('#cb').is(':checked')

Uji jika kotak semak ditanda

$('#sel option:selected')

Dapatkan pilihan terpilih

$('#in').focus()

Alih fokus ke medan

$('#form').on('submit', fn)

Kendalikan peristiwa submit borang

$('#in').prop('disabled', true)

Lumpuhkan kawalan borang

Utiliti

$.each(arr, fn)

Lelar ke atas tatasusunan atau objek

$.map(arr, fn)

Bina tatasusunan baharu dari setiap item

$.grep(arr, fn)

Tapis tatasusunan mengikut predikat

$.extend({}, a, b)

Cantum objek ke dalam sasaran

$.trim(' hi ')

Pangkas ruang putih awalan/akhiran

$.inArray(2, arr)

Cari indeks item dalam tatasusunan

$.isArray(x)

Uji sama ada nilai ialah tatasusunan

$.isFunction(x)

Uji sama ada nilai ialah fungsi

$.parseJSON(str)

Hurai rentetan JSON menjadi objek

$.now()

Cap masa semasa dalam milisaat

$.type(x)

Dapatkan jenis dalaman sesuatu nilai

Tiada entri sepadan dengan “:q”.

Perlukan bantuan?

Menemui masalah dengan alat ini? Beritahu pasukan kami.

Laporkan masalah

Tambah alat percuma ini ke laman web anda sendiri — salin dan tampal kod di bawah.

<iframe src="https://tweakee.com/ms/studio/dev/jquery-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>