سینتکس (Syntax)
در این صفحه با سینتکس jQuery آشنا می شوی. یعنی شکل کلی نوشتن دستورات jQuery را می بینی. مثل وقتی در ریاضی یک فرمول کلی داری و بعد عددها را جایش می گذاری، اینجا هم یک الگوی ثابت داریم و فقط بخش هایش را عوض می کنیم.
سینتکس jQuery چطور نوشته می شود؟
سینتکس jQuery برای انتخاب عناصر HTML و انجام یک عمل روی آن ها طراحی شده است. شکل کلی آن این است: $(selector).action(). یعنی اول از jQuery کمک می گیری، بعد یک «انتخابگر (Selector)» می دهی، و در آخر روی آن یک «عمل (Action)» اجرا می کنی.
- علامت
$برای دسترسی به jQuery استفاده می شود. (selector)یعنی پیدا کردن عناصر HTML مورد نظر.action()متدی است که روی عناصر اجرا می شود.
مثال ها در منبع این ها هستند: $(this).hide() عنصر فعلی را مخفی می کند. $("p").hide() همه تگ های <p> را مخفی می کند. $(".test").hide() همه عناصر با کلاس test را پنهان می کند. $("#test").hide() عنصر با شناسه test را پنهان می کند.
نکته: jQuery برای انتخاب عناصر از همان دستورهای انتخابگر CSS استفاده می کند. یعنی اگر انتخابگر CSS بلد باشی، کار با سینتکس jQuery برایت خیلی ساده تر است.
ارتباط سینتکس jQuery و انتخابگرهای CSS
اگر با انتخابگرهای CSS آشنا باشی، این بخش برای تو ساده است. چون jQuery همان سبک را استفاده می کند. "p" یعنی همه تگ های پاراگراف، ".class" یعنی همه عناصر با آن کلاس، و "#id" یعنی یک عنصر با آن شناسه. در فصل بعدی، در صفحه انتخابگرهای jQuery این بخش را دقیق تر می بینی.
نکته: اگر هنوز CSS را خوب نمی شناسی، می توانی آموزش CSS را در W3Schools بخوانی: CSS Tutorial در W3Schools.
رویداد آماده بودن سند (Document Ready)
در مثال ها، همه متدهای jQuery داخل یک رویداد آماده بودن سند قرار گرفته اند. این رویداد وقتی اجرا می شود که صفحه HTML کامل لود شده باشد. یعنی همه تگ ها ساخته شده باشند. این کار جلوی خطاهای «عنصر هنوز وجود ندارد» را می گیرد.
$(document).ready(function() {
// jQuery methods go here...
});
این ساختار می گوید: «وقتی سند آماده شد، این تابع را اجرا کن». داخل این تابع، هر دستور jQuery که بنویسی فقط وقتی اجرا می شود که صفحه کامل لود شده باشد. این یعنی اگر می خواهی عنصری را مخفی کنی، مطمئن هستی آن عنصر قبلاً در صفحه ساخته شده است.
اگر زودتر از این زمان کد اجرا شود، ممکن است بعضی عناصر هنوز در صفحه وجود نداشته باشند. در این حالت، jQuery نمی تواند آن ها را پیدا کند. پس بهتر است همیشه کدهای jQuery را داخل رویداد آماده بودن سند قرار دهی.
نسخه کوتاه رویداد Document Ready
تیم jQuery یک نسخه کوتاه تر از همین رویداد ساخته است. این نسخه کارایی یکسانی دارد، فقط نوشتن آن سریع تر است. هر دو نسخه یک معنا دارند، فقط شکل نوشتن فرق می کند.
$(function() {
// jQuery methods go here...
});
در این نسخه کوتاه، دیگر کلمه document را نمی نویسی، اما پشت صحنه همان کار انجام می شود. در خواندن کد، خیلی ها نسخه کامل را دوست دارند، چون قابل فهم تر است. اما در عمل، هر دو برای سینتکس jQuery درست و قابل استفاده هستند.
چه چیزهایی قبل از آماده شدن سند خراب می شود؟
اگر قبل از آماده شدن سند کد jQuery را اجرا کنی، بعضی کارها ممکن است شکست بخورد. مثلاً می خواهی یک عنصر را مخفی کنی، اما آن عنصر هنوز وارد صفحه نشده است. یا می خواهی اندازه یک تصویر را بگیری، اما تصویر هنوز کامل لود نشده است.
پس بهتر است همیشه صبر کنی تا سند آماده شود. این کار همچنین اجازه می دهد فایل اسکریپت خودت را حتی در بخش <head> صفحه قرار بدهی. چون اجرای کد داخل ready تا بعد از لود کامل صفحه عقب می افتد.
گام های عملی برای تمرین سینتکس jQuery
- مطمئن شو در صفحه قبلی، یعنی شروع کار jQuery، jQuery را درست اضافه کرده ای.
- یک فایل HTML ساده باز کن و یک تگ <p> در آن قرار بده.
- داخل رویداد
$(document).ready()یک دستور ساده مثل$("p").hide()بنویس. - فایل را در مرورگر باز کن و نتیجه را ببین.
- حالا انتخابگر را عوض کن و به جای تگ، کلاس یا id را امتحان کن.
اگر این مراحل برایت واضح شد، یعنی پایه سینتکس jQuery را درست گرفته ای. قدم بعدی این است که وارد صفحه انتخابگرهای jQuery شوی و روی بخش انتخابگرها عمیق تر تمرین کنی.
جمع بندی سریع
- فرمول کلی سینتکس jQuery این است:
$(selector).action(). - jQuery برای انتخاب عناصر از همان انتخابگرهای CSS استفاده می کند.
- رویداد
$(document).ready()جلوی اجرای زودهنگام کد را می گیرد. - نسخه کوتاه
$(function() { ... })هم همین کار را انجام می دهد. - بعد از یادگیری سینتکس، حتماً سراغ انتخابگرها و مثال های بیشتر برو.