jQuery چیٹ شیٹ
قابلِ تلاش اور قابلِ پرنٹ jQuery حوالہ — سلیکٹرز، DOM ہیر پھیر، ایونٹس، ایفیکٹس، ٹریورسنگ، AJAX اور فارم ہیلپرز۔ مفت۔
Selectors
14$('#id')
element کو اس کے id سے منتخب کریں
$('.class')
ایک class والے تمام elements منتخب کریں
$('div')
ایک tag نام کے تمام elements منتخب کریں
$('*')
صفحے کا ہر element منتخب کریں
$('[name="email"]')
attribute ویلیو سے منتخب کریں
$('a[href^="https"]')
attribute starts-with selector
$('ul li:first')
پہلا match شدہ element
$('ul li:last')
آخری match شدہ element
$('tr:eq(2)')
zero-based index پر element
$('li:not(.done)')
selector سے match کرنے والے elements خارج کریں
$(':checked')
تمام checked checkboxes/radios
$('div:visible')
صرف موجودہ نظر آنے والے elements
$('ul li')
descendant combinator
$('ul > li')
direct child combinator
document ready اور DOM
10$(function () { /* ... */ });
DOM تیار ہوتے ہی کوڈ چلائیں
$(document).ready(fn)
واضح document-ready handler
$(window).on('load', fn)
تمام assets لوڈ ہونے کے بعد چلائیں
$(this)
موجودہ context element لپیٹیں
$(el)
خام DOM node کو jQuery میں لپیٹیں
$('<div class="box"></div>')
HTML سے نیا element بنائیں
$('#box')[0]
بنیادی DOM node حاصل کریں
$('#box').get(0)
.get() کے ذریعے DOM node حاصل کریں
$('.item').length
match شدہ elements گنیں
$('#box').is(':visible')
set کے خلاف selector ٹیسٹ کریں
DOM manipulation
12$('#box').html('<b>Hi</b>')
inner HTML سیٹ کریں
$('#box').text('Hello')
text content سیٹ کریں (escaped)
$('#name').val('Ada')
form field ویلیو سیٹ کریں
$('#list').append('<li>x</li>')
آخر میں مواد داخل کریں
$('#list').prepend('<li>x</li>')
آغاز میں مواد داخل کریں
$('#box').before('<hr>')
element سے پہلے مواد داخل کریں
$('#box').after('<hr>')
element کے بعد مواد داخل کریں
$('#box').remove()
element کو DOM سے ہٹائیں
$('#box').empty()
تمام child nodes ہٹائیں
$('#box').clone()
element کی کاپی بنائیں
$('#box').wrap('<div>')
element کو نئے HTML میں لپیٹیں
$('#box').replaceWith('<p>')
element کو مکمل طور پر بدلیں
attributes اور 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 toggle کریں
$('.box').hasClass('active')
ٹیسٹ کریں کہ class موجود ہے
$('#box').css('color', 'red')
ایک CSS property سیٹ کریں
$('#box').css({top: 0, left: 0})
متعدد CSS properties سیٹ کریں
$('#box').width()
computed چوڑائی pixels میں حاصل کریں
$('#box').height()
computed اونچائی pixels میں حاصل کریں
events
12$('#btn').on('click', fn)
event handler منسلک کریں
$('#btn').off('click')
event handlers الگ کریں
$('#btn').click(fn)
مختصر click handler
$('#form').submit(fn)
form submission سنبھالیں
$('#sel').change(fn)
ویلیو تبدیلیاں سنبھالیں
$('#in').keyup(fn)
field میں key-up سنبھالیں
$('#list').on('click', '.item', fn)
متحرک children کے لیے delegated event
$('#btn').trigger('click')
پروگرام سے event چلائیں
$('#btn').one('click', fn)
handler زیادہ سے زیادہ ایک بار چلائیں
e.preventDefault()
ڈیفالٹ براؤزر عمل روکیں
e.stopPropagation()
event کو bubbling سے روکیں
e.target
وہ element جس نے event چلائی
effects اور animation
12$('#box').show()
چھپا element دکھائیں
$('#box').hide()
element چھپائیں
$('#box').toggle()
visibility toggle کریں
$('#box').fadeIn(300)
element کو fade in کریں
$('#box').fadeOut(300)
element کو fade out کریں
$('#box').fadeTo(300, 0.5)
دی گئی opacity تک fade کریں
$('#box').slideUp()
element کو slide up کریں (collapse)
$('#box').slideDown()
element کو slide down کریں (expand)
$('#box').slideToggle()
slide animation toggle کریں
$('#box').animate({left: 100})
CSS properties animate کریں
$('#box').stop()
موجودہ animation روکیں
$('#box').delay(500).fadeIn()
اگلے قطار میں effect میں تاخیر کریں
traversing
12$('#box').find('.item')
selector سے match کرنے والے descendants تلاش کریں
$('#box').parent()
براہ راست parent حاصل کریں
$('#box').parents('.row')
selector سے match کرنے والے تمام ancestors حاصل کریں
$('#box').closest('.row')
قریب ترین match کرنے والا ancestor (یا خود)
$('#box').children()
براہ راست children حاصل کریں
$('#box').siblings()
sibling elements حاصل کریں
$('#box').next()
اگلا sibling حاصل کریں
$('#box').prev()
پچھلا sibling حاصل کریں
$('.item').each(fn)
ہر match شدہ element پر iterate کریں
$('.item').filter('.on')
selector سے set کم کریں
$('.item').first()
set کو پہلے element تک کم کریں
$('.item').eq(1)
set کو ایک index تک کم کریں
AJAX
11$.ajax({url: '/api', method: 'GET'})
مکمل کنٹرول AJAX request
$.get('/api', fn)
مختصر HTTP GET request
$.post('/api', data, fn)
مختصر HTTP POST request
$.getJSON('/api.json', fn)
JSON کی توقع والا GET request
$('#box').load('/part.html')
element میں HTML لوڈ کریں
$.ajax({dataType: 'json'})
متوقع response type سیٹ کریں
$.ajax({data: {q: 'x'}})
request parameters بھیجیں
.done(function (res) {})
کامیابی پر callback چلائیں
.fail(function (err) {})
ناکامی پر callback چلائیں
.always(function () {})
مکمل ہونے کے بعد callback چلائیں
$.ajaxSetup({headers: {}})
تمام requests کے لیے defaults سیٹ کریں
forms
10$('#form').serialize()
form ڈیٹا کو query string میں encode کریں
$('#form').serializeArray()
form ڈیٹا کو array میں encode کریں
$('#name').val()
field ویلیو پڑھیں
$('#name').val('Ada')
field ویلیو لکھیں
$(':input')
تمام form input elements منتخب کریں
$('#cb').is(':checked')
ٹیسٹ کریں کہ checkbox checked ہے
$('#sel option:selected')
منتخب option حاصل کریں
$('#in').focus()
focus کو field پر لے جائیں
$('#form').on('submit', fn)
form submit event سنبھالیں
$('#in').prop('disabled', true)
form control غیر فعال کریں
utilities
11$.each(arr, fn)
array یا object پر iterate کریں
$.map(arr, fn)
ہر item سے نیا array بنائیں
$.grep(arr, fn)
predicate سے array فلٹر کریں
$.extend({}, a, b)
objects کو target میں merge کریں
$.trim(' hi ')
ابتدائی/آخری whitespace trim کریں
$.inArray(2, arr)
array میں item index تلاش کریں
$.isArray(x)
ٹیسٹ کریں کہ ویلیو array ہے
$.isFunction(x)
ٹیسٹ کریں کہ ویلیو function ہے
$.parseJSON(str)
JSON string کو object میں parse کریں
$.now()
موجودہ timestamp ملی سیکنڈ میں
$.type(x)
ویلیو کا internal type حاصل کریں
کوئی اندراج “:q” سے میل نہیں کھاتا۔
مدد چاہیے؟
اس ٹول میں کوئی مسئلہ ملا؟ ہماری ٹیم کو بتائیں۔