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

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

در 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();

 });

});

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

گفتم خودم شروع کنم به نوشتن آموزش جی کوئری (jquery ) .

البته فعلا فصل فصل میذارم و وقتی آموزش تمام شد همه رو بصورت یک فایل pdf برای دانلود خواهم گذاشت .

لطفا برای تکمیل این کتاب الکترونیکی مشکلاتتون رو با این آموزش  بیان کنید .

آموزش jquery

فصل اول : کلیات jquery

Jquery چیست ؟

Jquery  یک کتابخانه بسیار مفید برای جاوااسکریپت است .

Jquery بسیار ساده و کارآمد است و مشکل جاوااسکریپت را برای تطابق با بروزرهای مختلف برطرف نموده .

یادگیری jquery بسیار آسان است .

در Jquery  کد جاوااسکریپت از فایل html جدا شده و بنابراین کنترل کد ها و بهینه سازی آنها بسیار ساده تر خواهد شد .

Jquery  توابعی برای کار با ایجاکس فراهم نموده و در این زمینه نیز کار را بسیار ساده کرده است .

 

پیش نیازها :

برای دانستن jquery  باید با زبانهای html  ، CSS  و جاوااسکریپت آشنایی داشته باشید .

 

چگونه از زبان jquery استفاده کنیم ؟

شما تنها نیاز دارید که آخرین نسخه jquery  را از سایت http://jquery.com بصورت رایگان دانلود کنید . این فایل یک فایل جاوااسکریپت با پسوند js است که باید آن را در فایل html خود  در قسمت  <head> فراخوانی نمایید .

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

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

<script type=”text/javascript”>
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});
});
</script>

به عنوان مثال قطعه کد زیر هنگامی که روی عبارت “Click Me ” کلیک شود این تگ پنهان (hide ) میشود .

<html>

<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});
});
</script>
</head>

<body>
<p> Click Me <p>
</body>

</html>

همان طور که در کد بالا میبینید تمام کدهای jquery   درون یک تابع به نام $ نوشته شده و قابل استفاده هستند .

 به جای حرف $ میتوان از نام کامل آن  jQuery  استفاده کرد .

در خط اول کد (خط پنجم قطعه کد بالا ) تابعی را هنگامی که برنامه ما آماده اجراشدن است صدا میزنیم ( هنگامی که رویداد ready  از شی document صدا زده شده است ) .

در این تابع میگوییم (خط دوم کد ) : هنگامی که روی همه تگهای “p” کلیک شد تابعی صدا زده شود که کارش این است که این تگ  (تگی که رویش کلیک شده ) را پنهان (hide  ) نماید .

به همین سادگی . حال اگر صد تا تگ p هم در قسمت body فایل خود بنویسیم . هنگامی که روی هرکدام کلیک میشود این تابع اجرا میشود .

اگر نگران ساختار مبهم jquery هستید باید به شما اطمینان دهم که بزودی در طی روند این آموزش  به این ساختار عادت کرده و از آن لذت خواهید برد .

نکته : شما همچنین میتوانید کدهای خود را در یک فایل  js جداگانه بنویسید و سپس آن را  پس از فراخوانی کتابخانه jquery.js ، فراخوانی نمایید :

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

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

 برنامه ide مناسب برای jquery :

شما میتوانید کدهای jquery را در تمام برنامه های طراحی وب مانند Dreamweaver Zend Studion , Eclips, بنویسید اما معروفترین محیط برای برنامه نویسی jquery در حال حاضر نرم افزار open source به نام AptanaStudio است که برای کد نویسی جاوااسکریپت نوشته شده اما کتابخانه jquery هم به آن اضافه شده که البته در این زمان که بنده مشغول نوشتن این آموزش هستم باید نرم افزار را جداگانه دانلودنمایید و کتابخانه راهنمای jquery را جداگانه تهیه و بر روی آن نصب کنید :

نرم افزار Aptana  را از سایت http://www.aptana.com دانلود نمایید .

کتابخانه jquery را که برای Aptana تهیه شده از سایت  http://www.bitstorm.org/edwin/jquery       دریافت نمایید .

( دریافت مستقیم از همین وبلاگ : لینک دریافت : https://blog.monavarian.ir/wp-content/aptana_jquery-111_sdoc.zip)

وارد نر افزار Aptana  شوید :

به قسمت Windows -> Show view -> Other همانند شکل زیر وارد شوید :

پنجره زیر نمایش میابد . مانند شکل در قسمت Aptana views  روی Prefrences کلیک کنید :

در پنجره preferences روی دکمه Add  کلیک کنید . به مسیر فایل کتابخانه jqury (شامل دو فایل js و sdoc ) بروید و آن را به پنجره اضافه کنید :

همان طور که در تصویر فوق میبینید . این کتابخانه به Aptana اضافه شده است . حال در صورتی که یک فایل html یا js باز کنید . میتوانید درون آن هنگام نوشتن کدهای jquery از پنجره راهنما استفاده نمایید :

در صورتی که این پنجره باز نشد برای باز کردن آن میتوانید از کلید های ترکیبی Ctrl+Space  استفاده نمایید .