آموزش جی کوئری (jquery) از مقدماتی تا پیشرفته + پروژه های عملی

jquery چیست؟

جی کوئری ( jquery ) یکی از محبوب ترین کتابخانه ها یا فریم ورک های جاوا اسکریپت است که تمام توسعه دهندگان وب در سراسر دنیا از این فریم ورک استفاده میکنند و میشه گفت که ” شور و نشاط خاصی رو به زندگی توسعه دهندگان وب بخشیده ! ” که ماهم با آموزش جی کوئری وارد این عرصه خواهیم شد. توصیه میشود ( دوره آموزشی طراحی سایت ) را نیز مشاهده کنید

همانطور که گفته شد jQuery یک کتابخانه جاوا اسکریپت کوچک، سبک و سریع است. این کتابخانه به خوبی با پلتفرم های مختلف کار می کند و از مرورگر های مختلف پشتیبانی می کند. یکی از شعار های معروفی که برای این کتابخانه وجود دارد، ” کمتر کد بنویس و بیشتر انجام بده” است. دلیل این شعار وجود تعداد زیادی فرمان پر کاربرد در این کتابخانه است که هر کدام شامل ده ها خط کد جاوا اسکریپت هستند و آن ها را به گونه ای در اختیار شما قرار می دهد که می توانید با نوشتن یک خط کد این فرمان ها را فرا بخوانید و از آن ها استفاده کنید. همچنین بسیاری از موارد پیچیده ی جاوا اسکریپت مانند فراخوانی AJAX و دستکاری DOM به سادگی با استفاده از این کتابخانه قابل انجام است.

فریم ورک جاوا اسکریپت یعنی چی؟

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

ویژگی های JQuery

JQuery دارای ویژگی های اختصاصی زیادی است که آن را به یکی از محبوب ترین و پر کاربرد ترین کتابخانه های جاوا اسکریپت تبدیل کرده است. در این جا ما به تعداد کمی از ویژگی های مهم این کتابخانه اشاره می کنیم.

با استفاده از این کتابخانه شما قادر خواهید بود تا صفحات HTML خود را به راحتی مدیریت و دستکاری کنید. دستکاری و انتخاب عناصر DOM یکی دیگر از ویژگی های این کتابخانه است. DOM به جاوا اسکریپت این اجازه را می دهد که همه المان ها و عناصر HTML را کنترل کند و با استفاده از JQuery به راحتی می توانید عناصر DOM را انتخاب کنید. دستکاری CSS و ایجاد انیمیشن ها و افکت ها یکی دیگر از ویژگی های این کتابخانه قدرتمند است. فراخوانی AJAX یکی از مهمترین ویژگی های قابل اشاره است که به سادگی قابل انجام است.

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

با این اوصاف شاید این سوال براتون پیش بیاد :

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

برای استفاده و یادگیری JQuery باید چه چیزهایی بدانیم

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

جزئیات مباحثی که در این دوره مطرح خواهد شد:

درس اول : مقدمات کار با Jquery

• اضافه یا لینک کردن jQuery به صفحه HTML
• آشنایی با jQuery CDN
• آشنایی با روش های نوشتن کدهای jQuery
• آشنایی با ساختار jQuery
• آشنایی با متد alert
• کامنت گذاری در jQuery

درس دوم : آشنایی با انواع سلکتورها در آموزش جی کوئری

• آشنایی با سلکتور تگ
• آشنایی با سلکتور class
• آشنایی با سلکتور id
• آشنایی با سلکتور *
• آشنایی با سلکتور first
• آشنایی با سلکتور first-child
• آشنایی با سلکتور last
• آشنایی با سلکتور last-child
• آشنایی با سلکتور Attribute
• آشنایی با سلکتور button
• آشنایی با سلکتور input
• آشنایی با سلکتور header
• آشنایی با سلکتور text
• آشنایی با سلکتور submit
• آشنایی با سلکتور radio
• آشنایی با سلکتور password
• آشنایی با سلکتور enabled
• آشنایی با سلکتور checked
• آشنایی با سلکتور selected
• آشنایی با سلکتور contains
• آشنایی با سلکتور eq
• آشنایی با سلکتور gt
• آشنایی با سلکتور lt
• آشنایی با سلکتور even
• آشنایی با سلکتور odd

درس سوم : رویدادها در آموزش جی کوئری – بخش اول

• آشنایی با رویداد ready
• آشنایی با رویداد click
• آشنایی با رویداد dblclick
• آشنایی با رویداد mouseenter
• آشنایی با رویداد mouseover
• آشنایی با رویداد mousemove
• آشنایی با رویداد mouseleave

درس چهارم : رویدادها در آموزش جی کوئری – بخش دوم

• آشنایی با رویداد hover
• آشنایی با رویداد mousedown
• آشنایی با رویداد mouseup
• آشنایی با رویداد focus
• آشنایی با رویداد focusin
• آشنایی با رویداد blur
• آشنایی با رویداد focusout
• آشنایی با رویداد keydown
• آشنایی با رویداد keyup
• آشنایی با رویداد keypress

درس پنجم : رویدادها در آموزش جی کوئری – بخش سوم

• آشنایی با رویداد change
• آشنایی با متد is
• تمرین ایجاد حالت شب در صفحه

درس ششم : رویدادها در آموزش جی کوئری – بخش چهارم

