00:00 / 00:00
1.8x
1.4x
1.0x
0.7x
HD SD
HD
SD
ثبت‌نام رایگان
  • دسترسی به 13 جلسه نمونه از دوره
  • دسترسی به 13 جلسه نمونه از دوره
  • عضویت در تالار گفت‌وگوی دوره
  • اضافه شدن دوره به پروفایل
دسترسی کامل به محتوا
  • دسترسی کامل و نامحدود به محتوای دوره
  • تمام قابلیت‌‌های پلن رایگان
    +
  • دسترسی کامل و نامحدود به محتوا
79,000 تومان
00:00 / 00:00
1.8x
1.4x
1.0x
0.7x
HD SD
HD
SD

آموزش JQuery

دوره‌های مکتب‌پلاس
5 ساعت

کاربرد دوره آموزش Jquery چیست؟

jQuery یکی کتابخانه سریع، کوچک، چند پلتفرمی و پرکاربرد جاوا اسکریپت است. این کتابخانه برای ساده‌سازی اسکریپت‌نویسی سمت کاربر HTML طراحی شده‌است. jQuery یکی از محبوب‌ترین کتابخانه‌های جاوا اسکریپت به‌حساب می‌آید. دلیل این محبوبیت را می‌توان از کاربردهای آن فهمید:

  • قابلیت اجرا روی مرورگرهای مختلف
  • مدیریت و کنترل آسان و قدرتمند رویدادها (Events)
  • قابلیت تغییر در خصوصیات CSS
  • کار با AJAX
  • توسعه دادن پلاگین‌ها

شرکت‌های بزرگ بسیاری در جهان وجود دارند که از jQuery برای توسعه وب‌سایت‌های خود استفاده می‌کنند. مایکروسافت، گوگل، IBM و نتفلیکس از جمله این شرکت‌ها هستند. این کتابخانه محبوب و قدرتمند جاوا اسکریپت کارهای زیر را به‌راحتی انجام می‌دهد:

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

دوره آموزش jquery به شما کمک می‌کند تا مهارت‌های خود را در زمینه طراحی سایت‌های تعاملی افزایش دهید؛ بنابراین اگر به افکت‌های ظاهری و ساخت صفحات عالی علاقه دارید، با دوره آموزش جی کوئری مکتب‌خونه همراه باشید.

هدف از یادگیری دوره آموزش Jquery چیست؟

هدف اصلی از آموزش جی کوئری این است که شما بتوانید با روشی آسان از زبان جاوا اسکریپت در سایت خود استفاده کنید و تعامل و جذابیت آن را افزایش دهید. از این کتابخانه همچنین می‌توانید این زبان را برای اضافه کردن انیمیشن‌ها به سایت خود به کار ببرید.

از طرفی شما می‌توانید بسیاری از کارهایی را که در جاوا اسکریپت به خطوط کد زیادی نیاز دارند، در jQuery با استفاده از یک خط کد انجام دهید؛ بنابراین این کتابخانه بسیاری از موارد پیچیده را برایتان آسان کرده و بسیار مفید واقع می‌شود.

دوره آموزش جی کوئری مناسب چه کسانی است؟

  • کسانی که به HTML & CSS مسلط هستند و می‌خواهند ظاهر سایت خود را بهبود بخشند.
  • کسانی که به ساخت سایت‌های زیبا، تعاملی و جذاب علاقه‌مندند.
  • کسانی که قصد دارند سایت‌های خود را مدرن‌تر کنند و اجزای پیشرفته‌تری به آن بیفزایند.

بعد از فراگیری دوره آموزش Jquery چه مهارت‌هایی کسب خواهید کرد؟

  • آشنایی کامل با jQuery و ابزارهای موردنیاز برای کار با آن
  • انتخاب یک المنت با کمک جی کوئری، حذف و ایجاد تغییرات روی آن
  • مدیریت و کنترل رویدادها
  • اضافه کردن انیمیشن به سایت
  • ارسال و دریافت اطلاعات به سرور
  • اضافه کردن Scroll Top و Sticky Navigation به سایت
  • ساخت ساعت دیجیتال
  • ساخت Image Slider

 

سرفصل‌های دوره آموزش JQuery

فصل اول : آشنایی با jQuery
00:25 ساعت
00:25
Combined Shape Created with Sketch. 5 جلسه
نمایش جلسات فصل  

