Learn jQuery: Introduction

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 document ready

//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();  
});

JavaScript code runs as soon as its file is loaded into the browser. If this happens before the DOM (Document Object Model) is fully loaded, unexpected issues or unpredictable behaviors can result.

jQuery’s .ready() method waits until the DOM is fully rendered, at which point it invokes the specified callback function.

jquery object variables start with

//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 objects are typically stored in variables where the variable name begins with a $ symbol. This naming convention makes it easier to identify which variables are jQuery objects as opposed to other JavaScript objects or values.

jQuery CDN Import

//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 typically imported from a CDN (Content Delivery Network) and added at the bottom of an HTML document in a <script> tag before the closing </body> tag.

The jQuery <script> tag must be listed before linking to any other JavaScript file that uses the jQuery library.

jQuery Setup

Lesson 1 of 1

1
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,…
2
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…
3
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…
4
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…
5
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…
6
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…
7
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…
8
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…
9
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…
10
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…