آموزش jQuery در عمل: ساخت ۲۰ پروژه با jQuery - آخرین آپدیت

سرفصل ها و درس ها

آشنایی با جی‌کوئری (مقدمه‌ای بر جی‌کوئری) Be Familiar with jQuery (Introduction to jQuery)

• چه چیزی را توسعه خواهید داد؟ What are You Going to Develop?

• به چه نرم‌افزاری نیاز دارید؟ What Software You Need?

• جی‌کوئری چیست؟ What is jQuery?

• مقایسه: جاوااسکریپت در برابر جی‌کوئری Let's Compare: JavaScript Vs jQuery

• آزمون: مقدمه‌ای بر جی‌کوئری Quiz: Introduction to jQuery

آماده شروع شوید (مبانی جی‌کوئری) Be Ready to Start (Basics of jQuery)

• راه‌اندازی محیط توسعه جی‌کوئری Setup jQuery Development Environment

• درک سینتکس پایه جی‌کوئری Understand the Basic Syntax of jQuery

• اهمیت رویداد $(document).ready() Importance of $(document).ready() Event

• نکته مخفی برای نوشتن سریع و آسان کد جی‌کوئری Secret Tip to Write jQuery Code Easily and Quickly

• آزمون: مبانی جی‌کوئری Quiz: Basics of jQuery

انتخاب عناصر برای عمل کردن (انتخابگرهای جی‌کوئری) Select the Elements upon which to Act (jQuery Selectors)

• انتخابگر همه All Selector

• انتخابگر نام تگ Tagname Selector

• انتخابگرهای چندگانه Multiple Selectors

• انتخابگر آی‌دی ID Selector

• انتخابگر کلاس Class Selector

• تمرین عملی: انتخابگر کلاس Hands-On Practice: Class Selector

• انتخابگر این (this) this Selector

• تمرین عملی: انتخابگرهای این و نام تگ Hands-On Practice: this and Tagname Selectors

• انتخابگرهای مبتنی بر ویژگی - بخش ۱ (نام، مقدار مساوی و مقدار نامساوی) Attribute based Selectors - Part 1 (name, value equals and value not equal)

• انتخابگرهای مبتنی بر ویژگی - بخش ۲ (مقدار شروع‌شونده با، پایان‌یابنده با و شامل) Attribute based Selectors - Part 2 (value starts with, ends with and contains)

• انتخابگرهای مبتنی بر ویژگی - بخش ۳ (مقدار شامل یک کلمه) Attribute based Selectors - Part 3 (value contains a word)

• انتخابگرهای مبتنی بر موقعیت - بخش ۱ (اولین، آخرین، ایندکس زوج و ایندکس فرد) Position based Selectors - Part 1 (first, last, even indexed and odd indexed)

• انتخابگرهای مبتنی بر موقعیت - بخش ۲ (ایندکس مساوی، کوچکتر و بزرگتر) Position based Selectors - Part 2 (index equals, less than and greater than)

• انتخابگرهای مبتنی بر رابطه - بخش ۱ (اولین فرزند و آخرین فرزند) Relationship based Selectors - Part 1 (first child and last child)

• انتخابگرهای مبتنی بر رابطه - بخش ۲ (nth فرزند و nth آخرین فرزند) Relationship based Selectors - Part 2 (nth child and nth last child)

• انتخابگرهای رابطه - ۳ (اولین و آخرین از نوع، nth و nth آخرین از نوع) Relationship Selectors - 3 (first and last of type, nth and nth last of type)

• انتخابگرهای مبتنی بر رابطه - بخش ۴ (فقط فرزند و فقط از نوع) Relationship based Selectors - Part 4 (only child and only of type)

• انتخابگرهای فرزند و همزاد Child and Sibling Selectors

• انتخابگرهای مبتنی بر فرم Form based Selectors

• انتخابگرهای مبتنی بر وضعیت State based Selectors

• انتخابگرهای مبتنی بر محتوا Content based Selectors

