آموزش جی کوئری – سینتکس jQuery

  • آپدیت شده در تاریخ

آموزش جی کوئری

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

 

استاندارد سینتکس jQuery

یک دستور جی کوئری معمولا با یک علامت دلار ($) شروع و با یک نقطه-ویرگول (;) تمام می شود.

در جی کوئری, علامت دلار ($) یک مستعار (alias) برای jQuery است.

بیاید کد مثال پایین را به عنوان ساده ترین دستور برای جی کوئری در نظر بگیریم :

در مثال بالا ما به سادگی یک پیام alert حاوی “Hello World!” را به کاربر نمایش دادیم.

توضیح کد jQuery بالا

اگر کاملا در بحث جی کوئری جدید هستید, احتمالا فک کنید که اصلا کد بالا در مورد چی بود. اما بیاییم هر بخش را یک به یک بررسی کنیم.

  • المان <script> – از آنجا که جی کوئری فقط یک کتابخانه جاوا اسکریپت است بنابراین کد جی کوئری می تواند داخل المان <script> قرار بگیرد. به هر حال, اگر قصد داشتید آن را در یک فایل جاوااسکریپت خارجی قرار بدید کافی است این بخش را حذف کنید.
  • $(document).ready(handler); – این دستور معمولا به عنوان رویداد ready شناخته می شود. مقدار handler نیز یک تابع است که به متد ready() پاس داده می شود که آن را بصورت امن زمانی که DOM کاملا لود شده است اجرا کند.

متد ready() در جی کوئری معمولا برای یک تابع anonymous به کارر می رود. بنابراین مثال بالا بصورت کوتاه می تواند بصورت زیر نوشته شود.

نکته: می توانید از هر دو سینتکس jQuery بالا استفاده کنید. به هر حال رویداد ready هنگام خواندن کدها ساده تر قابل درک است.

بنابراین می توانید داخل یک تابع مدیریت رویداد یک دستور jQuery را برای انجام هر عملیاتی بنویسید : $(selector).action();

از آنجا که $(selector) بطور ساده المان های HTML را از درخت DOM انتخاب می کند بنابراین می توانید آن را دستکاری کنید و action() نیز بعضی عملیات مانند تغییر مقدار CSS یا ست کردن محتوای المان و غیره.. روی المان سلکت شده اعمال می کند.

یک مثال دیگر از ست کردن متن پاراگراف را بعد آماده بودن DOM را ببینید :

در دستور jQuery بالا (خط ۱۰) p یک سلکتور جی کوئری است که همه پاراگراف ها (المان های <p>) را انتخاب می کند و سپس متد text() محتوای متن  پاراگراف را ست می کند.

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

در مثال  بالا فقط زمانی متن پاراگراف تغییر می کنید یک رویداد کلیک بروی دکمه “Replace Text” المان <button> ایجاد و کلیک شود.

حالا یک درک پایه از نحوه کار جی کوئری را بدست آوردید, در فصل های بعدی با جزییات بیشتری در مورد اصطلاحات استفاده شده آموزش می دهیم.

 

امیدوارم در این بخش آموزش جی کوئری, از سینتکس jQuery نهایت استفاده را برده باشید.

در بخش بعدی با متغیرها در جی کوئری آشنا می شوید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی