jQuery provides you with a feature-rich suite of tools to simplify your JavaScript code. In this hands-on code building lab, you will be introduced to jQuery including JavaScript scoping, traversing the DOM, IIFE, functions, selecting elements, parameter handling and defaults, and more. This lab will introduce you to JavaScript fundamentals as well, as jQuery is a JavaScript library.
What You Will Learn
In this hands-on lab, you will be learning about both JavaScript and jQuery. More specifically, you will learn:
- Working in the browser’s console
- Scope (it’s different than PHP)
- Traversing the HTML DOM
- IIFE
- Selecting elements
- Data types including objects and arrays
- Basic event handling
- Functions
- Setting default states
- and more
Prerequisites
You need to have a sandbox test site spun up and ready to go. If you need help with it, see the Setting Up Your Sandbox Test Website article in our Help Center. Make sure you turn on the debug mode in your wp-config.php
file. The code is in that same Help Center article.
In order to do this lab, you will need the following:
- A local web server, such as Local by Flywheel, Desktop Server, MAMP, WAMP, VVV, or some other application.
- Your favorite IDE or editor. (Tonya uses PhpStorm.)
- Firefox and/or Google Chrome
Break. Go rest your noodle for a couple of minutes.
Episodes
Total Lab Runtime: 02:32:33
- 1 Lab Introductionfree 10:05
- 2 Document Object Model (DOM)free 08:23
- 3 Select Elements from the DOMfree 13:48
- 4 The Why of jQueryfree 04:46
- 5 Variablespro 14:42
- 6 Traverse the DOMpro 17:08
- 7 Basic Animation Effectspro 09:16
- 8 Data Typespro 15:44
- 9 Basic Eventspro 09:53
- 10 Loading Scriptspro 10:47
- 11 Declaring Functionspro 05:28
- 12 Meet the IIFEpro 09:03
- 13 jQuery's $pro 04:14
- 14 Scopepro 09:44
- 15 Cachingpro 03:34
- 16 Wrap It Uppro 05:58