• آزمون: انتخابگرها Quiz: Selectors

• تمرین‌ها: انتخابگرها Exercises: Selectors

اجرای رویدادها (رویدادهای جی‌کوئری) Let the Actions Happen (jQuery Events)

• مروری کلی Overview

• رویدادهای ماوس Mouse Events

• رویدادهای صفحه کلید Keyboard Events

• رویدادهای فرم - بخش ۱ (تمرکز، محو تمرکز، فوکاسین و فوکاس‌اوت) Form Events - Part 1 (focus, blur, focusin and focusout)

• رویدادهای فرم - بخش ۲ (تغییر، انتخاب و ارسال) Form Events - Part 2 (change, select and submit)

• رویدادهای مرورگر Browser Events

• چگونه کنترل‌کننده‌های رویداد را متصل کنیم؟ How to Attach Event Handlers?

• تفاوت بین ()click. و ("click").on (واگذاری رویداد) Difference between .click() and .on("click") (Event Delegation)

• تفاوت بین متدهای ()one و ()on Difference between one() and on() Methods

• زنجیره‌سازی متدها Method Chaining

• آزمون: رویدادها Quiz: Events

• تمرین‌ها: رویدادها Exercises: Events

انرژی‌بخشی به صفحات (جلوه‌ها و انیمیشن‌های جی‌کوئری) Energise Your Pages (jQuery Effects and Animations)

• مقدمه‌ای بر جلوه‌ها Introduction to Effects

• جلوه‌های پایه Basic Effects

• جلوه‌های محوشوندگی Fading Effects

• جلوه‌های اسلاید Sliding Effects

• جلوه‌های اسلاید پایین و بالا معکوس - بخش ۱ Reverse Slide Down and Slide Up Effects - Part 1

• جلوه‌های اسلاید پایین و بالا معکوس - بخش ۲ Reverse Slide Down and Slide Up Effects - Part 2

• انیمیشن‌های سفارشی Custom Animations

• انتخاب پویا نام ویژگی CSS در متد ()animate Choose CSS Property Name Dynamically in animate() Method

• آزمون: جلوه‌ها Quiz: Effects

مدیریت DOM (دستکاری DOM) Handle the DOM (DOM Manipulation)

• دریافت/تنظیم HTML Get/Set HTML

• دریافت/تنظیم متن Get/Set Text

• دریافت/تنظیم مقادیر عناصر فرم Get/Set Values of Form Elements

• دریافت/تنظیم ویژگی‌ها و خصوصیات Get/Set Attributes and Properties

• افزودن محتوا یا عنصر Add Content or Element

• انتقال یک عنصر موجود به مکان جدید Move an Existing Element to a New Location

• حذف عنصر Remove Element

• تمرین عملی: حذف عناصر بر اساس کلیک دکمه Hands-On Practice: Remove Elements Based On Button Clicked

• اصلاح محتوا Modify Content

• اصلاح استایل Modify Style

• آزمون: دستکاری DOM Quiz: DOM Manipulation

• تمرین‌ها: دستکاری DOM Exercises: DOM Manipulation

حرکت در DOM (پیمایش DOM) Move through the DOM (DOM Traversal)

• متدهای پیمایش اجداد Ancestors Traversal Methods

• متدهای پیمایش همزادها Siblings Traversal Methods

• متدهای پیمایش فرزندان Children Traversal Methods

• متدهای فیلتر Filtering Methods

• آزمون: متدهای پیمایش DOM Quiz: DOM Traversal Methods

استفاده از ابزارها (توابع کمکی جی‌کوئری) Make Use of Utilities (jQuery Utility Functions)

• ()inArray.$ برای جستجوی یک آیتم $.inArray() to Look for an Item

• ()grep.$ برای فیلتر کردن یک آرایه $.grep() to Filter an Array

• ()map.$ برای ترجمه تمام آیتم‌ها در یک آرایه $.map() to Translate All Items in an Array

