jQuery চিট শিট
অনুসন্ধানযোগ্য, প্রিন্টযোগ্য jQuery রেফারেন্স — সিলেক্টর, DOM ম্যানিপুলেশন, ইভেন্ট, ইফেক্ট, ট্রাভার্সিং, AJAX এবং ফর্ম হেল্পার। বিনামূল্যে।
সিলেক্টর
14$('#id')
id দিয়ে element নির্বাচন করুন
$('.class')
class সহ সব element নির্বাচন করুন
$('div')
tag নামের সব element নির্বাচন করুন
$('*')
পেজের প্রতিটি element নির্বাচন করুন
$('[name="email"]')
attribute মান দিয়ে নির্বাচন করুন
$('a[href^="https"]')
Attribute starts-with selector
$('ul li:first')
প্রথম matched element
$('ul li:last')
শেষ matched element
$('tr:eq(2)')
zero-based index-এর element
$('li:not(.done)')
selector match করা element বাদ দিন
$(':checked')
সব checked checkbox/radio
$('div:visible')
শুধু বর্তমানে দৃশ্যমান element
$('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)
সব asset লোড হলে চালান
$(this)
বর্তমান context element wrap করুন
$(el)
raw DOM node jQuery-তে wrap করুন
$('<div class="box"></div>')
HTML থেকে নতুন element তৈরি করুন
$('#box')[0]
অন্তর্নিহিত DOM node নিন
$('#box').get(0)
.get()-এ DOM node নিন
$('.item').length
matched element গণনা করুন
$('#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 ফিল্ড মান সেট করুন
$('#list').append('<li>x</li>')
শেষে content যোগ করুন
$('#list').prepend('<li>x</li>')
শুরুতে content যোগ করুন
$('#box').before('<hr>')
element-এর আগে content যোগ করুন
$('#box').after('<hr>')
element-এর পরে content যোগ করুন
$('#box').remove()
DOM থেকে element সরান
$('#box').empty()
সব child node সরান
$('#box').clone()
element-এর একটি কপি তৈরি করুন
$('#box').wrap('<div>')
নতুন HTML-এ element wrap করুন
$('#box').replaceWith('<p>')
element সম্পূর্ণ প্রতিস্থাপন করুন
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 toggle করুন
$('.box').hasClass('active')
class আছে কিনা পরীক্ষা করুন
$('#box').css('color', 'red')
একটি CSS property সেট করুন
$('#box').css({top: 0, left: 0})
একাধিক CSS property সেট করুন
$('#box').width()
pixel-এ computed width নিন
$('#box').height()
pixel-এ computed height নিন
Event
12$('#btn').on('click', fn)
event handler যুক্ত করুন
$('#btn').off('click')
event handler বিচ্ছিন্ন করুন
$('#btn').click(fn)
Shorthand click handler
$('#form').submit(fn)
form submission পরিচালনা করুন
$('#sel').change(fn)
মান পরিবর্তন পরিচালনা করুন
$('#in').keyup(fn)
ফিল্ডে key-up পরিচালনা করুন
$('#list').on('click', '.item', fn)
dynamic child-এর জন্য delegated event
$('#btn').trigger('click')
programmatically event fire করুন
$('#btn').one('click', fn)
handler সর্বোচ্চ একবার চালান
e.preventDefault()
ডিফল্ট ব্রাউজার action থামান
e.stopPropagation()
event bubbling থামান
e.target
যে element event ট্রিগার করেছে
Effect ও animation
12$('#box').show()
লুকানো element প্রদর্শন করুন
$('#box').hide()
element লুকান
$('#box').toggle()
দৃশ্যমানতা 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 property animate করুন
$('#box').stop()
বর্তমান animation থামান
$('#box').delay(500).fadeIn()
পরবর্তী queued effect দেরি করুন
Traversing
12$('#box').find('.item')
selector match করা descendant খুঁজুন
$('#box').parent()
সরাসরি parent নিন
$('#box').parents('.row')
selector match করা সব ancestor নিন
$('#box').closest('.row')
নিকটতম matching ancestor (বা self)
$('#box').children()
সরাসরি child নিন
$('#box').siblings()
sibling element নিন
$('#box').next()
পরবর্তী sibling নিন
$('#box').prev()
পূর্ববর্তী sibling নিন
$('.item').each(fn)
প্রতি matched 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)
Shorthand HTTP GET request
$.post('/api', data, fn)
Shorthand 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 parameter পাঠান
.done(function (res) {})
success-এ callback চালান
.fail(function (err) {})
failure-এ callback চালান
.always(function () {})
completion-এর পর callback চালান
$.ajaxSetup({headers: {}})
সব request-এর জন্য ডিফল্ট সেট করুন
Form
10$('#form').serialize()
form ডেটা query string হিসেবে encode করুন
$('#form').serializeArray()
form ডেটা array হিসেবে encode করুন
$('#name').val()
ফিল্ড মান পড়ুন
$('#name').val('Ada')
ফিল্ড মান লিখুন
$(':input')
সব form input element নির্বাচন করুন
$('#cb').is(':checked')
checkbox checked কিনা পরীক্ষা করুন
$('#sel option:selected')
নির্বাচিত option নিন
$('#in').focus()
ফিল্ডে focus সরান
$('#form').on('submit', fn)
form submit event পরিচালনা করুন
$('#in').prop('disabled', true)
form control নিষ্ক্রিয় করুন
Utility
11$.each(arr, fn)
array বা object-এর উপর iterate করুন
$.map(arr, fn)
প্রতি আইটেম থেকে নতুন array তৈরি করুন
$.grep(arr, fn)
predicate দিয়ে array ফিল্টার করুন
$.extend({}, a, b)
object গুলো target-এ merge করুন
$.trim(' hi ')
শুরু/শেষের whitespace trim করুন
$.inArray(2, arr)
array-তে আইটেম index খুঁজুন
$.isArray(x)
মান array কিনা পরীক্ষা করুন
$.isFunction(x)
মান function কিনা পরীক্ষা করুন
$.parseJSON(str)
JSON স্ট্রিং object-এ parse করুন
$.now()
মিলিসেকেন্ডে বর্তমান timestamp
$.type(x)
মানের অভ্যন্তরীণ type নিন
“:q”-এর সাথে কোনো এন্ট্রি মেলে না।
সাহায্য দরকার?
এই টুলে কোনো সমস্যা পেয়েছেন? আমাদের দলকে জানান।