"Build an Interactive Website" was retired on September 11, 2014. You are now viewing the recommended replacement.
- JavaScript
- Beginner
About this Course
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!
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.
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.
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
Teacher
-
Treasure Porth
Web developer, JavaScript enthusiast, education professional. I'm happy as long as I have a problem to solve and something new to learn. I am passionate about doing meaningful work, providing affordable education, working with underserved populations, and not being evil. I love to travel and I'm really good at karaoke.