• آشنایی با متد preventDefault
• آشنایی با رویداد submit
• آشنایی با متد on
• آشنایی با رویداد load
• تمرین ایجاد لودینگ در صفحه

درس هفتم : آشنایی با مدل DOM و متدهای آن در آموزش jquery

• آشنایی با مدل DOM
• آشنایی با متد text
• آشنایی با متد val
• آشنایی با متد html
• آشنایی با متد attr
• آشنایی با متد removeAttr

درس هشتم : حذف و اضافه کردن المنت ها در آموزش جی کوئری

• آشنایی با متد append
• آشنایی با متد appendTo
• آشنایی با متد clone
• آشنایی با متد prepend
• آشنایی با متد prependTo
• آشنایی با متد after
• آشنایی با متد before
• آشنایی با متد remove
• آشنایی با متد empty
• تمرین فیلتر دسته بندی

درس نهم : حذف و اضافه کردن کلاس ها و استایل دهی به المنت های HTML

• آشنایی با متد addClass
• آشنایی با متد removeClass
• آشنایی با متد hasClass
• آشنایی با متد toggleClass
• آشنایی با متد css
• تمرین نمایش المنت ها بر اساس grid،List،Circle

درس دهم : آشنایی با متدهای ابعاد + تمرین ریسپانسیو کردن یک تصویر در صفحه

• آشنایی با متد width
• آشنایی با متد height
• آشنایی با رویداد resize
• تمرین ریسپانسیو کردن یک تصویر

درس یازدهم : افکت های jquery – بخش اول

• آشنایی با متد hide
• آشنایی با متد show
• آشنایی با پارامترهای fast و slow
• آشنایی با متد toggle

درس دوازدهم : افکت های jquery – بخش دوم

• آشنایی با متد fadeIn
• آشنایی با متد fadeOut
• آشنایی با متد fadeToggle
• آشنایی با متد fadeTo
• آشنایی با تابع Call Back

درس سیزدهم : افکت های jquery – بخش سوم

• آشنایی با متد slideDown
• آشنایی با متد slideUp
• آشنایی با متد slideToggle
• تمرین ساخت منوی DropDown

درس چهاردهم : افکت های jquery – بخش چهارم

• آشنایی کامل با متد animate

درس پانزدهم : پروژه Smooth Scrolling در آموزش جی کوئری

• آشنایی با رویداد scroll
•  آشنایی با متد scrollTop
• آشنایی با متد scrollLeft
• پروژه Smooth Scrolling

درس شانزدهم : مبحث Traversing در Jquery – بخش اول

• آشنایی با مبحث Chaining
•  آشنایی با متد parent
•  آشنایی با متد parents
•  آشنایی با متد parentUntil

درس هفدهم : مبحث Traversing در Jquery – بخش دوم

•  آشنایی با متد children
•  آشنایی با متد find
•  آشنایی با متد siblings
•  آشنایی با متد next
•  آشنایی با متد nextAll
•  آشنایی با متد nextUntil
•  آشنایی با متد prev
•  آشنایی با متد prevAll
•  آشنایی با متد prevUntill
•  آشنایی با متد filter
•  آشنایی با متد each

درس هجدهم : آشنایی با کتابخانه jQueryUI و نحوه درگ کردن المنت ها در آن

• آشنایی با متد draggable و آپشن های آن

درس نوزدهم : نحوه درگ و دراپ کردن المنت ها در jQueryUI

• آشنایی با متد droppable و آپشن های آن

درس بیستم : ایجاد قابلیت تغییر اندازه و مرتب سازی المنت ها در jQueryUI

• آشنایی با متد resizable و آپشن های آن
• آشنایی با متد sortable و آپشن های آن

درس بیست و یکم : ایجاد قابلیت انتخاب المنت ها و ساخت Accordion در jQueryUI

• آشنایی با متد selectable و آپشن های آن
• آشنایی با متد accordion و آپشن های آن

درس بیست و دوم : ایجاد قابلیت انتخاب تاریخ و باکس پیغام در jQueryUI

• آشنایی با متد datepicker و آپشن های آن
• آشنایی با متد dialog و آپشن های آن

درس بیست و سوم : آشنایی با افکت های jQueryUI

• بکارگیری افکت ها در متد addClass
• بکارگیری افکت ها در متد removeClass
• بکارگیری افکت ها در متد animate
• بکارگیری افکت ها در متد hide
• بکارگیری افکت ها در متد show
• بکارگیری افکت ها در متد toggle
• بکارگیری افکت ها در متد toggleClass

درس بیست و چهارم : ساخت پلاگین و نحوه استفاده از آنها در jQuery

• آشنایی با مفهوم پلاگین و افزونه
• آشنایی با تابع Self Invoking Function
• آشنایی با ساختار پلاگین ها
• نحوه ساخت پلاگین ها
• نحوه استفاده از پلاگین ها در صفحه

درس بیست و پنجم : آشنایی با Ajax در jQuery

• آشنایی کامل با نحوه ارسال درخواست ها به سمت سرور
• آشنایی با JSON در ارسال و دریافت اطلاعات

درس بیست و ششم : پروژه اعتبارسنجی فرم در jQuery

درس بیست و هفتم : پروژه ساخت یک منوی حرفه ای و فول ریسپانسیو در jQuery

درس بیست و هشتم : پروژه ساخت لایت باکس برای گالری تصاویر در jQuery

درس بیست و نهم : پروژه ساخت اسلایدر در jQuery

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