در فصل اول از آموزش جی کوئری با این کتابخانه محبوب آشنا می‌شوید و تفاوت بین کتابخانه و فریم‌ورک را به خوبی درک می‌کنید. همچنین در این فصل تلاش شده است که ابزارهای موردنیاز برای کار با jQuery و مفهوم DOM به شما معرفی شود. در انتهای این فصل هم چگونگی اضافه کردن jQuery به یک پروژه را به شما آموزش می‌دهیم و قالب شروع کار (Template Starter) را با هم ایجاد می‌کنیم.

معرفی jQuery
"05:52
Library vs Framework
"03:29
معرفی DOM
"02:44
ابزارهای مورد نیاز
"01:53
Template Starter
"11:18
فصل دوم : Selector
00:52 ساعت
00:52
Combined Shape Created with Sketch. 9 جلسه
نمایش جلسات فصل  

انتخاب‌گرها یا selectorها به شما اجازه می‌دهند که به تگ‌های HTML، مقادیر و صفت‌هایشان دسترسی داشته باشید. با استفاده از نام تگ، کلاس، ID، ویژگی‌ها، Parent & Child، odd & even و prev & next این دسترسی امکان‌پذیر است. در این فصل با تک‌تک این موارد آشنا می‌شوید و نحوه انتخاب یک عنصر از HTML را یاد می‌گیرید. علاوه بر این، انتخاب‌گرهای EQ و not & filler در این فصل به شما آموزش داده خواهد شد.

Tag Name
"09:18
Class
"05:31
Id
"02:51
Attribute
"07:18
Parent & Child
"10:11
odd & even
"04:40
prev & next
"03:02
EQ
"04:53
not & filter
"04:26
فصل سوم : CSS Selectors Methods
00:17 ساعت
00:17
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

شما می‌توانید در جی کوئری خاصیت‌های CSS را به عناصر انتخاب شده اضافه کرده و از آن‌ها استفاده کنید. به همین منظور در این فصل چگونگی افزودن خاصیت‌های CSS را به شما آموزش می‌دهیم. سپس به انواع خاصیت‌های width & height، offset & position و همچنین  scrollLeft & scrollTop در جی کوئری می‌پردازیم.

افزودن خاصیت‌های CSS
"04:05
width & height
"03:18
offset & position
"06:41
scrollLeft & scrollTop
"03:45
فصل چهارم : DOM
00:50 ساعت
00:50
Combined Shape Created with Sketch. 10 جلسه
نمایش جلسات فصل  

DOM یک مدل یا شیوه استاندارد برای دسترسی به عناصر و اشیا HTML است. این مدل از یک درخت سلسله‌مراتبی برای دسترسی استفاده می‌کند. با کمک این مدل می‌توانید تگ‌ها یا عناصر HTML، کلاس‌ها، ویژگی‌ها و خصوصیات آن‌ها را تغییر دهید، آن‌ها را اضافه یا کم کنید و رویدادهای HTML را دست‌کاری کنید. در این فصل متدهای wrap، html، text، append، prepend و before & after به شما آموزش داده می‌شود.

wrap
"05:08
html & text
"05:25
append & appendTo
"03:03
prepend & prependTo
"02:47
befor & after
"03:16
Remove Element
"03:34
Replace Element
"03:09
Attribute & Properties
"09:45
Classes
"06:04
Data Attribute
"08:36
فصل پنجم : Events
00:36 ساعت
00:36
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

از مهم‌ترین نقش‌ها در جی کوئری رویدادها (events) هستند. به هر فعالیتی که توسط یک کاربر در صفحه وب انجام شود، یک رویداد می‌گویند. با کمک رویدادها می‌توانیم در صورت بروز یک اتفاق دستورات خاصی را اجرا کنیم. به عنوان مثال اگر کاربر اشاره‌گر موس را روی یک عنصر قرارداد، یک رویداد اتفاق افتاده و صفحه وب باید یک دستور خاص را اجرا کند. در این فصل علاوه بر رویداد موس و مدیریت آن به رویدادهای کیبورد، on، window و فرم می‌پردازیم.

Mouse
"09:25
Keyboard
"06:34
on & window
"10:33
Form
"09:46
فصل ششم : Transition & Animation
00:27 ساعت
00:27
Combined Shape Created with Sketch. 5 جلسه
نمایش جلسات فصل  

استفاده از انیمیشن‌ها یکی از جذاب‌ترین کارهایی است که می‌توانید روی سایت خود پیاده کنید. با کمک دوره آموزش jQuery پروژه محور می‌توانید روی عناصر صفحات وب خود تغییراتی اعمال کنید که برای چند ثانیه به حالت انیمیشن در بیایند. بی‌شک این کار جذابیت سایت را چندین برابر می‌کند.

