jQuery چیٹ شیٹ

تمام ٹولز

مفت

قابلِ تلاش اور قابلِ پرنٹ jQuery حوالہ — سلیکٹرز، DOM ہیر پھیر، ایونٹس، ایفیکٹس، ٹریورسنگ، AJAX اور فارم ہیلپرز۔ مفت۔

Selectors

$('#id')

Select an element by its id

$('.class')

Select all elements with a class

$('div')

Select all elements of a tag name

$('*')

Select every element in the page

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

Select by an attribute value

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

Attribute starts-with selector

$('ul li:first')

First matched element

$('ul li:last')

Last matched element

$('tr:eq(2)')

Element at a zero-based index

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

Exclude elements matching a selector

$(':checked')

All checked checkboxes/radios

$('div:visible')

Only currently visible elements

$('ul li')

Descendant combinator

$('ul > li')

Direct child combinator

Document ready & DOM

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

Run code once the DOM is ready

$(document).ready(fn)

Explicit document-ready handler

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

Run after all assets have loaded

$(this)

Wrap the current context element

$(el)

Wrap a raw DOM node in jQuery

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

Create a new element from HTML

$('#box')[0]

Get the underlying DOM node

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

Get the DOM node via .get()

$('.item').length

Count the matched elements

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

Test a selector against the set

DOM manipulation

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

Set the inner HTML

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

Set the text content (escaped)

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

Set a form field value

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

Insert content at the end

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

Insert content at the start

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

Insert content before the element

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

Insert content after the element

$('#box').remove()

Remove the element from the DOM

$('#box').empty()

Remove all child nodes

$('#box').clone()

Create a copy of the element

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

Wrap the element in new HTML

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

Replace the element entirely

Attributes & CSS

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

Get an attribute value

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

Set an attribute value

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

Get a DOM property (checked/disabled)

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

Set a DOM property

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

Remove an attribute

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

Add a CSS class

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

Remove a CSS class

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

Toggle a CSS class on/off

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

Test if a class is present

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

Set a single CSS property

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

Set multiple CSS properties

$('#box').width()

Get the computed width in pixels

$('#box').height()

Get the computed height in pixels

Events

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

Attach an event handler

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

Detach event handlers

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

Shorthand click handler

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

Handle form submission

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

Handle value changes

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

Handle key-up in a field

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

Delegated event for dynamic children

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

Programmatically fire an event

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

Run a handler at most once

e.preventDefault()

Stop the default browser action

e.stopPropagation()

Stop the event from bubbling

e.target

The element that triggered the event

Effects & animation

$('#box').show()

Display a hidden element

$('#box').hide()

Hide an element

$('#box').toggle()

Toggle visibility

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

Fade an element in

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

Fade an element out

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

Fade to a given opacity

$('#box').slideUp()

Slide an element up (collapse)

$('#box').slideDown()

Slide an element down (expand)

$('#box').slideToggle()

Toggle a slide animation

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

Animate CSS properties

$('#box').stop()

Stop the current animation

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

Delay the next queued effect

Traversing

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

Find descendants matching a selector

$('#box').parent()

Get the direct parent

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

Get all ancestors matching a selector

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

Nearest matching ancestor (or self)

$('#box').children()

Get the direct children

$('#box').siblings()

Get sibling elements

$('#box').next()

Get the next sibling

$('#box').prev()

Get the previous sibling

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

Iterate over each matched element

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

Reduce the set by a selector

$('.item').first()

Reduce the set to the first element

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

Reduce the set to one index

AJAX

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

Full-control AJAX request

$.get('/api', fn)

Shorthand HTTP GET request

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

Shorthand HTTP POST request

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

GET request expecting JSON

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

Load HTML into an element

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

Set the expected response type

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

Send request parameters

.done(function (res) {})

Run a callback on success

.fail(function (err) {})

Run a callback on failure

.always(function () {})

Run a callback after completion

$.ajaxSetup({headers: {}})

Set defaults for all requests

Forms

$('#form').serialize()

Encode form data as a query string

$('#form').serializeArray()

Encode form data as an array

$('#name').val()

Read a field value

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

Write a field value

$(':input')

Select all form input elements

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

Test if a checkbox is checked

$('#sel option:selected')

Get the selected option

$('#in').focus()

Move focus to a field

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

Handle the form submit event

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

Disable a form control

Utilities

$.each(arr, fn)

Iterate over an array or object

$.map(arr, fn)

Build a new array from each item

$.grep(arr, fn)

Filter an array by a predicate

$.extend({}, a, b)

Merge objects into a target

$.trim(' hi ')

Trim leading/trailing whitespace

$.inArray(2, arr)

Find an item index in an array

$.isArray(x)

Test whether a value is an array

$.isFunction(x)

Test whether a value is a function

$.parseJSON(str)

Parse a JSON string into an object

$.now()

Current timestamp in milliseconds

$.type(x)

Get the internal type of a value

کوئی اندراج “:q” سے میل نہیں کھاتا۔

jQuery چیٹ شیٹ کے بارے میں