• ()each. برای تکرار روی یک شیء جی‌کوئری .each() to Iterate over a jQuery Object

جی‌کوئری و ای‌جکس jQuery and AJAX

• ای‌جکس چیست؟ What is AJAX?

• متد ()ajax.$ The $.ajax() Method

• گزینه‌های مختلف برای پیکربندی درخواست ای‌جکس Different Options to Configure AJAX request

• سه گزینه بازگشت فراخوانی و ساختارهای جایگزین Three Callback Options and Alternative Constructs

• متدهای مختلف میانبر ای‌جکس جی‌کوئری Different Shorthand jQuery AJAX Methods

پلاگین‌های جی‌کوئری jQuery Plugins

• مقدمه‌ای بر پلاگین‌های جی‌کوئری Introduction to jQuery Plugins

• یافتن و استفاده از پلاگین‌های موجود Find and Make Use of Existing Plugins

• ایجاد پلاگین‌های پایه جی‌کوئری Create Basic jQuery Plugins

• مفاهیم پیشرفته پلاگین - بخش ۱ Advanced Plugin Concepts - Part 1

• مفاهیم پیشرفته پلاگین - بخش ۲ Advanced Plugin Concepts - Part 2

• مفاهیم پیشرفته پلاگین - بخش ۳ Advanced Plugin Concepts - Part 3

• مفاهیم پیشرفته پلاگین - بخش ۴ Advanced Plugin Concepts - Part 4

خودتان کدنویسی کنید (تمرین‌های جی‌کوئری) Code it Yourself (jQuery Exercises)

• تمرین #1: تمایز بین کلیک چپ و راست ماوس Exercise #1: Distinguish between left and right mouse clicks

بیایید توسعه دهیم (جلوه‌ها، بازی‌ها و رابط‌های کاربری توسعه یافته از پایه) Let's Develop (Effects, Games and User Interfaces Developed from Scratch)

• آکاردئون از پایه: بخش ۱ Accordion from Scratch: Part 1

• آکاردئون از پایه: بخش ۲ Accordion from Scratch: Part 2

• پنل اسلاید از پایه: بخش ۱ Slide Panel from Scratch: Part 1

• پنل اسلاید از پایه: بخش ۲ Slide Panel from Scratch: Part 2

• نمایشگر اخبار از پایه: بخش ۱ News Ticker from Scratch: Part 1

• نمایشگر اخبار از پایه: بخش ۲ News Ticker from Scratch: Part 2

• جلوه بزرگنمایی/کوچک‌نمایی عکس Photo Zoom In/Zoom Out Effect

• بازی حافظه از پایه: بخش ۱ Memory Game from Scratch: Part 1

• بازی حافظه از پایه: بخش ۲ Memory Game from Scratch: Part 2

• بازی حافظه از پایه: بخش ۳ Memory Game from Scratch: Part 3

• بازی حافظه از پایه: بخش ۴ Memory Game from Scratch: Part 4

• بازی حافظه از پایه: بخش ۵ Memory Game from Scratch: Part 5

• اسلایدر تصویر یا گالری عکس از پایه: بخش ۱ Image Slider or Photo Gallery from Scratch: Part 1

• اسلایدر تصویر یا گالری عکس از پایه: بخش ۲ Image Slider or Photo Gallery from Scratch: Part 2

• اسلایدر تصویر یا گالری عکس از پایه: بخش ۳ Image Slider or Photo Gallery from Scratch: Part 3

• اسلایدر تصویر یا گالری عکس از پایه: بخش ۴ Image Slider or Photo Gallery from Scratch: Part 4

• اسلایدر تصویر یا گالری عکس از پایه: بخش ۵ Image Slider or Photo Gallery from Scratch: Part 5

• به‌روزرسانی پروژه اسلایدر تصویر: یک اصلاح جزئی در کد Update to Image Slider Project: A minor correction in the code

