jQuery Basics Course (How To)

jQuery is an immensely popular JavaScript library used to add interactivity to webpages. It's a mature and robust tool that can help you build confidence as a developer by helping you quickly and easily get projects up and running.

This course explores the fundamentals of manipulating elements on a webpage and responding to user interactions. We cover what jQuery is, why you'd want to use it, and how to include it in your projects. Throughout the course, you'll use jQuery to enhance several small projects and learn how to add a level of flair and interactivity to any site you work on.

What you'll learn

• Event handling
• Manipulating the DOM
• DOM Traversal
• jQuery Collections

Introducing jQuery

Learn what jQuery is, a bit about its history, and how to include it in your projects. Then dive into creating your first jQuery application: a blog previewer with a simple flash animation!

Chevron 11 steps

• What is jQuery?

  3:10

• jQuery: History and Relevance Today

  2:51

• jQuery vs. JavaScript

  6:02

• Review: What is jQuery?

  5 questions

• Animating Elements with jQuery

  7:43

• jQuery Syntax and Animation Effects

  2 objectives

• Blog Previewer: Changing Content Inside Elements

  7:13

• Using text() and html()

  3 objectives

• Blog Previewer: Getting Values from Form Fields

  6:06

• Getting Values from Form Fields

  2 objectives

• Introduction to jQuery Review

  5 questions

Understanding jQuery Events and DOM Traversal

Learn more about jQuery selectors, events, and DOM traversal by building a fun and interactive spoiler revealer.

Chevron 13 steps

• Adding jQuery to a Project

  2:43

• Spoiler Revealer: Breaking it Down

  6:28

• Understanding Unobtrusive JavaScript

  4:38

• Adding New Elements to the DOM

  5:06

• Progressive Enhancement and Unobtrusive JavaScript

  5 questions

• Adding New Elements to the DOM

  2 objectives

• Using on() for Event Handling

  2:26

• Using Events with Dynamically Added Elements

  4:41

• The Event Object

  4:44

• Events with jQuery

  2 objectives

• What is Traversal?

  8:42

• DOM Traversal with jQuery

  2 objectives

• jQuery Events and DOM Traversal Review

  5 questions

Working with jQuery Collections

Use more advanced selectors and traversal methods, and learn how to loop through a jQuery collection by enhancing a web development newsfeed.

Chevron 10 steps

• jQuery-Specific Selectors

  8:22

• Working with jQuery-Specific Selectors

  1 objective

• Changing Element Properties

  4:46

• Changing Element Styles and Classes

  3:20

• Adding/Removing Classes

  2 objectives

• Stopping the Browser's Default Behavior

  8:11

• Looping through a jQuery collection

  6:15

• The .each() method

  1 objective

• Conclusion

  3:19

• Working with jQuery Collections Review

  5 questions