برگه تقلب jQuery
مرجع jQuery قابل جستوجو و چاپ — انتخابگرها، دستکاری DOM، رویدادها، جلوهها، پیمایش، AJAX و کمککنندههای فرم. رایگان.
انتخابگرها
14$('#id')
انتخاب یک عنصر با id آن
$('.class')
انتخاب همه عناصر دارای یک class
$('div')
انتخاب همه عناصر یک نام تگ
$('*')
انتخاب هر عنصر در صفحه
$('[name="email"]')
انتخاب بر اساس مقدار یک ویژگی
$('a[href^="https"]')
سلکتور شروعشدن ویژگی با مقدار
$('ul li:first')
اولین عنصر تطبیقیافته
$('ul li:last')
آخرین عنصر تطبیقیافته
$('tr:eq(2)')
عنصر در اندیس مبنای صفر
$('li:not(.done)')
کنارگذاشتن عناصر تطبیقیافته با یک سلکتور
$(':checked')
همه checkbox/radioهای علامتخورده
$('div:visible')
تنها عناصر اکنون قابلمشاهده
$('ul li')
ترکیبگر فرزندان
$('ul > li')
ترکیبگر فرزند مستقیم
آمادهشدن سند و DOM
10$(function () { /* ... */ });
اجرای کد بهمحض آمادهشدن DOM
$(document).ready(fn)
هندلر صریح آمادهشدن سند
$(window).on('load', fn)
اجرا پس از بارگذاری همه assetها
$(this)
احاطه عنصر زمینه جاری
$(el)
احاطه یک گره خام DOM در jQuery
$('<div class="box"></div>')
ساخت یک عنصر جدید از HTML
$('#box')[0]
گرفتن گره DOM زیرین
$('#box').get(0)
گرفتن گره DOM از طریق .get()
$('.item').length
شمارش عناصر تطبیقیافته
$('#box').is(':visible')
آزمودن یک سلکتور روی مجموعه
دستکاری DOM
12$('#box').html('<b>Hi</b>')
تنظیم inner HTML
$('#box').text('Hello')
تنظیم محتوای متنی (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()
حذف همه گرههای فرزند
$('#box').clone()
ساخت یک کپی از عنصر
$('#box').wrap('<div>')
احاطه عنصر در HTML جدید
$('#box').replaceWith('<p>')
جایگزینی کامل عنصر
ویژگیها و CSS
13$('#img').attr('src')
گرفتن مقدار یک ویژگی
$('#img').attr('alt', 'Logo')
تنظیم مقدار یک ویژگی
$('#cb').prop('checked')
گرفتن یک ویژگی DOM (checked/disabled)
$('#cb').prop('checked', true)
تنظیم یک ویژگی DOM
$('#img').removeAttr('title')
حذف یک ویژگی
$('.box').addClass('active')
افزودن یک class در CSS
$('.box').removeClass('active')
حذف یک class در CSS
$('.box').toggleClass('open')
تغییر وضعیت روشن/خاموش یک class در CSS
$('.box').hasClass('active')
آزمودن حضور یک class
$('#box').css('color', 'red')
تنظیم یک ویژگی CSS
$('#box').css({top: 0, left: 0})
تنظیم چند ویژگی CSS
$('#box').width()
گرفتن عرض محاسبهشده به پیکسل
$('#box').height()
گرفتن ارتفاع محاسبهشده به پیکسل
رویدادها
12$('#btn').on('click', fn)
افزودن یک هندلر رویداد
$('#btn').off('click')
جداکردن هندلرهای رویداد
$('#btn').click(fn)
هندلر کلیک کوتاهنویس
$('#form').submit(fn)
مدیریت ارسال فرم
$('#sel').change(fn)
مدیریت تغییر مقدار
$('#in').keyup(fn)
مدیریت key-up در یک فیلد
$('#list').on('click', '.item', fn)
رویداد واگذارشده برای فرزندان پویا
$('#btn').trigger('click')
شلیک برنامهای یک رویداد
$('#btn').one('click', fn)
اجرای یک هندلر حداکثر یکبار
e.preventDefault()
توقف عمل پیشفرض مرورگر
e.stopPropagation()
جلوگیری از حبابشدن رویداد
e.target
عنصری که رویداد را راه انداخت
افکتها و انیمیشن
12$('#box').show()
نمایش یک عنصر پنهان
$('#box').hide()
پنهانکردن یک عنصر
$('#box').toggle()
تغییر وضعیت نمایش
$('#box').fadeIn(300)
محو ورود یک عنصر
$('#box').fadeOut(300)
محو خروج یک عنصر
$('#box').fadeTo(300, 0.5)
محو تا شفافیت مشخص
$('#box').slideUp()
اسلاید به بالا یک عنصر (جمعشدن)
$('#box').slideDown()
اسلاید به پایین یک عنصر (بازشدن)
$('#box').slideToggle()
تغییر وضعیت انیمیشن اسلاید
$('#box').animate({left: 100})
متحرکسازی ویژگیهای CSS
$('#box').stop()
توقف انیمیشن جاری
$('#box').delay(500).fadeIn()
تأخیر افکت صفبعدی
پیمایش
12$('#box').find('.item')
یافتن فرزندان تطبیقیافته با یک سلکتور
$('#box').parent()
گرفتن والد مستقیم
$('#box').parents('.row')
گرفتن همه اجداد تطبیقیافته با یک سلکتور
$('#box').closest('.row')
نزدیکترین جد تطبیقیافته (یا خود)
$('#box').children()
گرفتن فرزندان مستقیم
$('#box').siblings()
گرفتن عناصر خواهر-برادر
$('#box').next()
گرفتن خواهر-برادر بعدی
$('#box').prev()
گرفتن خواهر-برادر قبلی
$('.item').each(fn)
پیمایش روی هر عنصر تطبیقیافته
$('.item').filter('.on')
کاهش مجموعه با یک سلکتور
$('.item').first()
کاهش مجموعه به اولین عنصر
$('.item').eq(1)
کاهش مجموعه به یک اندیس
AJAX
11$.ajax({url: '/api', method: 'GET'})
درخواست AJAX با کنترل کامل
$.get('/api', fn)
درخواست GET کوتاهنویس HTTP
$.post('/api', data, fn)
درخواست POST کوتاهنویس HTTP
$.getJSON('/api.json', fn)
درخواست GET با انتظار JSON
$('#box').load('/part.html')
بارگذاری HTML درون یک عنصر
$.ajax({dataType: 'json'})
تنظیم نوع پاسخ مورد انتظار
$.ajax({data: {q: 'x'}})
ارسال پارامترهای درخواست
.done(function (res) {})
اجرای callback در موفقیت
.fail(function (err) {})
اجرای callback در شکست
.always(function () {})
اجرای callback پس از تکمیل
$.ajaxSetup({headers: {}})
تنظیم پیشفرضها برای همه درخواستها
فرمها
10$('#form').serialize()
کدگذاری داده فرم بهصورت query string
$('#form').serializeArray()
کدگذاری داده فرم بهصورت آرایه
$('#name').val()
خواندن مقدار یک فیلد
$('#name').val('Ada')
نوشتن مقدار یک فیلد
$(':input')
انتخاب همه عناصر input فرم
$('#cb').is(':checked')
آزمودن علامتخوردن یک checkbox
$('#sel option:selected')
گرفتن گزینه انتخابشده
$('#in').focus()
انتقال فوکوس به یک فیلد
$('#form').on('submit', fn)
مدیریت رویداد submit فرم
$('#in').prop('disabled', true)
غیرفعالکردن یک کنترل فرم
ابزارها
11$.each(arr, fn)
پیمایش روی یک آرایه یا شیء
$.map(arr, fn)
ساخت آرایه جدید از هر قلم
$.grep(arr, fn)
فیلتر یک آرایه با یک گزاره
$.extend({}, a, b)
ادغام اشیا در یک هدف
$.trim(' hi ')
trim فاصلهخالی ابتدایی/انتهایی
$.inArray(2, arr)
یافتن اندیس یک قلم در آرایه
$.isArray(x)
آزمودن آرایهبودن یک مقدار
$.isFunction(x)
آزمودن تابعبودن یک مقدار
$.parseJSON(str)
تجزیه رشته JSON به یک شیء
$.now()
timestamp جاری به میلیثانیه
$.type(x)
گرفتن نوع درونی یک مقدار
هیچ موردی با «:q» مطابقت ندارد.
به کمک نیاز دارید؟
با این ابزار مشکلی پیدا کردید؟ به تیم ما اطلاع دهید.