ورقة 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')
كل مربعات/أزرار الاختيار المحدّدة
$('div:visible')
العناصر المرئية حالياً فقط
$('ul li')
مُركِّب السليل
$('ul > li')
مُركِّب الطفل المباشر
جاهزية المستند وDOM
10$(function () { /* ... */ });
تشغيل الشيفرة فور جهوزية DOM
$(document).ready(fn)
معالج صريح لجاهزية المستند
$(window).on('load', fn)
التشغيل بعد تحميل كل الأصول
$(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>')
تعيين الـ HTML الداخلي
$('#box').text('Hello')
تعيين المحتوى النصي (مهروب)
$('#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')
إضافة صنف CSS
$('.box').removeClass('active')
إزالة صنف CSS
$('.box').toggleClass('open')
تبديل صنف CSS تشغيل/إيقاف
$('.box').hasClass('active')
اختبار وجود صنف
$('#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)
معالجة رفع المفتاح في حقل
$('#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()
تأخير التأثير التالي في الطابور
التنقّل (Traversing)
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)
طلب HTTP GET مختصر
$.post('/api', data, fn)
طلب HTTP POST مختصر
$.getJSON('/api.json', fn)
طلب GET يتوقع JSON
$('#box').load('/part.html')
تحميل HTML داخل عنصر
$.ajax({dataType: 'json'})
تعيين نوع الاستجابة المتوقع
$.ajax({data: {q: 'x'}})
إرسال مُعاملات الطلب
.done(function (res) {})
تشغيل رد نداء عند النجاح
.fail(function (err) {})
تشغيل رد نداء عند الفشل
.always(function () {})
تشغيل رد نداء بعد الاكتمال
$.ajaxSetup({headers: {}})
تعيين افتراضيات لكل الطلبات
النماذج
10$('#form').serialize()
ترميز بيانات النموذج كسلسلة استعلام
$('#form').serializeArray()
ترميز بيانات النموذج كمصفوفة
$('#name').val()
قراءة قيمة حقل
$('#name').val('Ada')
كتابة قيمة حقل
$(':input')
تحديد كل عناصر إدخال النموذج
$('#cb').is(':checked')
اختبار ما إذا كان مربع الاختيار محدّداً
$('#sel option:selected')
الحصول على الخيار المحدّد
$('#in').focus()
نقل التركيز إلى حقل
$('#form').on('submit', fn)
معالجة حدث إرسال النموذج
$('#in').prop('disabled', true)
تعطيل عنصر تحكم نموذج
أدوات مساعدة
11$.each(arr, fn)
المرور على مصفوفة أو كائن
$.map(arr, fn)
بناء مصفوفة جديدة من كل عنصر
$.grep(arr, fn)
تصفية مصفوفة بمسند
$.extend({}, a, b)
دمج كائنات في هدف
$.trim(' hi ')
تقليم المسافة البيضاء البادئة/اللاحقة
$.inArray(2, arr)
إيجاد فهرس عنصر في مصفوفة
$.isArray(x)
اختبار ما إذا كانت القيمة مصفوفة
$.isFunction(x)
اختبار ما إذا كانت القيمة دالة
$.parseJSON(str)
تحليل سلسلة JSON إلى كائن
$.now()
الطابع الزمني الحالي بالميلي ثانية
$.type(x)
الحصول على النوع الداخلي لقيمة
لا يوجد إدخال يطابق “:q”.
هل تحتاج إلى مساعدة؟
هل واجهت مشكلة في هذه الأداة؟ أخبر فريقنا.