• نمودار متحرک: بخش ۱ Animated Graph: Part 1

• نمودار متحرک: بخش ۲ Animated Graph: Part 2

• نمودار متحرک: بخش ۳ Animated Graph: Part 3

• تولتیپ متحرک: بخش ۱ Animated Tooltip: Part 1

• تولتیپ متحرک: بخش ۲ Animated Tooltip: Part 2

• نمونه کار قابل فیلتر: بخش ۱ Filterable Portfolio: Part 1

• نمونه کار قابل فیلتر: بخش ۲ Filterable Portfolio: Part 2

• بازی کلاسیک دوز (ایکس او) - بخش ۱ Classic Tic Tac Toe Game - Part 1

• بازی کلاسیک دوز (ایکس او) - بخش ۲ Classic Tic Tac Toe Game - Part 2

• بازی کلاسیک دوز (ایکس او) - بخش ۳ Classic Tic Tac Toe Game - Part 3

• بازی کلاسیک دوز (ایکس او) - بخش ۴ Classic Tic Tac Toe Game - Part 4

• بازی کلاسیک دوز (ایکس او) - بخش ۵ Classic Tic Tac Toe Game - Part 5

• نشانگر پیشرفت مطالعه - بخش ۱ Reading Progress Indicator - Part 1

• نشانگر پیشرفت مطالعه - بخش ۲ Reading Progress Indicator - Part 2

• بازی پرنده پرنده (کلون فلپی برد) - بخش ۱ Flying Bird Game (Flappy Bird Clone) - Part 1

• بازی پرنده پرنده (کلون فلپی برد) - بخش ۲ Flying Bird Game (Flappy Bird Clone) - Part 2

• بازی پرنده پرنده (کلون فلپی برد) - بخش ۳ Flying Bird Game (Flappy Bird Clone) - Part 3

• بازی پرنده پرنده (کلون فلپی برد) - بخش ۴ Flying Bird Game (Flappy Bird Clone) - Part 4

• بازی پرنده پرنده (کلون فلپی برد) - بخش ۵ Flying Bird Game (Flappy Bird Clone) - Part 5

• بازی پرنده پرنده (کلون فلپی برد) - بخش ۶ Flying Bird Game (Flappy Bird Clone) - Part 6

• بازی پرنده پرنده (کلون فلپی برد) - بخش ۷ Flying Bird Game (Flappy Bird Clone) - Part 7

• بازی پرنده پرنده (کلون فلپی برد) - بخش ۸ Flying Bird Game (Flappy Bird Clone) - Part 8

• بازی پرنده پرنده (کلون فلپی برد) - بخش ۹ Flying Bird Game (Flappy Bird Clone) - Part 9

• بازی پرنده پرنده (کلون فلپی برد) - بخش ۱۰ Flying Bird Game (Flappy Bird Clone) - Part 10

• سیستم امتیازدهی ۵ ستاره - بخش ۱ 5-Star Rating System - Part 1

• سیستم امتیازدهی ۵ ستاره - بخش ۲ 5-Star Rating System - Part 2

• فرم چند مرحله‌ای با نوار پیشرفت - بخش ۱ Multi Step Form with Progress Bar - Part 1

• فرم چند مرحله‌ای با نوار پیشرفت - بخش ۲ Multi Step Form with Progress Bar - Part 2

• فرم چند مرحله‌ای با نوار پیشرفت - بخش ۳ Multi Step Form with Progress Bar - Part 3

• فرم چند مرحله‌ای با نوار پیشرفت - بخش ۴ Multi Step Form with Progress Bar - Part 4

• فرم چند مرحله‌ای با نوار پیشرفت - بخش ۵ Multi Step Form with Progress Bar - Part 5

• فرم چند مرحله‌ای با نوار پیشرفت - بخش ۶ Multi Step Form with Progress Bar - Part 6

• نمای درختی - بخش ۱ Tree View - Part 1

• نمای درختی - بخش ۲ Tree View - Part 2

• نمای درختی - بخش ۳ Tree View - Part 3

• لیست کارهای روزانه - بخش ۱ To Do List - Part 1

• لیست کارهای روزانه - بخش ۲ To Do List - Part 2

• لیست کارهای روزانه - بخش ۳ To Do List - Part 3

• بازی جستجوی کلمات - بخش ۱ Word Search Game - Part 1

• بازی جستجوی کلمات - بخش ۲ Word Search Game - Part 2

• بازی جستجوی کلمات - بخش ۳ Word Search Game - Part 3

• بازی جستجوی کلمات - بخش ۴ Word Search Game - Part 4

• بازی جستجوی کلمات - بخش ۵ Word Search Game - Part 5

• بازی جستجوی کلمات - بخش ۶ Word Search Game - Part 6

• بازی جستجوی کلمات - بخش ۷ Word Search Game - Part 7

• بازی جستجوی کلمات - بخش ۸ Word Search Game - Part 8

• بازی جستجوی کلمات - بخش ۹ Word Search Game - Part 9

• بازی جستجوی کلمات - بخش ۱۰ Word Search Game - Part 10

• بازی جستجوی کلمات - بخش ۱۱ Word Search Game - Part 11

• بازی جستجوی کلمات - بخش ۱۲ Word Search Game - Part 12

• بازی جستجوی کلمات - بخش ۱۳ Word Search Game - Part 13

• تست سرعت کلیک با تایمر - بخش ۱ Click Speed Test with Timer - Part 1

• تست سرعت کلیک با تایمر - بخش ۲ Click Speed Test with Timer - Part 2

• تست سرعت کلیک با تایمر - بخش ۳ Click Speed Test with Timer - Part 3

• تست سرعت کلیک با تایمر - بخش ۴ Click Speed Test with Timer - Part 4

• تست سرعت کلیک با تایمر - بخش ۵ Click Speed Test with Timer - Part 5

• تست سرعت کلیک با تایمر - بخش ۶ Click Speed Test with Timer - Part 6

• تست سرعت کلیک با تایمر - بخش ۷ Click Speed Test with Timer - Part 7

• کرونومتر آنلاین - بخش ۱ Online Stopwatch - Part 1

• کرونومتر آنلاین - بخش ۲ Online Stopwatch - Part 2

• کرونومتر آنلاین - بخش ۳ Online Stopwatch - Part 3

• کرونومتر آنلاین - بخش ۴ Online Stopwatch - Part 4

• کرونومتر آنلاین - بخش ۵ Online Stopwatch - Part 5

• کرونومتر آنلاین - بخش ۶ Online Stopwatch - Part 6

• تایمر شمارش معکوس با زنگ هشدار - بخش ۱ Count Down Timer with Alarm - Part 1

• تایمر شمارش معکوس با زنگ هشدار - بخش ۲ Count Down Timer with Alarm - Part 2

• تایمر شمارش معکوس با زنگ هشدار - بخش ۳ Count Down Timer with Alarm - Part 3

• تایمر شمارش معکوس با زنگ هشدار - بخش ۴ Count Down Timer with Alarm - Part 4

• تایمر شمارش معکوس با زنگ هشدار - بخش ۵ Count Down Timer with Alarm - Part 5

• تایمر شمارش معکوس با زنگ هشدار - بخش ۶ Count Down Timer with Alarm - Part 6

• تایمر شمارش معکوس با زنگ هشدار - بخش ۷ Count Down Timer with Alarm - Part 7

• چالش (جلوه تایپ): دمو Challenge (Typewriting Effect): Demo

متفرقه (نکات و اطلاعات مفید) Miscellaneous (Bits and Pieces of Useful Information)

• ابزار فَنسی‌باکس FancyBox Tool

بخش جایزه Bonus Section

• سخنرانی جایزه: پیشنهادات ویژه روی دوره‌های دیگر!!! Bonus Lecture: Special Offers on Other Courses!!!