Learn jQuery: Introduction
In this course, you will learn about jQuery linking, targeting, and methods.
StartKey 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
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
- 1JavaScript 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,…
- 2In 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…
- 3We 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…
- 4To 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…
- 6Let’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…
- 7While 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…
- 8Now 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…
- 9Now 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…
- 10That’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…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory