jQuery: Learn by Example

$25.00

Simplify your coding workflow by learning this efficient JavaScript library! Explore the basic principles that provide the backbone of jQuery, from working with selectors and events to performing DOM manipulations. Supplemental Material included!

Length: 7 hrs

This title is available in the
Total Training All-Access library.

Subscribe Now

Description

jQuery is one of the most commonly used efficiency tools in web development. jQuery takes the most common operations that you would want to perform on your website and allows you to accomplish it in one line of code. Learn jQuery by example – from basic building blocks to developing your own custom plugins!

With jQuery: Learn by Example, you’ll learn how to:

  • Use jQuery to add styles, animations, Ajax support & more to websites
  • Add common components to sites with custom plugins
  • Build your own stateless & stateful custom plugins in jQuery
  • Work with the jQuery UI library, including the theme roller
  • and so much more!

Requirements & Details:

  • Basic understanding of HTML, CSS and Javascript required
  • This course uses jQuery 3.1.0 and jQuery UI 1.12.1
  • This course is for Web developers who want to move beyond mundane JavaScript programming and harness the power of jQuery

Sample clip

 

Chapter 01:       YOU, THIS COURSE, AND US!      0:01:59

Lesson 01          You, This Course, and Us (1:59)

 

Chapter 02:       INTRODUCTION TO JQUERY        0:20:37

Lesson 02          Client-side Programming with JavaScript (7:44)

Lesson 03          Why is jQuery Cool? (8:09)

Lesson 04          The Document Object Model (4:45)

 

Chapter 03:       INSTALLATION AND SETUP         0:10:32

Lesson 01          NPM and HTTP Server Install (4:47)

Lesson 02          Download and Set Up jQuery (3:32)

Lesson 03          Setup Examples Used in This Course (2:14)

 

Chapter 04:       SELECTORS      0:47:17

Lesson 01          Example 1: Hello jQuery World! (11:33)

Lesson 02          Selectors (4:27)

Lesson 03          Example 2: Simple selectors (4:12)

Lesson 04          Example 3: More selectors (9:10)

Lesson 05          Example 4: Traversing the DOM (8:37)

Lesson 06          Example 5: Advanced Selectors (4:45)

Lesson 07          Example 6: Select Using Functions – the filter() selector (4:34)

 

Chapter 05:       CHAINING AND THE NO-CONFLICT MODE       0:13:17

Lesson 01          Example 7: Chaining (4:38)

Lesson 02          Example 8: jQuery in the No-Conflict Mode (7:19)

Lesson 03          Accessing Native Browser Element (1:20)

 

Chapter 06:       EVENT HANDLING          1:25:14

Lesson 01          Events and Event Handling (7:29)

Lesson 02          Example 9: Event Handlers (9:12)

Lesson 03          The Event Object (6:02)

Lesson 04          Example 10: Accessing the Event Object Properties (5:28)

Lesson 05          Event Capture and Bubble Phases (8:07)

Lesson 06          Example 11: Multiple Event Handlers (4:32)

Lesson 07          Example 12: Passing Data to Event Handlers (3:11)

Lesson 08          Example 13: Listen Just Once (3:10)

Lesson 09          Example 14: Remove Event Handlers (4:29)

Lesson 10          Example 15: Events in Namespaces (6:20)

Lesson 11          Event Delegation (6:05)

Lesson 12          Example 16: Setting up Delegated Events (5:05)

Lesson 13          Example 17: Listening to Key Events (3:05)

Lesson 14          Example 18: Event Triggers (4:30)

Lesson 15          Custom Events (4:04)

Lesson 16          Example 19: Working with Custom Events (4:27)

Chapter 07:       CSS AND ANIMATIONS    1:14:26

Lesson 01          Effects and Animations (3:57)

Lesson 02          Example 20: The CSS() Function (9:03)

Lesson 03          Example 21: The Show() and Hide() Functions (6:03)

Lesson 04          Example 22: The fadeIn() and fadeOut() Animations (3:01)

Lesson 05          Example 23: The slideUp() and slideDown() Animations (2:15)

Lesson 06          Example 24: The Toggle() Function (2:44)

Lesson 07          How do jQuery Animations Work? (4:15)

Lesson 08          Example 25: Run Code after an Animation Completes (4:38)

Lesson 09          Example 26: The Animate() Function (5:33)

Lesson 10          Example 27: More Animation Fun (4:00)

Lesson 11          Example 28: Stop Animations Using the Stop() Function (7:38)

Lesson 12          Example 29: Delay Animations Using Delay() (3:46)

Lesson 13          Example 30: Chaining and Queueing Animations (7:34)

Lesson 14          Example 31: Custom Animation Queues (5:05)

Lesson 15          Example 32: Bypassing the Queue (4:55)

 

Chapter 08:      DOM MANIPULATION           0:40:36

Lesson 01          Manipulating the DOM (1:15)

Lesson 02          Example 33: Manipulating Element Contents (4:27)

Lesson 03          Example 34: The attr() and removeAttr() Functions (4:37)

Lesson 04          Example 35: Add DOM Elements Relative to Selected Elements (9:49)

Lesson 05          Example 36: Create or Clone Elements (6:31)

Lesson 06          Example 37: The remove(), detach() and empty() Functions (7:32)

Lesson 07          Example 38: The wrap() and wrapAll() Functions (4:03)

Lesson 08          Example 39: Explicit Iteration Using Each() (2:23)

 

Chapter 09:        AJAX REQUESTS           0:41:19

Lesson 01          Ajax (5:09)

Lesson 02          Example 40: The $.ajax() request (10:10)

Lesson 03          Example 41: Syntactic Sugar – the $.get(), $.getScript(), $.getJSON() (6:37)

Lesson 04          Example 42: The load() Function (2:37)

Lesson 05          Example 43: Serialize Form Contents Using serialize() and serializeArray() (7:18)

Lesson 06          Example 44: Local and Global Ajax Events (9:30)

 

Chapter 10:        PERFORMANCE OPTIMIZATION    0:13:18

Lesson 01          Categories of Optimization Techniques (4:22)

Lesson 02          Performance Optimizations – Tips and Tricks (8:56)

 

Chapter 11:        PLUG-INS          0:30:01

Lesson 01          What are Plug-ins? (3:59)

Lesson 02          Example 45: The Slick Carousel (9:27)

Lesson 03          Building Your Own Custom Plug-in (4:18)

Lesson 04          Example 46: Our First Custom Plug-in, the fancyButton() (4:33)

Lesson 05          Example 47: Best Practices to Follow in the fancyButton() Plug-in (7:44)

 

Chapter 12:        THE WIDGET FACTORY   0:30:01

Lesson 01          What is the Widget Factory? (5:33)

Lesson 02          Example 48: Build Your First Widget (7:52)

Lesson 03          Example 49: Widgets That Expose Methods to Manipulate Them (9:31)

Lesson 04          Example 50: Widgets That Trigger Events (7:05)

Chapter 13:        THE JQUERY UI LIBRARY            0:24:17

Lesson 01          Download and install the jQuery UI library (8:44)

Lesson 02          Example 51: Set up Components Using the jQuery UI Library (5:31)

Lesson 03          Example 52: The effects() Function (3:12)

Lesson 04          The jQuery UI Theme Roller (5:24)

Lesson 05          Example 53: Try a Custom Theme (1:26)

 

Janani Ravi, Vitthal Srinivasan, Swetha Kolalapudi, and Navdeep Singh have honed their tech expertise at Google and Flipkart. Together, they have created dozens of training courses and are excited to be sharing their content with eager students. The team believes it has distilled the instruction of complicated tech concepts into enjoyable, practical, and engaging courses.

Janani: 7 years at Google (New York, Singapore); Studied at Stanford; also worked at Flipkart and Microsoft

Vitthal: Also Google (Singapore) and studied at Stanford; Flipkart, Credit Suisse and INSEAD too

Swetha: Early Flipkart employee, IIM Ahmedabad and IIT Madras alum

Navdeep: Longtime Flipkart employee too, and IIT Guwahati alum

You may also like…