• تهرانپارس ، خ شهید محمود آمینه بزرگراه رسالت، پلاک 213، طبقه2، واحد7

  • 021-77295097 0912-8099518

  • شنبه تا پنجشنبه۹ صبح تا ۶ بعد از ظهر

شروع کار با JQuery

شروع کار با JQuery

افزودن jQuery به صفحات وب

برای استفاده از کتابخانه JQuery شما ابتدا باید JQuery را از سایت JQuery.com دانلود نمایید. دو نسخه از jQuery برای دانلود وجود دارد:

نسخه تولید (Production version) : این  نسخه برای زمانی که می خواهید وب سایت خود را بر روی host آپلود کنید مناسب است زیرا فشرده و کم حجم است.

نسخه توسعه (Development version) : این نسخه برای آزمایش و توسعه مناسب تر است، چون فشرده نیست و خواندن آن راحت تر است.

کتابخانه JQuery یک فایل JavaScript تنها است که شما باید این فایل را با استفاده از تگ < script> به صفحه HTML ارجاع دهید. توجه داشته باشید که تگ < script> باید در قسمت < head> باشد.

JQuery

نکته: صفت src به آدرس محل قرارگیری فایل JQuery در دایرکتوری ای که قرار داده اید اشاره دارد.

JQuery Syntax

با JQuery شما عناصر HTML را انتخاب می کنید و اعمالی را روی آنها انجام می دهید. JQuery از سینتکس CSS برای انتخاب عناصر استفاده می کند.

نحو اساسی JQuery عبارت است از: $(selector).action()

  • یک علامت $ برای تعریف / دسترسی به jQuery
  • یک گزینشگر (selector) برای پیدا کردن عناصر HTML
  • یک اکشن که باید بر روی عناصر HTML اعمال گردد.

مثال:

  • $(this).hide() : عنصر جاری را مخفی می کند.
  • $(“p”).hide() : تمام عناصر < p> را مخفی می کند.
  • $(“.test”).hide() : تمام عناصری که کلاس "test" دارند را مخفی می کند.
  • $(“#test”).hide() : عنصری با شناسه “test” را مخفی می کند.

رویداد Document Ready

شاید توجه کرده باشید که تمام متدهای jQuery در مثال های ما ، در یک رویداد document ready هستند:

JQuery

این کار برای جلوگیری از اجرای هر کد jQuery قبل از اتمام بارگذاری سند HTML است.

خوب است قبل از کار با JQuery منتظر بمانید تا سند HTML کاملاً بارگیری و آماده شود. این همچنین به شما امکان می دهد تا در قسمت head ، کد JavaScript خود را قبل از بدنه سند HTML داشته باشید.

در زیر دو نمونه از کارهایی را ذکر کردیم که اگر متدها قبل از بارگیری کامل سند HTNL اجرا شوند، می توانند شکست بخورند:

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

نکته: تیم jQuery همچنین یک روش کوتاه تر برای رویداد document ready ایجاد کرده است:

JQuery

 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>

</html>