قواعد دستوری جیکوئری

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

$(selector).action()

در این ساختار، علامت $ به jQuery اشاره می کند، بخش selector مشخص می کند کدام عنصرهای HTML هدف هستند و action() نام عملی است که باید انجام شود. برای نمونه، متد hide() عنصر انتخاب شده را پنهان می کند و متد show() می تواند آن را دوباره نمایش دهد.

ترتیب اجزای دستور اهمیت دارد. ابتدا باید عنصر مناسب را با انتخابگر پیدا کنید و بعد متدی را فراخوانی کنید که با هدف شما هماهنگ است. اگر انتخابگر هیچ عنصری را پیدا نکند، معمولاً دستور خطای آشکاری نشان نمی دهد، اما تغییری هم در صفحه دیده نخواهد شد. به همین دلیل بررسی نام کلاس، شناسه یا تگ در کد HTML بخش مهمی از عیب یابی است.

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

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

برای مثال، اگر بخواهید با کلیک روی یک دکمه پیام کوتاهی در کنسول مرورگر ثبت کنید، ابتدا باید دکمه را پیدا کنید و سپس رویداد کلیک را به آن متصل کنید. در نسخه های جدید jQuery می توانید از الگوی $(document).ready() برای اجرای کد پس از آماده شدن ساختار صفحه استفاده کنید. در پروژه هایی که از روش های مدرن جاوااسکریپت استفاده می کنند، رویداد DOMContentLoaded نیز گزینه ای بومی و مناسب است.

$(document).ready(function() {
  console.log("صفحه آماده است");
});

اگر علامت دلار در پروژه به متغیر یا کتابخانه دیگری اختصاص یافته باشد، ممکن است لازم شود از نام کامل jQuery استفاده کنید یا تداخل را مدیریت کنید. این حالت در همه پروژه ها رخ نمی دهد، اما دانستن آن هنگام بررسی کدهای قدیمی یا صفحه هایی که چند کتابخانه دارند مفید است.

انتخابگر تعیین می کند کدام بخش از صفحه تحت تأثیر دستور قرار بگیرد. انتخابگرهای jQuery از الگوهای آشنای CSS استفاده می کنند؛ بنابراین اگر با انتخاب کلاس، شناسه و تگ در CSS آشنا باشید، شروع کار با انتخابگرهای jQuery برایتان ساده تر خواهد بود. دقت در انتخابگر از اجرای ناخواسته عملیات روی بخش های دیگر صفحه جلوگیری می کند.

برای انتخاب یک کلاس، نام آن را پس از نقطه می نویسیم. برای انتخاب یک شناسه از علامت شارپ استفاده می شود و برای هدف گرفتن همه تگ های هم نوع، نام تگ را می آوریم. فرض کنید در صفحه چند دکمه وجود دارد، اما قرار است فقط دکمه ای با کلاس مشخص پنهان شود؛ انتخاب کلاس دقیق تر از انتخاب همه تگ های دکمه است.

نمونه های زیر تفاوت این انتخابگرها را نشان می دهند. در مثال کلاس، نقطه بخشی از دستور انتخاب است و در مثال شناسه، علامت شارپ نقش مشابهی دارد. برای انتخاب تگ نیز نام تگ را به صورت رشته می نویسیم:

$(".classname").hide();
$("#IDname").hide();
$("div").hide();

در انتخاب یک تگ باید آن را داخل رشته قرار دهید؛ بنابراین شکل درست انتخاب همه عناصر div، نوشتن $("div") است. نوشتن $(div) بدون کوتیشن ممکن است باعث شود جاوااسکریپت به دنبال متغیری با نام div بگردد، نه اینکه تگ مورد نظر را در صفحه انتخاب کند.

پس از انتخاب عنصر، متد مشخص می کند چه تغییری روی آن انجام شود. متد hide() برای پنهان کردن، show() برای نمایش و toggle() برای جابه جایی میان این دو وضعیت کاربرد دارد. انتخاب متد باید با تجربه مورد انتظار کاربر هماهنگ باشد؛ برای نمونه، دکمه باز و بسته کردن یک بخش معمولاً به رفتاری نیاز دارد که وضعیت فعلی را تغییر دهد.

