سینتکس jQuery

ساختار دستورات jQuery، تابع $() و رویداد document ready

ساختار دستور jQuery

هر دستور jQuery از سه بخش تشکیل شده است:

$(selector).action()
بخشتوضیحمثال
$()تعریف/دسترسی به jQuery$
selectorپیدا کردن عنصر موردنظر"p"، "#id"، ".class"
.action()عمل روی عنصر.hide()، .show()، .click()

چند مثال:

$(this).hide()      // مخفی کردن عنصر فعلی
$("p").hide()       // مخفی کردن همه پاراگراف‌ها
$(".test").hide()   // مخفی کردن عناصر با کلاس test
$("#test").hide()   // مخفی کردن عنصر با شناسه test

رویداد Document Ready

مهم‌ترین قانون jQuery: کد را قبل از آماده شدن صفحه اجرا نکنید! اگر کد شما قبل از ساخته شدن HTML اجرا شود، عناصری که هنوز وجود ندارند پیدا نمی‌شوند.

راه‌حل، قرار دادن کد داخل رویداد document ready است:

$(document).ready(function() {
    // همه کدهای jQuery اینجا نوشته می‌شود
    $("button").click(function() {
        $("p").hide();
    });
});

روش کوتاه‌نویسی

دو روش زیر کاملاً معادل هم هستند:

// روش کامل
$(document).ready(function() {
    // کدها
});

// روش کوتاه (رایج‌تر)
$(function() {
    // کدها
});
چرا document ready لازم است؟ چون کد جاوااسکریپت ممکن است قبل از اینکه مرورگر کل HTML را بسازد اجرا شود. این رویداد می‌گوید: «صبر کن تا DOM کامل شود، بعد کد را اجرا کن».

تابع $() چیست؟

علامت $ فقط یک نام مستعار (alias) برای تابع jQuery است. این دو خط یک کار را می‌کنند:

jQuery("p").hide();   // با نام کامل
$("p").hide();        // با نام مستعار (رایج)

تابع $() بسته به ورودی، کارهای مختلفی می‌کند:

شیء jQuery

خروجی $() یک شیء jQuery است؛ شبیه آرایه‌ای از عناصر انتخاب‌شده همراه با متدهای قدرتمند:

var paragraphs = $("p");   // شیء jQuery شامل همه پاراگراف‌ها

console.log(paragraphs.length);  // تعداد پاراگراف‌ها
paragraphs.hide();               // مخفی کردن همه با یک دستور!
برخلاف جاوااسکریپت خالص که برای کار روی چند عنصر به حلقه نیاز دارید، متدهای jQuery به‌صورت خودکار روی تمام عناصر انتخاب‌شده اعمال می‌شوند. این یکی از بزرگ‌ترین مزیت‌های jQuery است.

زنجیره متدها (Chaining)

می‌توانید چند عمل را با نقطه پشت سر هم روی یک عنصر اجرا کنید:

$("#msg").css("color", "red")
         .slideUp(500)
         .slideDown(500);

جزئیات کامل زنجیره‌سازی را در درس «callback و chaining» یاد می‌گیرید.

نکات نگارشی

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط