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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo