Karatasi ya Marejeleo ya jQuery
Marejeleo ya jQuery yanayoweza kutafutwa na kuchapishwa — viteuzi, udhibiti wa DOM, matukio, athari, kupitia, AJAX na visaidizi vya fomu. Bila malipo.
Selectors
14$('#id')
Chagua kipengele kwa id yake
$('.class')
Chagua vipengele vyote vyenye class
$('div')
Chagua vipengele vyote vya jina la tag
$('*')
Chagua kila kipengele kwenye ukurasa
$('[name="email"]')
Chagua kwa thamani ya attribute
$('a[href^="https"]')
Selector ya attribute inayoanza-na
$('ul li:first')
Kipengele cha kwanza kilicholingana
$('ul li:last')
Kipengele cha mwisho kilicholingana
$('tr:eq(2)')
Kipengele kwenye index inayoanza sifuri
$('li:not(.done)')
Toa vipengele vinavyolingana na selector
$(':checked')
Checkboxes/radios zote zilizochaguliwa
$('div:visible')
Vipengele vinavyoonekana sasa pekee
$('ul li')
Descendant combinator
$('ul > li')
Child combinator ya moja kwa moja
Document ready na DOM
10$(function () { /* ... */ });
Endesha msimbo mara DOM inapokuwa tayari
$(document).ready(fn)
Mshughulikiaji wazi wa document-ready
$(window).on('load', fn)
Endesha baada ya assets zote kupakiwa
$(this)
Funga kipengele cha muktadha wa sasa
$(el)
Funga node ghafi ya DOM katika jQuery
$('<div class="box"></div>')
Tengeneza kipengele kipya kutoka HTML
$('#box')[0]
Pata node ya DOM ya msingi
$('#box').get(0)
Pata node ya DOM kupitia .get()
$('.item').length
Hesabu vipengele vilivyolingana
$('#box').is(':visible')
Jaribu selector dhidi ya seti
Uendeshaji wa DOM
12$('#box').html('<b>Hi</b>')
Weka inner HTML
$('#box').text('Hello')
Weka yaliyomo ya maandishi (escaped)
$('#name').val('Ada')
Weka thamani ya sehemu ya fomu
$('#list').append('<li>x</li>')
Ingiza yaliyomo mwishoni
$('#list').prepend('<li>x</li>')
Ingiza yaliyomo mwanzoni
$('#box').before('<hr>')
Ingiza yaliyomo kabla ya kipengele
$('#box').after('<hr>')
Ingiza yaliyomo baada ya kipengele
$('#box').remove()
Ondoa kipengele kutoka DOM
$('#box').empty()
Ondoa nodes zote za watoto
$('#box').clone()
Tengeneza nakala ya kipengele
$('#box').wrap('<div>')
Funga kipengele katika HTML mpya
$('#box').replaceWith('<p>')
Badilisha kipengele kabisa
Attributes na CSS
13$('#img').attr('src')
Pata thamani ya attribute
$('#img').attr('alt', 'Logo')
Weka thamani ya attribute
$('#cb').prop('checked')
Pata property ya DOM (checked/disabled)
$('#cb').prop('checked', true)
Weka property ya DOM
$('#img').removeAttr('title')
Ondoa attribute
$('.box').addClass('active')
Ongeza class ya CSS
$('.box').removeClass('active')
Ondoa class ya CSS
$('.box').toggleClass('open')
Geuza class ya CSS on/off
$('.box').hasClass('active')
Jaribu ikiwa class ipo
$('#box').css('color', 'red')
Weka property moja ya CSS
$('#box').css({top: 0, left: 0})
Weka properties nyingi za CSS
$('#box').width()
Pata upana uliokokotolewa kwa pikseli
$('#box').height()
Pata urefu uliokokotolewa kwa pikseli
Matukio
12$('#btn').on('click', fn)
Ambatisha mshughulikiaji wa tukio
$('#btn').off('click')
Tenganisha washughulikiaji wa matukio
$('#btn').click(fn)
Mshughulikiaji mfupi wa click
$('#form').submit(fn)
Shughulikia uwasilishaji wa fomu
$('#sel').change(fn)
Shughulikia mabadiliko ya thamani
$('#in').keyup(fn)
Shughulikia key-up kwenye sehemu
$('#list').on('click', '.item', fn)
Tukio lililokabidhiwa kwa watoto wa kidinamiki
$('#btn').trigger('click')
Sababisha tukio kiprogramu
$('#btn').one('click', fn)
Endesha mshughulikiaji mara moja zaidi
e.preventDefault()
Simamisha kitendo chaguo-msingi cha kivinjari
e.stopPropagation()
Simamisha tukio lisitokeze juu
e.target
Kipengele kilichosababisha tukio
Madoido na uhuishaji
12$('#box').show()
Onyesha kipengele kilichofichwa
$('#box').hide()
Ficha kipengele
$('#box').toggle()
Geuza muonekano
$('#box').fadeIn(300)
Fanya kipengele kififie ndani
$('#box').fadeOut(300)
Fanya kipengele kififie nje
$('#box').fadeTo(300, 0.5)
Fifia hadi opacity iliyopewa
$('#box').slideUp()
Teleza kipengele juu (kunja)
$('#box').slideDown()
Teleza kipengele chini (panua)
$('#box').slideToggle()
Geuza uhuishaji wa kuteleza
$('#box').animate({left: 100})
Huisha properties za CSS
$('#box').stop()
Simamisha uhuishaji wa sasa
$('#box').delay(500).fadeIn()
Chelewesha doido linalofuata kwenye foleni
Kupitia
12$('#box').find('.item')
Pata wazao wanaolingana na selector
$('#box').parent()
Pata mzazi wa moja kwa moja
$('#box').parents('.row')
Pata mababu wote wanaolingana na selector
$('#box').closest('.row')
Babu wa karibu zaidi anayelingana (au mwenyewe)
$('#box').children()
Pata watoto wa moja kwa moja
$('#box').siblings()
Pata vipengele vya ndugu
$('#box').next()
Pata ndugu anayefuata
$('#box').prev()
Pata ndugu wa awali
$('.item').each(fn)
Pitia kila kipengele kilicholingana
$('.item').filter('.on')
Punguza seti kwa selector
$('.item').first()
Punguza seti hadi kipengele cha kwanza
$('.item').eq(1)
Punguza seti hadi index moja
AJAX
11$.ajax({url: '/api', method: 'GET'})
Ombi la AJAX la udhibiti kamili
$.get('/api', fn)
Ombi fupi la HTTP GET
$.post('/api', data, fn)
Ombi fupi la HTTP POST
$.getJSON('/api.json', fn)
Ombi la GET linalotarajia JSON
$('#box').load('/part.html')
Pakia HTML ndani ya kipengele
$.ajax({dataType: 'json'})
Weka aina ya jibu inayotarajiwa
$.ajax({data: {q: 'x'}})
Tuma vigezo vya ombi
.done(function (res) {})
Endesha callback kwa mafanikio
.fail(function (err) {})
Endesha callback kwa kushindwa
.always(function () {})
Endesha callback baada ya kukamilika
$.ajaxSetup({headers: {}})
Weka chaguo-msingi kwa maombi yote
Fomu
10$('#form').serialize()
Encode data ya fomu kama query string
$('#form').serializeArray()
Encode data ya fomu kama array
$('#name').val()
Soma thamani ya sehemu
$('#name').val('Ada')
Andika thamani ya sehemu
$(':input')
Chagua vipengele vyote vya ingizo vya fomu
$('#cb').is(':checked')
Jaribu ikiwa checkbox imechaguliwa
$('#sel option:selected')
Pata chaguo lililochaguliwa
$('#in').focus()
Sogeza mwangaza kwenye sehemu
$('#form').on('submit', fn)
Shughulikia tukio la submit la fomu
$('#in').prop('disabled', true)
Zima kidhibiti cha fomu
Huduma
11$.each(arr, fn)
Pitia array au object
$.map(arr, fn)
Jenga array mpya kutoka kila kitu
$.grep(arr, fn)
Chuja array kwa predicate
$.extend({}, a, b)
Unganisha objects kwenye lengo
$.trim(' hi ')
Punguza nafasi ya mwanzo/mwisho
$.inArray(2, arr)
Pata index ya kitu kwenye array
$.isArray(x)
Jaribu ikiwa thamani ni array
$.isFunction(x)
Jaribu ikiwa thamani ni function
$.parseJSON(str)
Changanua string ya JSON kuwa object
$.now()
Timestamp ya sasa kwa milisekunde
$.type(x)
Pata aina ya ndani ya thamani
Hakuna kipengele kinacholingana na “:q”.
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.