بدین منظور در این فصل متدهایی آموزش داده می‌شود که می‌توانید افکت‌های تصویری زیبایی به سایت خود اضافه کنید. متدهای show، hide، fadeIn، fadeOut، slideUp، SlideDown و از همه مهم‌تر متد animate برای ایجاد انیمیشن‌های مختلف از جمله مباحث این فصل است.

show & hide
"07:53
fadeIn & fadeOut
"04:41
slideUp & slideDown
"04:09
animate
"05:48
Timing Animation
"05:23
فصل هفتم : AJAX
00:28 ساعت
00:28
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

اگر مطلب جدیدی در سایت بارگذاری شده باشد، برای اینکه بتوانید آن را ببینید، لازم است که صفحه را یک‌بار refresh کنید. در واقع هر دفعه شما باید یک درخواست به سرور ارسال کنید تا اطلاعات جدید را به شما نشان دهد. تکنولوژی AJAX این کار را راحت کرده است. یعنی با استفاده از آن کاربر می‌تواند بدون درخواست مجدد داده‌ها را برای پردازش به سرور ارسال کرده، سپس اطلاعات موردنیاز را دریافت کند. با سه متد load، get و post این کار را می‌توانید انجام دهید که در این فصل به آن می‌پردازیم.

 

معرفی AJAX
"03:18
load
"11:43
get
"10:11
post
"03:27
فصل هشتم : پروژه‌های jQuery
00:34 ساعت
00:34
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

در این فصل با انجام چهار پروژه می‌توانید آموزش jquery خود را به سرانجام برسانید. در پروژه اول به توضیح و ایجاد دکمه Scroll Top در سایت می‌پردازیم. در پروژه دوم به شما آموزش می‌دهیم که چگونه نواری بسازید که در صورت اسکرول کردن صفحه همچنان در بالا بماند. به این نوار Sticky Navigation می‌گویند.

پروژه اول - Scroll Top
"07:53
پروژه دوم - Sticky Navigation
"05:12
پروژه سوم - Digital Clock
"07:41
پروژه چهارم - Image Slider
"13:45

تالار گفت‌وگو

استاد دوره
علی شیخ

علی شیخ در سال ۱۳۹۴ در رشته مهندسی کامپیوتر فارغ‌التحصیل شد و به عنوان برنامه‌نویس وب در شرکت معدنی و صنعتی چادرملو شروع به کار کرد. تخصص اصلی ایشان در زبان‌های جاوا اسکریپت و php است. وی به دلیل این که به آموزش علاقه زیادی داشت، تصمیم به راه‌اندازی وب‌سایتی در این زمینه به نام وب پروگ گرفت و اکنون پس از ۲ سال توانسته است سهم کوچکی در آموزش به افراد علاقه‌مند به برنامه‌نویسی را داشته باشد .

پیش‌نیاز‌های دوره آموزش JQuery

برای شروع دوره آموزش Jquery لازم است با HTML & CSS به‌طور کامل آشنا و حتی به آن مسلط باشید. همان‌طور که می‌دانید Jquery یکی از کتابخانه‌های جاوا اسکریپت است، بنابراین طبیعی است که برای یادگیری آن باید به این زبان برنامه‌نویسی مسلط باشید.

برای انجام چهار پروژه‌ای که در این دوره به انجام آن‌ها می‌پردازیم، باید طراحی سایت با Bootstrap 4 را بلد باشید. با این تفاسیر، توصیه می‌شود قبل از شروع این دوره، دوره‌های زیر را بگذرانید:

  • آموزش HTML و CSS  
  • آموزش رایگان javascript پروژه محور
  • آموزش Bootsrtap 4  (برای پروژه)
آموزش HTML و CSS
اطلاعات بیشتر
آموزش جاوا اسکریپت (JavaScript)
اطلاعات بیشتر

نظرات 

تا کنون نظری برای این دوره ثبت نشده است. برای ثبت نظر باید ابتدا در دوره ثبت نام کرده و دانشجوی دوره باشید.

سوالات پرتکرار

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

اطلاعات بیشتر

پیش‌نیازها و منابع مکمل برای فراگیری دوره آموزش Jquery چیست؟

برای شروع دوره آموزش Jquery لازم است با HTML & CSS به‌طور کامل آشنا و حتی به آن مسلط باشید. همان‌طور که می‌دانید Jquery یکی از کتابخانه‌های جاوا اسکریپت است، بنابراین طبیعی است که برای یادگیری آن باید به این زبان برنامه‌نویسی مسلط باشید.

