Learn jQuery: Course OverviewCourse Overview

Learn jQuery: Introduction

In this course, you will learn about jQuery linking, targeting, and methods.

Start

Key Concepts

Review core concepts you need to learn to master this subject

jQuery streamlines dynamic behavior

jQuery document ready

jquery object variables start with

jQuery CDN Import

jQuery streamlines dynamic behavior

//Selecting DOM elements and adding an event listener in JS
const menu = document.getElementById('menu');
const closeMenuButton = document.getElementById('close-menu-button');
closeMenuButton.addEventListener('click', () => {
    menu.style.display = 'none';
});

//Selecting DOM elements and adding an event listener in jQuery
$('#close-menu-button').on('click', () =>{
  $('#menu').hide();  
});

jQuery is a JavaScript library that streamlines the creation of dynamic behavior with predefined methods for selecting and manipulating DOM elements. It offers a simplified approach to implementing responsiveness and requires fewer lines of code to assign behaviors to DOM elements than traditional JavaScript methods.

jQuery Setup

Lesson 1 of 1

1
Why jQuery?
JavaScript is the most widely-used language for adding dynamic behavior to web pages. The JavaScript community contributes to a collection of libraries that extend and ease its use. In this course,…
Start
2
jQuery Methods
In the last exercise, you used jQuery to cut twelve lines of code down to three. Let’s use Legos as an analogy for understanding how jQuery works. With an infinite number of Legos, you could buil…
Start
3
jQuery Library
We are going to use jQuery to add some interactivity to the MOVE Gear site, an online marketplace for athletic apparel. To use the jQuery library, index.html must load it with the other depe…
Start
4
Adding jQuery
To include jQuery, we use a tag as follows: In this example, the jQuery library is loaded from the jQuery content delivery network (CDN). A CDN is a collection of servers that can deliver…
Start
5
.ready()
The jQuery library makes it quick and easy to add visual effects and interactivity to your web page. However, a web page must be rendered in a user’s browser before it’s possible to have any dynami…
Start
6
Targeting by Class
Let’s look at the code we just pasted into our main.js file: $(document).ready(() => { }); In the example above, document is a special keyword that we use to target the HTML document and c…
Start
7
Targeting by id
While classes allow us to target multiple elements at once, we can also target single elements by id. To select by id, we prepend the element’s id name with the # symbol. $(‘#someId’).hide(); I…
Start
8
jQuery Objects
Now that you’ve seen some jQuery in action, let’s dive a bit deeper into syntax. You’ve probably noticed the $ symbol before anything we target. The $ symbol is an alias for the jQuery function. Th…
Start
9
Event Handlers
Now that we’ve got jQuery up and running, let’s give it a little gas! The jQuery .on() method adds event handlers to jQuery objects. The method takes two parameters: a string declaring the event to…
Start
10
Review: jQuery Introduction
That’s just a taste of what you can do with jQuery. While there’s still a lot to learn, in this unit you used jQuery to add dynamic behavior to a website. With jQuery objects, you can quickly targe…
Start