In jQuery, we do the following to target classes, ids, and HTML elements:
$(".this-is-a-class")targets a class.
$("#this-is-an-id")targets an ID.
ptags in an HTML document.
document.getElementsByClassName("this-is-a-class")targets a class.
document.getElementById("this-is-an-id")targets an ID.
document.getElementsByTagName("p")would target all
ptags in a document.
click() function that can be used with a targeted element.
To show and hide an element with the id
#hidden, we do the following in jQuery:
document.getElementById("#hidden").style.display = "block"; document.getElementById("#hidden").style.display = "none";
The first line shows the element while the second hides it. Note that
display are properties of the ID, not functions.
To toggle between hiding and showing an element, we simply do the following with jQuery:
display property of an ID should be. This is one example where jQuery noticeably simplifies our code.
insertBefore() while jQuery has
With jQuery, we can use
classList property. For instance, let's say we want to add a class named
"red-color" to an element with an ID of
#blue-red. Then we want to remove the class named
"blue-color" from that ID.
let blueRedElement = document.getElementById("blue-red"); blueRedElement.classList.add("red-color"); blueRedElement.classList.remove("blue-color");
In jQuery, we use
window.onload will take longer because it waits for all content to load, including images, while
$(document).ready() does, but it's beyond the scope of this lesson.
Lesson 10 of 12
Last updated March 31, 2021