تبلیغات
یادداشت های من - آموزش JQuery – جلسه دوم: نحو (دستورات یا سینتکس Syntax) JQuery

یادداشت های روزانه من درباره اینترنت، سیاست، آبکنار، رایانه، شعر، فناوری اطلاعات و ...
هر چیزی که بهش علاقه دارم

حسین (کیوان) جهانبخش آبکنار

جستجو

 

آموزش JQuery – جلسه دوم: نحو (دستورات یا سینتکس Syntax) JQuery

یکشنبه 1 خرداد 1390   09:46 ب.ظ

یا جی کوئری شما عناصر HTML را انتخاب کرده (Query = Select) و «اعمالی» را بر روی آنها اجار می کنید.

مثال های نحوی JQuery

$(this).hide()

این مثال متد hide() جی کوئری را نشان می دهد که عنصر جاری را مخفی می کند

$(“#test”).hide()

این مثال متد hide() را روی عنصری با id=”test” اعمال می کند.

$(“p”).hide()

این مثال تمام عناصر <p> صفحه را مخفی می کند.

$(“.test”).hide()

این مثال تمام عناصر با class=”test” را مخفی می کند.

 

نحو (Syntax) جی کوئری

نحو جی کوئری برای انتخاب عناصر HTML مناسب سازی شده و بعضی اعمال (Action) را بر روی آن عناصر اعمال می کند.

دستور نحوی اصلی به این صورت است:

$(selector).action()

  • یک علامت دلار ($) که JQuery را تعریف میکند. یعنی نشان دهنده این است که این یک دستور جی کوئری است.
  • یک (selector) که برای یافتن (query) عناصر HTML به کار می رود.
  • یک اکشن جی کوئری برای اعمال روی عناصر

 

مثال ها:

$(this).hide()

عنصر حاضر را مخفی می کند.

$("p").hide()

تمام پاراگراف ها را مخفی می کند.

$("p.test").hide()

همه ی پاراگراف ها با class=”test” را مخفی می کند.

$("#test").hide()

همه عناصر با id=”test” را مخفی می کند.

 

نکته: جی کوئری ادغامی از دستورات انتخاب XPath و CSS است. البته در جلسات بعد توضیحات بیشتری درباره نحو و دستورات جی کوئری می آموزید.

 

تابع Document Ready:

شاید تا به حال کدهای جی کوئری دیده باشید. نکته قابل توجه در این است که همه کدهای جی کوئری در داخل تابع document.ready() نوشته می شوند.

$(document).ready(function(){

   // jQuery functions go here...

});

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

مثلاً اگر کارهای زیر را بخواهیم قبل از لود کامل صفحه انجام دهیم به خطا بر می خوریم:

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

پ ن : این مجموعه آموزش ها از سایت W3C ترجمه شده و خواهد شد. جهت آشنایی خودم و دیگران منتشر می کنم.


نوشته شده توسط : حسین (کیوان) جهانبخش آبکنار

نوع مطلب : JQuery ،