آموزش جی کوئری jQuery با انجام 12 پروژه عملی

jQuery یا جی کوئری کتابخانه ای از جاوا اسکریپت است که امکان استفاده از قابلیت های از پیش تعیین شده را فراهم می کند. به کمک jQuery می توان نرم افزارهای مبتنی بر ایجکس (Ajax)، موشن گرافیک با افکت های متفاوت و برنامه های مبادله ای که ارتباط میان مرورگر و کاربر را برقرار می کند نوشت.

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

 

در این دوره چه مباحثی آموزش داده شده است؟

در این دوره آموزشی رایگان قصد داریم تا آموزش jQuery را با پیاده سازی 12 پروژه عملی و کاربردی جلو ببریم. این 12 پروژه عملی در اکثر پروژه هایی که انجام می شوند کاربرد دارند.

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

 

در این دوره چه پروژه هایی انجام شده است؟

1- پروژه روشن و خاموش شدن لامپ

اولین پروژه ای که در این دوره آموزشی انجام می دهیم پروژه خاموش و روشن شدن لامپ با استفاده از jQuery است. شاید به نظر پروژه ساده ای باشد اما بر اساس آمار گرفته شده 80 درصد از دانشجویان مدعی جی کوئری در پیاده سازی این پروژه مشکل داشته اند! ما در این پروژه دکمه ای را طراحی می کنیم که با هر باز کلیک کردن بر روی آن تصویر یک لامپ که در پایین این دکمه قرار دارد روشن و خاموش می شود.

 

2- پروژه منو کشویی یا Submenu

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

 

3- پروژه Search box مخفی

در این پروژه کمک یک باکس جستجو طراحی خواهیم کرد که با کلیک بر روی آن یک باکس مخفی در بالای آن ظاهر می شود.

 

4- طراحی منو چسبان

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

 

5- پروژه جملات تصادفی

در این پروژه 10 جمله داریم که به ترتیب با کلیک بر روی دکمه “بعدی” جملات بعدی و با کلیک بر روی دکمه “قبلی” جملات قبلی نمایش داده می شود.

 

6- پروژه tooltip

tooltip همان متنی است که با کلیک بر روی یک تصویر یا متن در قالب یک باکس فلش دار نمایش داده میشود. ما در این پروژه کاربردی با کمک گرفتن از css3 و استفاده از jQuery یک tooltip جذاب و انعطاف پذیر طراحی خواهیم کرد.

 

7- منو مخفی ریسپانسیو

در این پروژه خواهید آموخت که چطور می توان یک منو مخفی طراحی کرد که با کلیک کردن بر روی آیکون nav در رزولوشن های کوچک نمایش داده شود و در رزولوشن های بزرگ کاملا مخفی باشد.

 

8- Modal

در این پروژه خواهید آموخت که چطور زمانی که روی یک لینک کلیک می شود Modal از بالا به پایین برای ما باز شود و زمانی که روی هز قسمت دیگری جز modal کلیک می کنیم از پایین به بالا بسته شود.

 

9- tab menu

این پروژه فوق العاده کاربردی است و در بسیاری از صفحات وب از آن استفاده می شود. در این پروژه می آموزید که چطور باید قدم به قدم این پروژه را پیاده سازی کنید.

 

10- Accordion Menu

در این پروژه ما 3 بخش قرار دادیم که با کلیک بر روی هرکدام، محتوای مربوط به آن بخش را نمایش می دهد و بخش های قبلی را می بندد.

 

11- انیمیشن هنگام اسکرول (پارالاکس)

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

 

12- طراحی Slider

ما در این پروژه بدون استفاده از هیچ کد بیرونی و فقط با کمک گرفتن از css و jQuery یک اسلایدر حرفه ای خواهیم ساخت که هم دارای caption هست و هم دکمه بعدی و قبلی دارد.