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