آموزش قسمت اول جیکوئری Jquery

1395/8/30 خانم زارع 10860

سلام دوستان عزیز، من زهرا زارع دار هستم و با مجموعه آموزش صفر تا صد jquery در خدمت شما هستم.
خب در ابتدای کار باید  باید بدونیم که اصلا jquery چی هستش و چرا ازش استفاده می کنیم؟
جی کوئری  یکی از محبوب ترین و پرکاربردترین کتابخانه های جاوا اسکریپت مخصوص نوشتن کدهای سمت مشتری در HTML هستش،  و همونطور که میدونید هر کتابخونه شامل یکسری متد هاست، پس شما هر کدی که بخواهید با جی کوئری بنویسید، با جاوا اسکریپت هم خواهید توانست نوشت ، پس با این حساب  مزیت  استفاده از جی کوئری چی میتونه باشه؟

ببینید در یک جمله کوتاه جواب رو خلاصه می کنم: "جی کوئری این امکان رو به شما میده که کمتر حرف بزنید و بیشتر عمل کنید!" یعنی در عین اینکه میتونید نوشتن کد رو نسبت به جاوا اسکریپت تا حد چشمگیری کمتر کنید ، و سرعت رو افزایش ، همچنین باعث میشه عملیات بیشتری رو انجام بدید. همونطور که میدونید کدهای جاوا اسکریپت اجراهای متفاوتی در مرورگرهای مختلف داره که به همین دلیل گاهی اوقات مجبوریم زحمت زیادی رو برای بازنویسی کدها متحمل شیم اما جی کوئری از انواع مختلف مرورگر ها پشتیبانی می کنه و اجرای یکسانی رو در تمام مرورگر ها داره.

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

خب قبل از شروع چند تا نکته رو گوشزد کنم و بعد بریم سراغ آموزش. پیشنیاز یادگیری جی کوئری، آشنایی مقدماتی با کدهای جاوا اسکریپت و البته CSS و HTML هستش.  جی کوئری سه نوع مختلف کتابخانه داره که ما  برای شروع کار از کتابخانه عمومی رایگانش که در و ب سایت www.jquery.com وجود داره استفاده می کنیم و پس از اتمام مراحل آموزش،  ان شالله در آینده به دو نوع دیگه یعنی jquery-ui برای انواع افکت ها و jquery mobile برای طراحی اپلیکشن های موبایل اشاره خواهیم کرد.

شروع:
اولین کاری که باید انجام بدیم، رفتن به وب سایت رسمی جی کوئری و دانلود کتابخانه اون هستش. پس آدرس  www.jquery.com رو در مرورگر وارد کنید تا وارد صفحه ای مانند زیر بشید:

آموزش جیکوئری

خب با انتخاب Download در صفحه اصلی ،وارد صفحه ای مانند زیر خواهیم شد:

آموزش jquery

در این بخش میتونید دو نسخه از جی کوئری یعنی نسخه 1 و 2 رو ببینید که برای دانلود در دسترس شما قرار داده شدن. ما کارمون رو با دانلود جی کوئری نسخه 1 جلو میبریم چرا که نسخه 2 هنوز در بعضی از مرورگرها پشتیبانی نمیشن. در نسخه 1 دو نوع از این کتابخانه برای دانلود در دسترس قرار داده شده:

نسخه compressed, production jQuery 2.2.0: همونطور که از نامش پیداست، به صورت فشرده شده هستش و دلیل حجم پایین، حذف توضیحات اضافه می باشد. اما خب باید به این نکته توجه داشت که در صورت حجم پایین کد، سرعت اجرا بالاتر میره، پس از این نسخه برای وب سایت استفاده می کنیم. خب روی این لینک کلیک کنید تا بتونیم کدهاش رو ببینیم:

آموزش جیکوئری

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

نسخه uncompressed, development jQuery 1.12.0:  یا نسخه غیر فشرده که با حجم بالاتر اما با توضیحات بیشتر موجود هست. این نسخه بیشتر مورد توجه کسانی هست که بخوان این زبان رو توسعه بدن. خب پس  قطعا باید این کدها کاملا خوانا و مرتب باشن تا برنامه نویس ها بهتر متوجه اش بهش. خب حالا این لینک رو هم باز میکنم تا بتونم کدهای مرتب اش رو ببینم:

آموزش جیکوئری

برمیگردیم سراغ نسخه فشرده تا ذخیرش کنیم. روش ذخیره کردن بسیار سادست. کافیه که از منوی فایل مرورگر گزینه Save Page As… رو انتخاب کنید و مسیر دلخواه رو توی سیستم تون بهش بدید:

خب حالا یه نکته قابل توجه دوستانی بگم که هم چنان اصرار دارن از نسخه فشرده نشده استفاده کنن. من هر دو نسخه uncompressed و compressed رو دانلود کردم و کنار هم قرار دادم. به حجم هاشون دقت کنید.

آموزش جیکوئری

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

در ابتدا باید فایل جی کوئری  رو در محیط برنامه نویسیتون کپی کنید.  توجه داشته باشید که از یک محیط مناسب بسته به نوع زبان و کارتون برای جی کوئری استفاده کنید.  حالا باید جی کوئری رو به پروژه مون لینک بدیم.

در واقع جی کوئری در داخل تگ های HTML اتچ میشه. پس به بخش کدهای html پروژه تون برید و در میان تگ head یا body قرار بگیرید. برای وارد کردن  جی کوئری باید از تگی با نام script  استفاده کنیم. نحوه ساخت این تگ:
 

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