برای انجام چهار پروژه‌ای که در این دوره به انجام آن‌ها می‌پردازیم، باید طراحی سایت با Bootstrap 4 را بلد باشید. با این تفاسیر، توصیه می‌شود قبل از شروع این دوره، دوره‌های زیر را بگذرانید:

  • آموزش HTML و CSS
  • آموزش رایگان javascript پروژه محور
  • آموزش Bootsrtap 4 در دنیای واقعی (برای پروژه)

اگر هنوز هم قصد توسعه مهارت‌های طراحی سایت خود را دارید، می‌توانید از دوره‌های زیر برای تکمیل توانایی‌های خود استفاده کنید:

  • آموزش Javascript OOP (شیء گرایی در جاوا اسکریپت)
  • آموزش Asynchronous Javascript پروژه محور
  • آموزش رایگان Node.js


ویژگی‌های متمایز دوره آموزش Jquery مکتب‌خونه چیست؟

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

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

پس از گذراندن دوره آموزش JQuery و کسب نمره لازم، مکتب‌خونه گواهینامه شرکت در این دوره را به شما می‌دهد. این گواهینامه سطح مهارت شما را در این زمینه نشان داده و حتی به شما در استخدام کمک می‌کند.

سرفصل‌های دوره آموزش Jquery چیست؟

این دوره آموزشی در هفت فصل به معرفی کامل کتابخانه جی کوئری و قسمت‌ها و کاربردهای مختلف می‌پردازد. در این فصل‌ها شما به طور کامل با Selector و متدهای آن‌ها در CSS آشنا می‌شوید. همچنین کار با DOM، چگونگی مدیریت و کنترل Eventها، اضافه کردن انیمیشن‌ها و تصاویر متحرک و غیره را در این دوره یاد می‌گیرید. در فصل آخر (هشتم) چهار پروژه طراحی شده‌است که با کمک آن‌ها می‌توانید تمام مطالب را به صورت عملی پیاده‌سازی کنید.

×

ثبت نظر

به این دوره از ۱ تا ۵ چه امتیازی می‌دهید؟

فصل اول : آشنایی با jQuery
00:25 ساعت
00:25
Combined Shape Created with Sketch. 5 جلسه
نمایش جلسات فصل  

در فصل اول از آموزش جی کوئری با این کتابخانه محبوب آشنا می‌شوید و تفاوت بین کتابخانه و فریم‌ورک را به خوبی درک می‌کنید. همچنین در این فصل تلاش شده است که ابزارهای موردنیاز برای کار با jQuery و مفهوم DOM به شما معرفی شود. در انتهای این فصل هم چگونگی اضافه کردن jQuery به یک پروژه را به شما آموزش می‌دهیم و قالب شروع کار (Template Starter) را با هم ایجاد می‌کنیم.

معرفی jQuery
"05:52
Library vs Framework
"03:29
معرفی DOM
"02:44
ابزارهای مورد نیاز
"01:53
Template Starter
"11:18
فصل دوم : Selector
00:52 ساعت
00:52
Combined Shape Created with Sketch. 9 جلسه
نمایش جلسات فصل  

انتخاب‌گرها یا selectorها به شما اجازه می‌دهند که به تگ‌های HTML، مقادیر و صفت‌هایشان دسترسی داشته باشید. با استفاده از نام تگ، کلاس، ID، ویژگی‌ها، Parent & Child، odd & even و prev & next این دسترسی امکان‌پذیر است. در این فصل با تک‌تک این موارد آشنا می‌شوید و نحوه انتخاب یک عنصر از HTML را یاد می‌گیرید. علاوه بر این، انتخاب‌گرهای EQ و not & filler در این فصل به شما آموزش داده خواهد شد.

Tag Name
"09:18
Class
"05:31
Id
"02:51
Attribute
"07:18
Parent & Child
"10:11
odd & even
"04:40
prev & next
"03:02
EQ
"04:53
not & filter
"04:26
فصل سوم : CSS Selectors Methods
00:17 ساعت
00:17
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

شما می‌توانید در جی کوئری خاصیت‌های CSS را به عناصر انتخاب شده اضافه کرده و از آن‌ها استفاده کنید. به همین منظور در این فصل چگونگی افزودن خاصیت‌های CSS را به شما آموزش می‌دهیم. سپس به انواع خاصیت‌های width & height، offset & position و همچنین  scrollLeft & scrollTop در جی کوئری می‌پردازیم.

افزودن خاصیت‌های CSS
"04:05
width & height
"03:18
offset & position
"06:41
scrollLeft & scrollTop
"03:45
فصل چهارم : DOM
00:50 ساعت
00:50
Combined Shape Created with Sketch. 10 جلسه
نمایش جلسات فصل  

