While jQuery is a convenient tool, we don't need to use it to manipulate the DOM. Every jQuery function is built using JavaScript code, which means that we could build all our applications in this section using only JavaScript.

Since its first release in 2006, jQuery has been widely used in JavaScript applications. However, with the advent of JavaScript frameworks such as React, Angular, Vue, and others, jQuery is no longer the go-to solution it once was. It is still widely used but it's important to know (or at least be familiar with) the JavaScript equivalents to jQuery methods.

This lesson is here for reference purposes. You are not expected to use JavaScript equivalents to jQuery for the independent project, though you are welcome to do so if you wish.

This lesson is not meant to be comprehensive - we will only cover some of the more common jQuery functions we learned this section. Feel free to do further research on your own. There is always a pure JavaScript solution to anything jQuery can do. Some solutions are simple while others are more challenging.

JavaScript Equivalents to Common jQuery Functions

---

Targeting a Class or Id

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.
• $("p") targets all p tags in an HTML document.

Here's how we do the same thing with JavaScript:

• document.getElementsByClassName("this-is-a-class") targets a class.
• document.getElementById("this-is-an-id") targets an ID.
• document.getElementsByTagName("p") would target all p tags in a document.

Adding a Click Event Handler

Both JavaScript and jQuery have a click() function that can be used with a targeted element.

Showing and Hiding Elements

To show and hide an element with the id #hidden, we do the following in jQuery:

$("#hidden").show();
$("#hidden").hide();

Here's how we do the same with JavaScript:

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 style and display are properties of the ID, not functions.

To toggle between hiding and showing an element, we simply do the following with jQuery:

$("#hidden").toggle();

To do the same with JavaScript, we'd use a conditional to explicitly state what the display property of an ID should be. This is one example where jQuery noticeably simplifies our code.

Appending and Prepending Elements

jQuery and JavaScript both have append(). JavaScript has insertBefore() while jQuery has prepend().

Adding and Removing Classes

With jQuery, we can use addClass() and removeClass().

With JavaScript, we need to manipulate an element's 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");

Waiting For HTML to Load

In jQuery, we use $(document).ready(). In JavaScript, we can use window.onload. However, window.onload will take longer because it waits for all content to load, including images, while $(document).ready() does not. It's possible to write more verbose code in JavaScript to do what $(document).ready() does, but it's beyond the scope of this lesson.

Conclusion

In this lesson, we covered a few JavaScript equivalents to jQuery methods. Once again, this lesson isn't meant to be comprehensive. You don't need to be an expert in writing vanilla JavaScript yet. If you find yourself with time to spare in class or on your own, we recommend exploring JavaScript without jQuery further. While jQuery can make learning to code easier, in the long term it's more important to have a strong foundation in JavaScript than in jQuery.