یہ jQuery چیٹ شیٹ اس لائبریری کا ایک مختصر حوالہ ہے جو اب بھی موجودہ سائٹس کا ایک بڑا حصہ چلاتی ہے: سلیکٹرز، ڈاکومنٹ ریڈی اور DOM بنیادی باتیں، DOM مینیپولیشن، ایٹریبیوٹس اور CSS، ایونٹس، ایفیکٹس اور اینیمیشن، ٹراورسنگ، AJAX، فارمز، اور یوٹیلیٹیز۔

اگر آپ لیگیسی فرنٹ اینڈز، پلگ اِنز یا پرانے CMS تھیمز برقرار رکھتے ہیں، تو jQuery کی مہارت اب بھی ایک عملی ہنر ہے۔ ہر قطار میتھڈ کال کو ایک لائن کی وضاحت کے ساتھ جوڑتی ہے، تاکہ آپ پرانی دستاویزات کھنگالے بغیر ایونٹ ڈیلی گیشن، زنجیر بستہ ٹراورسل یا AJAX درخواست کا عین سگنیچر یاد کر سکیں۔

یہ شیٹ مفت اور مکمل طور پر کلائنٹ سائیڈ ہے۔ سرچ باکس سے میتھڈز کو فوری طور پر فلٹر کریں، اسٹکی ٹیبل آف کنٹینٹس سے سیکشنز کے درمیان جائیں، ایک کلک سے کوئی بھی اسنیپٹ کاپی کریں اور جب آپ کسی لیگیسی ری فیکٹر میں گہرے ہوں تو صفحہ پرنٹ کریں۔

jQuery چیٹ شیٹ استعمال کرنے کا طریقہ

سیکشنز کا جائزہ لیں، Selectors اور Document ready & DOM سے لے کر Traversing سے AJAX اور Utilities تک۔
شیٹ کو فوری طور پر فلٹر کرنے کے لیے on، closest یا ajax جیسا میتھڈ تلاش کریں۔
اسٹکی سائیڈ بار کے ذریعے Effects & animation جیسے سیکشن پر جائیں۔
اپنے کوڈ میں jQuery کال کاپی کرنے کے لیے کسی اسنیپٹ یا اس کے کاپی آئیکن پر کلک کریں۔
لیگیسی پروجیکٹس پر کام کرتے ہوئے آف لائن حوالے کے لیے شیٹ پرنٹ کریں۔

اکثر پوچھے جانے والے سوالات

دس سیکشنز: سلیکٹرز، ڈاکومنٹ ریڈی اور DOM بنیادی باتیں، DOM مینیپولیشن، ایٹریبیوٹس اور CSS، ایونٹس، ایفیکٹس اور اینیمیشن، ٹراورسنگ، AJAX، فارمز، اور یوٹیلیٹی مددگار۔

نئے پروجیکٹس کے لیے زیادہ تر ٹیمیں ونیلا JavaScript استعمال کرتی ہیں، لیکن پروڈکشن کوڈ، پلگ اِنز اور CMS تھیمز کی ایک بہت بڑی مقدار اب بھی jQuery چلاتی ہے — یہ شیٹ اس کوڈ کو اعتماد سے برقرار رکھنے اور منتقل کرنے پر مرکوز ہے۔

جی ہاں۔ ایونٹس سیکشن میں .on() کی ڈیلی گیٹڈ صورت شامل ہے بائنڈنگ، ان بائنڈنگ اور ٹرگرنگ کے ساتھ — وہ پیٹرن جس کی آپ کو متحرک طور پر داخل کیے گئے عناصر کے ساتھ کام کرتے وقت سب سے زیادہ ضرورت پڑتی ہے۔

جی ہاں۔ کسی بھی اسنیپٹ، یا اس کی قطار میں موجود کاپی آئیکن پر کلک کریں اور کال پیسٹ کرنے کے لیے تیار آپ کے کلپ بورڈ پر کاپی ہو جاتی ہے۔

جی ہاں، مکمل طور پر مفت — قابلِ تلاش، قابلِ پرنٹ اور بغیر سائن اَپ کے آپ کے براؤزر میں رینڈر شدہ۔

jQuery چیٹ شیٹ

Selectors

Document ready & DOM

DOM manipulation

Attributes & CSS

Events

Effects & animation

Traversing

AJAX

Forms

Utilities

jQuery چیٹ شیٹ کے بارے میں

jQuery چیٹ شیٹ استعمال کرنے کا طریقہ

اکثر پوچھے جانے والے سوالات

jQuery چیٹ شیٹ میں کیا شامل ہے؟

کیا jQuery کا حوالہ لینا اب بھی قابلِ قدر ہے؟

کیا یہ ایونٹ ڈیلی گیشن کو کور کرتی ہے؟

کیا میں میتھڈ کالز ایک کلک سے کاپی کر سکتا ہوں؟

کیا jQuery حوالہ مفت ہے؟

متعلقہ ٹولز

مقبول تلاشیں

یہ ٹول ایمبیڈ کریں