DOM یک مدل یا شیوه استاندارد برای دسترسی به عناصر و اشیا HTML است. این مدل از یک درخت سلسله‌مراتبی برای دسترسی استفاده می‌کند. با کمک این مدل می‌توانید تگ‌ها یا عناصر HTML، کلاس‌ها، ویژگی‌ها و خصوصیات آن‌ها را تغییر دهید، آن‌ها را اضافه یا کم کنید و رویدادهای HTML را دست‌کاری کنید. در این فصل متدهای wrap، html، text، append، prepend و before & after به شما آموزش داده می‌شود.

wrap
"05:08
html & text
"05:25
append & appendTo
"03:03
prepend & prependTo
"02:47
befor & after
"03:16
Remove Element
"03:34
Replace Element
"03:09
Attribute & Properties
"09:45
Classes
"06:04
Data Attribute
"08:36
فصل پنجم : Events
00:36 ساعت
00:36
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

از مهم‌ترین نقش‌ها در جی کوئری رویدادها (events) هستند. به هر فعالیتی که توسط یک کاربر در صفحه وب انجام شود، یک رویداد می‌گویند. با کمک رویدادها می‌توانیم در صورت بروز یک اتفاق دستورات خاصی را اجرا کنیم. به عنوان مثال اگر کاربر اشاره‌گر موس را روی یک عنصر قرارداد، یک رویداد اتفاق افتاده و صفحه وب باید یک دستور خاص را اجرا کند. در این فصل علاوه بر رویداد موس و مدیریت آن به رویدادهای کیبورد، on، window و فرم می‌پردازیم.

Mouse
"09:25
Keyboard
"06:34
on & window
"10:33
Form
"09:46
فصل ششم : Transition & Animation
00:27 ساعت
00:27
Combined Shape Created with Sketch. 5 جلسه
نمایش جلسات فصل  

استفاده از انیمیشن‌ها یکی از جذاب‌ترین کارهایی است که می‌توانید روی سایت خود پیاده کنید. با کمک دوره آموزش jQuery پروژه محور می‌توانید روی عناصر صفحات وب خود تغییراتی اعمال کنید که برای چند ثانیه به حالت انیمیشن در بیایند. بی‌شک این کار جذابیت سایت را چندین برابر می‌کند.

بدین منظور در این فصل متدهایی آموزش داده می‌شود که می‌توانید افکت‌های تصویری زیبایی به سایت خود اضافه کنید. متدهای show، hide، fadeIn، fadeOut، slideUp، SlideDown و از همه مهم‌تر متد animate برای ایجاد انیمیشن‌های مختلف از جمله مباحث این فصل است.

show & hide
"07:53
fadeIn & fadeOut
"04:41
slideUp & slideDown
"04:09
animate
"05:48
Timing Animation
"05:23
فصل هفتم : AJAX
00:28 ساعت
00:28
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

اگر مطلب جدیدی در سایت بارگذاری شده باشد، برای اینکه بتوانید آن را ببینید، لازم است که صفحه را یک‌بار refresh کنید. در واقع هر دفعه شما باید یک درخواست به سرور ارسال کنید تا اطلاعات جدید را به شما نشان دهد. تکنولوژی AJAX این کار را راحت کرده است. یعنی با استفاده از آن کاربر می‌تواند بدون درخواست مجدد داده‌ها را برای پردازش به سرور ارسال کرده، سپس اطلاعات موردنیاز را دریافت کند. با سه متد load، get و post این کار را می‌توانید انجام دهید که در این فصل به آن می‌پردازیم.

 

معرفی AJAX
"03:18
load
"11:43
get
"10:11
post
"03:27
فصل هشتم : پروژه‌های jQuery
00:34 ساعت
00:34
Combined Shape Created with Sketch. 4 جلسه
نمایش جلسات فصل  

در این فصل با انجام چهار پروژه می‌توانید آموزش jquery خود را به سرانجام برسانید. در پروژه اول به توضیح و ایجاد دکمه Scroll Top در سایت می‌پردازیم. در پروژه دوم به شما آموزش می‌دهیم که چگونه نواری بسازید که در صورت اسکرول کردن صفحه همچنان در بالا بماند. به این نوار Sticky Navigation می‌گویند.

پروژه اول - Scroll Top
"07:53
پروژه دوم - Sticky Navigation
"05:12
پروژه سوم - Digital Clock
"07:41
پروژه چهارم - Image Slider
"13:45