فصل دوم : شروع آموزش
ساختار کلی دستورات :
در 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>
در مثال بالا :
- ابتدا فایل کتابخانه jquery یعنی فایل jquery.js را صدا زدیم .
- در سطر بعدی در یک تگ script گفتیم که هنگامی که رویداد ready از شی document صدا زده شد این کار ها را انجام بده :- تابعی روی رویداد کلیک تگ های a موجود در صفحه بنویس (این تابع فقط عبارت Clicked را بصورت پاپ آپ نمایش میدهد )
- در بدنه صفحه یک تگ a نوشتیم .
- با ذخیره فایل بالا به نام test1.html و اجرای آن در browser ، لینکی را میبینیم که با کلیک روی آن عبارت clicked بصورت popup نمایش می یابد .
نکته : در مثال فوق هنگامی که روی لینک کلیک میکنیم . بعد از نمایش پیغام clicked ، لینک اجرا شده و به صفحه blog.monavarian.ir منتقل خواهیم شد . اگر میخواهید تگ a رویداد پیشفرض خود را نادیده بگیرد میتوانید از تابع preventDefault() استفاده نمایید . در این حالت تکه کد jquery ما به شکل زیر تغییر میکند :
$(document).ready(function(){
$(‘a’).click(function(event){
alert(‘clicked’);
event.preventDefault();
});
});
