آموزش jQuery – فصل دوم : ساختار کلی دستورات

 فصل دوم : شروع آموزش

ساختار کلی دستورات :

در jquery شما تعدادی تگ html را انتخاب کرده (selector ) و بر روی آنها عملیاتی (actions ) انجام میدهید .

$(selector).action();

در کد فوق :

• $ همان شی jQuery است .
• Selector نام یک المنت یا مشخصات یک سری المنت برا انتخاب شدن است .
• action()  هم عملی است که روی المنت های انتخابی انجام میشود .

به عنوان مثال :

$(this).hide() : عنصر جاری را مخفی میکند

 $(“p”).hide() :عمل پنهان شدن را برای تمام تگ های “p” موجود در صفحه اعمال میکند

$(“p.test”).hide() : تمام تگ های p که کلاسشان “test” تعریف شده را پنهان میکند.

$(“#test”).hide()  : تگی که آیدی آن “test”   است را مخفی میکند.

 

نکته : همان طور که مشاهده فرمودید قسمت selector برای انتخاب مجموعه ای از عناصر از ساختار CSS تبعیت میکند . در این مورد بعدا مفصل تر توضیح داده خواهد شد .

$(document).ready :

در jquery سعی میشود تمام کد ها در رویداد $(document).ready اجرا شود .

$(document).ready(function(){

—  jQuery functions —-});

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

·         پنهای کردن ( hide ) عنصری که هنوز لود نشده باعث بروز خطا یا اجرا نشدن کد میشود.

·         تغییر سایز یک عکسی که هنوز به طور کامل لود نشده نیز میتواند باعث ایجاد مشکل در نمایش سایت گردد.

 

Jquery Selectors  :

توسط Selector ها شما میتوانید یک عنصر html یا تعدادی از عناصر html با یک خصوصیت مشترک را انتخاب نمایید .

برای انتخاب تگ ها میتوان از نام آنها ، خصوصیات تعریف شده آنها (مانند id یا class یا href و … ) و یا محتوی داخلی آنها استفاده کرد .

·         برای انتخاب تگهای هم نام ، نام تگ را در قسمت Selecotrs مینویسیم :

(“p”)$ : انتخاب تمام پاراگرافها

(“a”)$ : انتخاب تمام لینک ها

• برای انتخاب تگی با یک آیدی خاص آیدی را به همراه # مینویسیم :

$(“#test”)

کد بالا تگی با آیدی test را انتخاب میکند .

• برای انتخاب تگی با یک خصوصیت (Attribute ) آن خصوصیت و مقدارش را بین [] مینویسیم :

$(“[href=’https://blog.monavarian.ir’ ” ) :

کد بالا تمام المنتهایی را که دارای خصوصیت href با مقدار https://blog.monavarian.ir هست را انتخاب میکند.

نکته : میتوان به جای مساوی در کد بالا از != و یا $=  استفاده کرد :

 : $(“[href!=’#’]”) انتخاب تمام المنتها که href آنها مخالف عبارت # باشد

$(“[href$=’.jpg’]”): انتخاب تمام عناصر که عبارت داخل href آنها به .jpg ختم شود . ( تمام لینک هایی که ب تصویر لینک شده اند )

 

·         میتوانید از ترکیب این selector ها استفاده نمایید :

$(“p.test”) : تمام تگ های p که کلاسشان test است .

$(“div#main”) : تگ div که آیدی آن main است .

$(“div#main .note”) : تمام تگ هایی با کلاس note که داخل تگ div با آیدی main هستند . دقت نمایید که در این مثال .note با یک فاصله از div#main درج شده .

نکته : به دو انتخاب زیر دقت نمایید :

$(“p.test”)

$(“p .test”)

ظاهرا این دو کد شبیه هم هستند (در دومی یک فاصله space بین p  و .test وجود دارد ) . اما اولی تگها p با کلاس test را انتخاب میکند . در حالی که دومی تمام تگهای با کلاس test که درون تگهای p قرار دارند انتخاب خواهد کرد .

 

·         برای انتخابهای خاص یک سری نماد اضافه نیز تعریف شده است :

$(“ul li:first”) : اولین li از تگ های ul را انتخاب مینماید .

$(“tr:even”) : تمام سطر های زوج جدول .

$(“tr:odd”) : تمام سطر های فرد جدول .

$(“input:not(:empty)”) : تمام input هایی که خالی نیستند

 

برای دیدن مرجع Selector ها به آدرس http://w3schools.com/jquery/jquery_ref_selectors.asp مراجعه نمایید .

 

 

jQuery Event Functions  :

Events  چیست ؟ Event یا رویداد واقعه هایی است که در یک صفحه وب اتفاق می افتد . مثلا رویداد click هنگامی که کلیکی روی عنصری زده میشود این رویداد از آن عنصر اتفاق می افتد . یا رویداد ready از عنصر document هنگامی که صفحه آماده اجرا میشود اتفاق می افتد .

چند تا از رویداد ها در jquery :

• mouseover : هنگامی که موس روی شی قرار میگیرد
• mouseout : هنگامی که موس از روی شی کنار میرود .
• Dblclick : هنگام دبل کلیک کردن روی شی اتفاق می افتد .
• Focus : هنگام فوکوس کردن روی یک شی اتفاق می افتد .
• Blur:  هنگامی که شی از حالت فوکوس خارج میشود اتفاق می افتد .

 

jQuery Event Functions  : توابعی هستند که هنگامی که یک رویداد در کد html اتفاق می افتد بطور اتوماتیک اجرا میشوند .

مثلا میتوان در jquery گفت هنگامی که روی  یک selector کلیک شد تابعی اجرا شود . به عنوان مثال :

$(“button”).click(function(){$(“p”).hide();});           

کد فوق بر روی رویداد کلیک تمام تگ های button  تابعی اجرا میکند . این تابع تمام پاراگراف های موجود در صفحه را hide میکند . در واقع هنگام اجرای صفحه html .اگر روی هر دکمه ای که در صفحه موجود است کلیک شود ، تمام تگ های p  موجود در صفحه پنهای میشود.

 

نکته: رویداد ها را به دو صورت در کد میتوان استفاده کرد :

• حالت اول وقتی که میخواهیم برای رویدادی تابعی بنویسیم :

$(selector).event(function(){ … some code … })

• حالت دوم وقتی است که میخواهیم یک رویداد را صدا بزنیم :

$(selector).event()

در این حالت رویداد مربوط به selector را صدا میزنیم .

مرجع event  ها jquery   : http://w3schools.com/jquery/jquery_ref_events.asp

 

jQuery Name Conflicts :

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

jQuery برای حل این مشکل تابعی دارد به نام noConflict() که توسط آن میتوانید نام جدید برای صدا زدن توابع jQuery ایجاد نمایید :

var jq=jQuery.noConflict()

دستور فوق باعث میشود تا شما نام jq را جایگزین $ نمایید .

 

برای اینکه jquery به بهترین حالت ممکن کار خود را انجام دهد شما باید :

• تمام کد های jquery را درون event handler ها قرار دهید .
• تمام event handler ها (توابع رویداد ها ( را درون رویداد document.ready قرار دهید .
• کدهای خود را درون یک فایل js جداگانه قرار دهید و آن را درون صفحه خود فراخوانی کنید.
• اگر تابع هم نام $ دارید توسط تابع noConflict نام تابع jquery را تعویض نمایید.

 

یک مثال ساده :

<html>

<head>

<script type=”text/javascript“ src=”jquery.js“></script>

<script type=”text/javascript“>

$(document).ready(function(){

  $(‘a’).click(function(){

      alert(‘clicked’);

  })

});

</script>

</head>

<body>

      <a href=”https://blog.monavarian.ir“ > Blog.Monavarian.ir </a>

</body>

</html>

در مثال بالا :

1. ابتدا فایل کتابخانه jquery یعنی فایل jquery.js را صدا زدیم .
2. در سطر بعدی در یک تگ script گفتیم که هنگامی که رویداد ready از شی document صدا زده شد این کار ها را انجام بده :- تابعی روی رویداد کلیک تگ های a موجود در صفحه بنویس (این تابع فقط عبارت Clicked            را بصورت پاپ آپ نمایش میدهد )
3. در بدنه صفحه یک تگ a نوشتیم .
4. با ذخیره فایل بالا به نام test1.html و اجرای آن در browser ، لینکی را میبینیم که با کلیک روی آن عبارت clicked بصورت popup نمایش می یابد .

نکته : در مثال فوق هنگامی که روی لینک کلیک میکنیم . بعد از نمایش پیغام clicked ، لینک اجرا شده و به صفحه blog.monavarian.ir  منتقل خواهیم شد . اگر میخواهید تگ a رویداد پیشفرض خود را نادیده بگیرد میتوانید از تابع preventDefault() استفاده نمایید . در این حالت تکه کد jquery ما به شکل زیر تغییر میکند :

$(document).ready(function(){

 $(‘a’).click(function(event){

     alert(‘clicked’);

      event.preventDefault();

 });

});