ورقة jQuery المرجعية
مرجع jQuery قابل للبحث والطباعة — المحدّدات، التعامل مع DOM، الأحداث، التأثيرات، التنقل، AJAX ومساعدات النماذج. مجانًا.
Selectors
14$('#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
10$(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
12$('#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
13$('#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
12$('#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
12$('#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
12$('#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
11$.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
10$('#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
11$.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، الأحداث، المؤثرات والحركة، التنقل بين العناصر (traversing)، AJAX، النماذج، والأدوات المساعدة.
إذا كنت تصون واجهات أمامية قديمة أو إضافات أو قوالب أنظمة إدارة محتوى أقدم، فإن إتقان jQuery لا يزال مهارة عملية. يقرن كل صف استدعاء دالة بوصف من سطر واحد، بحيث تتذكر التوقيع الدقيق لتفويض الأحداث أو التنقل المتسلسل أو طلب AJAX دون البحث في وثائق قديمة.
الدليل مجاني ويعمل بالكامل من جانب المتصفح. صفّ الدوال مباشرة بمربع البحث، انتقل بين الأقسام من جدول المحتويات الثابت، انسخ أي مقتطف بنقرة واحدة واطبع الصفحة عندما تكون منغمسًا في إعادة هيكلة كود قديم.
كيفية استخدام ورقة jQuery المرجعية
- تصفح الأقسام، من المحددات وجاهزية المستند وDOM مرورًا بالتنقل بين العناصر وصولًا إلى AJAX والأدوات المساعدة.
- ابحث عن دالة مثل on أو closest أو ajax لتصفية الدليل مباشرة.
- انتقل إلى قسم مثل المؤثرات والحركة عبر الشريط الجانبي الثابت.
- انقر على مقتطف أو أيقونة نسخه لنسخ استدعاء jQuery إلى كودك.
- اطبع الدليل كمرجع دون اتصال أثناء العمل على مشاريع قديمة.
الأسئلة الشائعة
عشرة أقسام: المحددات، جاهزية المستند وأساسيات DOM، معالجة DOM، السمات وCSS، الأحداث، المؤثرات والحركة، التنقل بين العناصر، AJAX، النماذج، ومساعدات الأدوات.
تستخدم معظم الفرق JavaScript الخام للمشاريع الجديدة، لكن كمًا هائلًا من الكود الإنتاجي والإضافات وقوالب أنظمة إدارة المحتوى ما زال يعمل بـ jQuery — هذا الدليل موجَّه لصيانة ذلك الكود وترحيله بثقة.
نعم. يتضمن قسم الأحداث الشكل المفوَّض لدالة .on() إلى جانب الربط وإلغائه والتشغيل — النمط الذي تحتاجه أكثر عند العمل مع عناصر تُدرج ديناميكيًا.
نعم. انقر على أي مقتطف، أو أيقونة النسخ في صفه، ويُنسخ الاستدعاء إلى الحافظة جاهزًا للصقه.
نعم، مجاني بالكامل — قابل للبحث والطباعة ويُعرض في متصفحك دون تسجيل.
عمليات البحث الشائعة
jquery cheat sheet
jquery selectors
صياغة jquery ajax
دوال الأحداث في jquery
jquery dom manipulation
effects و animation في jquery
دوال traversing في jquery
مرجع jquery
هل تحتاج إلى مساعدة؟
هل واجهت مشكلة في هذه الأداة؟ أخبر فريقنا.