که در واقع در قسمت src باید نام فایل جی کوئری را کپی و paste کنید.
خب توجه کنید که اگر جی کوئری در تگ body قرار داده بشه، ابتدا تمام فایل های css و html در صفحه لود میشن و بعد نوبت به جی کوئری میرسه. حالا لینک جی کوئری رو هم برقرار کردیم. نوبت میرسه به بکارگیری کتابخانه جی کوئری.


نکته: چنانچه مایل نیستید فایل jQuery در میان  فایل های پروژه تان قرار بگیره، می توانید از CDN های شرکت هایی مانند مایکروسافت و گوگل استفاده کنید:

Google CDN:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
—---------------------------------------------------------------------------------------------
Microsoft CDN

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
</head>


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

<script type="text/ javascript">
</script>


Syntax جی کوئری:
دستورات جی کوئری به گونه ای هستند که می توان تمام عناصر موجود در html را یافت و بر روی آن ها عملیات مورد نظر را پیاده سازی کرد.
ساختار پایه ای زبان جی کوئری به شکل زیر می باشد که آن را شرح می دهیم:

 

$(selector).action()


خب علامت $ مخصوص دسترسی به کتابخانه جی کوئری هستش یعنی برای انتخاب و دسترسی  عناصر در html از این علامت استفاده می شود.

Selector:


خب بالا گفتیم که باید عنصر یا عناصر html مورد نظر را انتخاب کرده و به جی کوئری معرفی کنیم تا بتوانیم تغییرات مورد نظر را بر روی آن ها اعمال کنیم. بنابراین برای جستجوی عناصر از Selector استفاده می کنیم. پس سلکتور می تونه روی تمام تگ های html و کلاس های Css عملیات خاص مد نظر مارو اعمال کنه.

 

action():


خب حالا پس از انتخاب عناصر مورد نظر باید مطرح کنیم که باید چه عملیاتی برای آن ها انجام شود. با استفاده از action() تعیین می کنیم که چه کارهایی انجام شود.

دستور انتخاب در جی کوئری با استفاده از نام کلاس، شناسه و یا نام تگ صورت می گیرد. به مثال های زیر توجه کنید:

در این مثال من میخواهم به جی کوئری دستور بدهم تا تمام پاراگراف های موجود در صفحه مخفی کند، پاراگراف در html با <p>  مشخص میشه و دستور hide برای مخفی کردن بکار میره پس شکل دستور بصورت زیر خواهد بود:
 

$("p").hide();

آسون بود نه؟
خب حالا باید یه نکته خیلی مهم رو بگم. شما ممکنه به جی کوئری دستوری رو بدید که روی عنصری عملیات خاصی رو اعمال کنه، اما هنوز اون عنصر توی صفحه لود یا بارگذاری نشده و این موضوع براتون مشکل ایجاد کنه. خب پس باید دستور بدیم که وقتی عملیات روی عناصر توی صفحه اعمال شه که حتما قبلش صفحه بارگذاری و آماده شده باشه. این دستور رو در زیر ببینید تا تشریحش کنیم:

 

$(document).ready(function(){
//code
});


توجه کنید داره میگه هر موقع که داکیومنت یعنی صفحه مون ready یا آماده شد و کاملا لود شد بیا یکسری توابع رو صدا بزن که عملیات مورد نظر در درون آکولاد باز و بسته نوشته میشن. توجه کنید که function میتونه آرگومان هم داشته باشه که البته در حال حاضر آرگومانی نداره. حالا هر دستوری که به جای (//code) نوشته بشه، بعد از لود شدن صفحه اجرا میشه. حواستون باشه این کد رو در ابتدای پروژ ها بنویسید.

رای جا افتادن مطلب بیایم یک دستور ساده رو بنویسیم. تابع Alert رو در جاوا اسکریپت یادتون میاد؟ با استفاده از این تابع ما میتونیم یک هشدار مثل خوشامدگویی در صفحه وب سایت نمایش بدیم که در واقع ورودیش میشه همون متن مورد نظرمون. حالا من اینجا میخوام به محض لود شدن صفحه، پیام Welcome نمایش داده بشه.

$(document).ready(function(){
alert(“Welcome”);
});

خب حالا اگه برنامه رو ذخیره کنید و در یک مرور گر اجرا کنید، میبینید که به محض لود شدن صفحه، پیغام Welcome نمایش داده میشه.

به دستورات زیر توجه کنید:

دستور زیر تمامی عناصر موجود در صفحه را مخفی می کند.

$(*).hide()

خب با توجه به ساختاری که در ابتدا فرا گرفتیم، به تشریح خط بالا می پردازیم. علامت $ به شی جی کوئری اشاره کرده و در داخل پرانتز مربوط به انتخاب عناصر، علامت * به معنای همه عناصر موجود در صفحه است پس اکشنی که رخ خواهد داد،  یعنی hide به معنای مخفی کردن ، بر روی تمامی عناصر صفحه اعمال خواهد شد.

$(.Firstexample).hide();

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

$(#Example).hide();

مثال بالا عنصری که شناسه یا ID آن Example است را مخفی میکنه. حواستون باشه علامت # قبل از آوردن اسم شناسه حتما باید نوشته شه.

خب بچه ها برای جلسه اول تا همین جا کافیه. سعی کنید تمام مثال هارو انجام بدید و خروجی بگیرید.

دانلود PDF قسمت اول آموزش جیکوئری

کلمات کلیدی