تصور کنید در صفحه یک بخش راهنما و دکمه ای برای نمایش آن وجود دارد. اگر همیشه از show() استفاده کنید، کلیک های بعدی فقط بخش را در حالت نمایش نگه می دارند. اما toggle() می تواند با هر کلیک، وضعیت نمایش را عوض کند. برای رابط های کاربری روشن تر، بهتر است متن دکمه هم متناسب با وضعیت بخش به روز شود تا کاربر بداند با کلیک بعدی چه اتفاقی می افتد.

$("#help").toggle();

متدها فقط برای نمایش و پنهان کردن نیستند. jQuery امکاناتی برای تغییر متن، افزودن یا حذف کلاس، واکنش به رویدادها و پیمایش میان عناصر صفحه دارد. در عمل بهتر است هر دستور را به یک هدف روشن محدود کنید و از زنجیره کردن چند عملیات پیچیده در یک خط، به ویژه هنگام یادگیری یا عیب یابی، پرهیز کنید.

کلمه کلیدی this در بسیاری از رویدادها به عنصری اشاره می کند که رویداد روی آن اتفاق افتاده است. این قابلیت زمانی کاربرد دارد که چند عنصر مشابه در صفحه دارید، اما می خواهید فقط همان عنصری تغییر کند که کاربر با آن تعامل کرده است. استفاده درست از this باعث می شود لازم نباشد برای هر عنصر یک دستور جداگانه بنویسید.

برای نمونه، فرض کنید چند دکمه با کلاس یکسان در کارت های مختلف قرار دارند. با اتصال یک رویداد به همه دکمه ها و استفاده از $(this)، می توانید تنها دکمه کلیک شده را پنهان کنید. در این حالت، انتخابگر عمومی کلاس برای اتصال رویداد به مجموعه دکمه ها به کار می رود و this داخل تابع رویداد، عنصر مشخصی را که کلیک شده هدف می گیرد.

$(".close-button").on("click", function() {
  $(this).hide();
});

در نمونه بالا، متد on() رویداد کلیک را ثبت می کند و تابع پس از رخ دادن رویداد اجرا می شود. اگر this را بیرون از تابع رویداد به کار ببرید، ممکن است به عنصری که انتظار دارید اشاره نکند؛ زیرا معنای آن به زمینه اجرای کد وابسته است. بنابراین محل استفاده از آن را با ساختار تابع و رویداد بررسی کنید.

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

در مثال زیر، کد داخل تابع آماده سازی سند قرار گرفته است. سپس هنگام کلیک روی عنصر دارای شناسه myButton، متن عنصر دارای شناسه message تغییر می کند. اگر شناسه های داخل کد با شناسه های واقعی HTML یکسان نباشند، رویداد یا تغییر متن اجرا نخواهد شد؛ پس هماهنگی میان HTML و jQuery را بررسی کنید.

$(document).ready(function() {
  $("#myButton").on("click", function() {
    $("#message").text("دکمه کلیک شد");
  });
});

برای کدهای کوتاه، بعضی پروژه ها از شکل خلاصه آماده سازی سند هم استفاده می کنند. مهم تر از شکل نوشتن، قرار گرفتن کد در زمان مناسب و اطمینان از بارگذاری کتابخانه jQuery پیش از اجرای آن است. اگر فایل کتابخانه دیرتر یا اصلاً بارگذاری نشود، فراخوانی های مبتنی بر $ کار نخواهند کرد.

در نمونه های اولیه، معمولاً لازم است یک عنصر جاری، یک کلاس، یک شناسه یا یک نوع تگ را انتخاب کنید. دستورهای زیر همان الگو را برای حالت های مختلف نشان می دهند. هر مثال را می توانید با ساختار HTML متناظر در صفحه آزمایش کنید و نتیجه را در مرورگر ببینید.

برای پنهان کردن عنصر جاری درون یک تابع رویداد، از $(this).hide() استفاده می شود. برای پنهان کردن همه عنصرهایی که کلاس مشخص دارند، نام کلاس را پس از نقطه می آوریم. برای انتخاب یک شناسه، علامت شارپ و برای انتخاب یک تگ، نام تگ درون کوتیشن قرار می گیرد:

$(this).hide();
$(".classname").hide();
$("#IDname").hide();
$("div").hide();

این نمونه ها از متد hide() برای یکسان ماندن نتیجه استفاده می کنند، اما بخش انتخابگر در هر دستور متفاوت است. اگر صفحه فقط یک عنصر با شناسه مشخص داشته باشد، انتخاب شناسه راه مستقیمی برای هدف گرفتن آن است. اگر چند عنصر کلاس مشترک داشته باشند، انتخاب کلاس همه آن ها را برمی گزیند. انتخاب تگ نیز همه عناصر از همان نوع را هدف می گیرد و باید با دقت استفاده شود.

بسیاری از خطاهای ابتدایی jQuery به تفاوت های کوچک در نام گذاری یا نشانه گذاری مربوط می شوند. اگر نتیجه دستور مطابق انتظار نیست، پیش از تغییر کل کد، انتخابگر، وجود عنصر در صفحه و زمان اجرای دستور را بررسی کنید. خطاهای کنسول مرورگر هم می توانند سرنخ ارزشمندی درباره علت مشکل ارائه دهند.

در انتخاب تگ، نام آن باید رشته باشد و در کوتیشن قرار بگیرد؛ برای مثال $("div"). در انتخاب کلاس و شناسه نیز نقطه و شارپ بخشی از انتخابگر هستند. نوشتن نام کلاس بدون نقطه یا نام شناسه بدون شارپ، انتخابگر مورد نظر را به شکل دیگری تفسیر می کند و ممکن است نتیجه ای نداشته باشد.

نامی که در انتخابگر نوشته اید باید دقیقاً با مقدار موجود در HTML مطابقت داشته باشد. بزرگی و کوچکی حروف، خط تیره و زیرخط یا یک فاصله اضافی می تواند باعث شود عنصر پیدا نشود. هنگام بررسی، عنصر را در ابزار توسعه مرورگر پیدا کنید و مقدار واقعی ویژگی های class و id را با کد مقایسه کنید.

اگر کد پیش از ساخته شدن عنصرها اجرا شود، انتخابگر نمی تواند آن ها را پیدا کند. همچنین اگر فایل jQuery بارگذاری نشده باشد، استفاده از $ می تواند خطا ایجاد کند. ترتیب بارگذاری فایل ها و محل قرارگیری کد را بررسی کنید و مطمئن شوید کتابخانه پیش از اسکریپت وابسته به آن در دسترس است.

انتخاب یک تگ عمومی مانند div ممکن است تعداد زیادی عنصر را تحت تأثیر قرار دهد. اگر هدف شما فقط یک بخش خاص است، از شناسه یا ترکیبی دقیق تر از کلاس و تگ استفاده کنید. برای نمونه، انتخاب کلاس اختصاصی کارت ها به جای همه تگ های مشابه، رفتار قابل پیش بینی تری ایجاد می کند.

جدول زیر اجزای پایه دستور و نمونه کاربرد هر کدام را کنار هم قرار می دهد. از آن می توانید برای مرور سریع تفاوت انتخابگرها و متدها استفاده کنید. به یاد داشته باشید که نام کلاس و شناسه در مثال ها نمونه هستند و باید با مقادیر واقعی صفحه خودتان جایگزین شوند.

قواعد دستوری jQuery بر یک الگوی ساده استوار است: با $ عنصرهای مورد نظر را انتخاب کنید و سپس متد مناسب را روی آن ها اجرا کنید. انتخابگر کلاس با نقطه، انتخابگر شناسه با شارپ و انتخابگر تگ با نام آن درون کوتیشن نوشته می شود. همچنین $(this) در تابع رویداد کمک می کند همان عنصری را هدف بگیرید که کاربر با آن تعامل کرده است.

برای نوشتن کد مطمئن، نام انتخابگرها را با HTML تطبیق دهید، زمان اجرای دستور را در نظر بگیرید و مطمئن شوید jQuery پیش از کدهای وابسته بارگذاری شده است. مثال ها را در یک صفحه ساده آزمایش کنید و با مشاهده نتیجه، تفاوت انتخابگرها و متدها را بهتر یاد بگیرید. این اصول نقطه شروع مناسبی برای ادامه آموزش jquery و ساخت تعامل های کاربردی در صفحه هستند.

اگر در کنار یادگیری برنامه نویسی به خدمات طراحی سایت نیاز دارید، بررسی ساختار و هدف صفحه پیش از پیاده سازی قابلیت ها می تواند به انتخاب راهکار مناسب کمک کند.