jQuery चीट शीट
खोजने और प्रिंट करने योग्य jQuery संदर्भ — सेलेक्टर, DOM हेरफेर, इवेंट, इफेक्ट, ट्रैवर्सिंग, AJAX और फ़ॉर्म हेल्पर। निःशुल्क।
Selectors
14$('#id')
id से एलिमेंट चुनें
$('.class')
class वाले सभी एलिमेंट चुनें
$('div')
tag नाम वाले सभी एलिमेंट चुनें
$('*')
पेज के हर एलिमेंट को चुनें
$('[name="email"]')
attribute मान से चुनें
$('a[href^="https"]')
Attribute starts-with selector
$('ul li:first')
पहला मिलान एलिमेंट
$('ul li:last')
अंतिम मिलान एलिमेंट
$('tr:eq(2)')
शून्य-आधारित index पर एलिमेंट
$('li:not(.done)')
selector से मेल खाते एलिमेंट छोड़ें
$(':checked')
सभी checked checkbox/radio
$('div:visible')
केवल वर्तमान में दृश्य एलिमेंट
$('ul li')
Descendant combinator
$('ul > li')
प्रत्यक्ष child combinator
Document ready और DOM
10$(function () { /* ... */ });
DOM तैयार होने पर कोड चलाएं
$(document).ready(fn)
स्पष्ट document-ready handler
$(window).on('load', fn)
सभी asset लोड होने के बाद चलाएं
$(this)
वर्तमान context एलिमेंट को wrap करें
$(el)
raw DOM node को jQuery में wrap करें
$('<div class="box"></div>')
HTML से नया एलिमेंट बनाएं
$('#box')[0]
अंतर्निहित DOM node प्राप्त करें
$('#box').get(0)
.get() से DOM node प्राप्त करें
$('.item').length
मिलान एलिमेंट गिनें
$('#box').is(':visible')
सेट के विरुद्ध selector का परीक्षण करें
DOM हेरफेर
12$('#box').html('<b>Hi</b>')
inner HTML सेट करें
$('#box').text('Hello')
text सामग्री सेट करें (escaped)
$('#name').val('Ada')
फ़ॉर्म फ़ील्ड मान सेट करें
$('#list').append('<li>x</li>')
अंत में सामग्री डालें
$('#list').prepend('<li>x</li>')
आरंभ में सामग्री डालें
$('#box').before('<hr>')
एलिमेंट से पहले सामग्री डालें
$('#box').after('<hr>')
एलिमेंट के बाद सामग्री डालें
$('#box').remove()
एलिमेंट को DOM से हटाएं
$('#box').empty()
सभी child node हटाएं
$('#box').clone()
एलिमेंट की एक प्रति बनाएं
$('#box').wrap('<div>')
एलिमेंट को नए HTML में wrap करें
$('#box').replaceWith('<p>')
एलिमेंट को पूरी तरह बदलें
Attribute और CSS
13$('#img').attr('src')
attribute मान प्राप्त करें
$('#img').attr('alt', 'Logo')
attribute मान सेट करें
$('#cb').prop('checked')
DOM property प्राप्त करें (checked/disabled)
$('#cb').prop('checked', true)
DOM property सेट करें
$('#img').removeAttr('title')
attribute हटाएं
$('.box').addClass('active')
CSS class जोड़ें
$('.box').removeClass('active')
CSS class हटाएं
$('.box').toggleClass('open')
CSS class on/off टॉगल करें
$('.box').hasClass('active')
जांचें कि class मौजूद है या नहीं
$('#box').css('color', 'red')
एक CSS property सेट करें
$('#box').css({top: 0, left: 0})
कई CSS property सेट करें
$('#box').width()
गणना की width पिक्सेल में प्राप्त करें
$('#box').height()
गणना की height पिक्सेल में प्राप्त करें
इवेंट
12$('#btn').on('click', fn)
event handler संलग्न करें
$('#btn').off('click')
event handler अलग करें
$('#btn').click(fn)
संक्षिप्त click handler
$('#form').submit(fn)
फ़ॉर्म submission संभालें
$('#sel').change(fn)
मान परिवर्तन संभालें
$('#in').keyup(fn)
फ़ील्ड में key-up संभालें
$('#list').on('click', '.item', fn)
गतिशील child हेतु प्रत्यायोजित event
$('#btn').trigger('click')
event को प्रोग्रामेटिक रूप से ट्रिगर करें
$('#btn').one('click', fn)
handler को अधिकतम एक बार चलाएं
e.preventDefault()
डिफ़ॉल्ट browser क्रिया रोकें
e.stopPropagation()
event को bubbling से रोकें
e.target
वह एलिमेंट जिसने event ट्रिगर किया
प्रभाव और animation
12$('#box').show()
छिपा एलिमेंट दिखाएं
$('#box').hide()
एलिमेंट छिपाएं
$('#box').toggle()
दृश्यता टॉगल करें
$('#box').fadeIn(300)
एलिमेंट को fade in करें
$('#box').fadeOut(300)
एलिमेंट को fade out करें
$('#box').fadeTo(300, 0.5)
दी गई opacity तक fade करें
$('#box').slideUp()
एलिमेंट को ऊपर slide करें (collapse)
$('#box').slideDown()
एलिमेंट को नीचे slide करें (expand)
$('#box').slideToggle()
slide animation टॉगल करें
$('#box').animate({left: 100})
CSS property animate करें
$('#box').stop()
वर्तमान animation रोकें
$('#box').delay(500).fadeIn()
अगले कतारबद्ध प्रभाव में देरी करें
Traversing
12$('#box').find('.item')
selector से मेल खाते descendant खोजें
$('#box').parent()
प्रत्यक्ष parent प्राप्त करें
$('#box').parents('.row')
selector से मेल खाते सभी ancestor प्राप्त करें
$('#box').closest('.row')
निकटतम मिलान ancestor (या स्वयं)
$('#box').children()
प्रत्यक्ष child प्राप्त करें
$('#box').siblings()
sibling एलिमेंट प्राप्त करें
$('#box').next()
अगला sibling प्राप्त करें
$('#box').prev()
पिछला sibling प्राप्त करें
$('.item').each(fn)
प्रत्येक मिलान एलिमेंट पर पुनरावृत्ति करें
$('.item').filter('.on')
selector से सेट को कम करें
$('.item').first()
सेट को पहले एलिमेंट तक कम करें
$('.item').eq(1)
सेट को एक index तक कम करें
AJAX
11$.ajax({url: '/api', method: 'GET'})
पूर्ण-नियंत्रण AJAX अनुरोध
$.get('/api', fn)
संक्षिप्त HTTP GET अनुरोध
$.post('/api', data, fn)
संक्षिप्त HTTP POST अनुरोध
$.getJSON('/api.json', fn)
JSON अपेक्षित GET अनुरोध
$('#box').load('/part.html')
एलिमेंट में HTML लोड करें
$.ajax({dataType: 'json'})
अपेक्षित प्रतिक्रिया type सेट करें
$.ajax({data: {q: 'x'}})
अनुरोध पैरामीटर भेजें
.done(function (res) {})
सफलता पर callback चलाएं
.fail(function (err) {})
विफलता पर callback चलाएं
.always(function () {})
पूर्ण होने के बाद callback चलाएं
$.ajaxSetup({headers: {}})
सभी अनुरोधों हेतु डिफ़ॉल्ट सेट करें
फ़ॉर्म
10$('#form').serialize()
फ़ॉर्म डेटा को query string के रूप में encode करें
$('#form').serializeArray()
फ़ॉर्म डेटा को array के रूप में encode करें
$('#name').val()
फ़ील्ड मान पढ़ें
$('#name').val('Ada')
फ़ील्ड मान लिखें
$(':input')
सभी फ़ॉर्म input एलिमेंट चुनें
$('#cb').is(':checked')
जांचें कि checkbox checked है या नहीं
$('#sel option:selected')
चयनित option प्राप्त करें
$('#in').focus()
फ़ील्ड पर फ़ोकस ले जाएं
$('#form').on('submit', fn)
फ़ॉर्म submit event संभालें
$('#in').prop('disabled', true)
फ़ॉर्म control अक्षम करें
उपयोगिताएं
11$.each(arr, fn)
array या object पर पुनरावृत्ति करें
$.map(arr, fn)
प्रत्येक आइटम से नया array बनाएं
$.grep(arr, fn)
predicate से array फ़िल्टर करें
$.extend({}, a, b)
object को target में मर्ज करें
$.trim(' hi ')
आगे/पीछे का whitespace trim करें
$.inArray(2, arr)
array में आइटम index खोजें
$.isArray(x)
जांचें कि मान array है या नहीं
$.isFunction(x)
जांचें कि मान function है या नहीं
$.parseJSON(str)
JSON string को object में parse करें
$.now()
वर्तमान timestamp मिलीसेकंड में
$.type(x)
मान का आंतरिक type प्राप्त करें
कोई प्रविष्टि “:q” से मेल नहीं खाती।
मदद चाहिए?
इस टूल में कोई समस्या मिली? हमारी टीम को बताएं।