15 Popular jQuery Features And Their Vanilla JavaScript Equivalents
15 VanilaJS Features Every Developer Should Learn
Through this article, I will give you a walkthrough of the popular features in jQuery that web developers use and how you can use the native functions of vanilla JavaScript to accomplish those tasks.
15 Common jQuery Features And Their Equivalents In Vanilla JavaScript
- Document Ready
- Select DOM Elements
- Loop Through DOM Elements and Make Changes
- Search an Element Inside Another Element
- Apply Styles To Elements
- Hide And Show Elements
- Create Elements Inside DOM
- Update DOM
- Add, Remove, and Toggle Class From Elements
- Check If an Element Has a Class
- Listen To Events
- Listen To Events For Dynamically Added Elements
- Create and Trigger Events
- Find The Next, Previous, and Parent Element
- Network Requests Using Fetch
1. Document Ready
Document ready is an event that indicates that the DOM of the page is completely ready so that you can handle it without worrying if some parts of the DOM have not been loaded. This event fires before any image or video get rendered into the website but after the whole DOM is ready.
Refer to the following code snippet to learn how to use document ready in jQuery and vanilla JavaScript.
2. Select DOM Elements
Selecting one or more DOM elements is one of the basic features of jQuery. The equivalents to $() in JavaScript are document.querySelector() or document.querySelectorAll() functions.
Refer to the following code snippet to learn how to select DOM elements in both jQuery and vanilla JavaScript.
3. Loop Through DOM Elements and Make Changes
In the previous section, you learnt about querySelectorAll(). It returns a NodeList that includes elements that matches the query. The equivalent to $().each() in JavaScript is document.querySelectorAll().forEach() function.
Refer to the following code snippet to learn how to loop through DOM elements and make changes through jQuery and vanilla JavaScript.
4. Search an Element Inside Another Element
In jQuery, you can search a child element using the find() function. The equivalents in JavaScript are querySelector() or querySelectorAll() functions on an element.
Refer to the following code snippet to learn how to search a child element through jQuery and vanilla JavaScript.
5. Apply Styles To Elements
In jQuery, you can apply styles to an element using the css() function. The equivalent in JavaScript is the style attribute of the selected element.
For example, refer to the following code snippet to learn how to apply styles to an element through jQuery and vanilla JavaScript.
6. Hide And Show Elements
In jQuery, you can hide an element using the hide() function, and show an element using the show() function. The equivalent in JavaScript is style.display attribute.
Refer to the following code snippet to learn how to hide or show an element through jQuery and vanilla JavaScript.
7. Create Elements Inside DOM
In jQuery, you can create elements using append() function. The equivalent in JavaScript is createElement() function.
Refer to the following code snippet to learn how to create an element and append it inside an element through jQuery and vanilla JavaScript.
8. Update DOM
In jQuery, you can update the DOM using the text() and html() functions. The equivalents in JavaScript are textContent, and innerHTML attributes.
Refer to the following code snippet to learn how to update an element through jQuery and vanilla JavaScript.
9. Add, Remove, and Toggle Class From Elements
In jQuery, you can manage class names of an element using the addClass(), removeClass(), and toggleClass() functions. The equivalents in JavaScript are classList.add, classList.remove, and classList.toggle attributes.
Refer to the following code snippet to learn how to manage class names in an element and through jQuery and vanilla JavaScript.
10. Check If an Element Has a Class
In jQuery, you can check if an element has a class using the hasClass() function. The equivalent in JavaScript is classList.contains() function.
Refer to the following code snippet to learn how to check if an element has a class through jQuery and vanilla JavaScript.
11. Listen To Events
In jQuery, you can listen to events using many event listeners. Some of them are click(function(event) {}), mouseenter(function(event) {}), keyup(function(event) {}). The equivalents in JavaScript are addEventListener(“click”, (event) ⇒ {}), addEventListener(“mouseenter”, (event) ⇒ {}), addEventListener(“keyup”, (event) ⇒ {}) functions.
Refer to the following code snippet to learn how to listen to events through jQuery and vanilla JavaScript.
12. Listen To Events For Dynamically Added Elements
In jQuery, you can listen to events for dynamically added elements using the on() function. The equivalent in JavaScript is addEventListener() function.
Refer to the following code snippet to learn how to listen to events for dynamically added elements through jQuery and vanilla JavaScript.
13. Create and Trigger Events
In jQuery, you can create and trigger events using the trigger() function. The equivalent in JavaScript is dispatchEvent(new Event()) function.
Refer to the following code snippet to learn how to create and trigger events through jQuery and vanilla JavaScript.
14. Find The Next, Previous, and Parent Element
In jQuery, you can find the next, previous, and parent element using the next(), prev(), and parent() functions. The equivalents in JavaScript are nextElementSibling, previousElementSibling, and parentElement attributes.
Refer to the following code snippet to find the next, previous, and parent element through jQuery and vanilla JavaScript.
15. Network Requests Using Fetch
In jQuery, you can perform network requests using the ajax() function. In JavaScript the equivalent is fetch() function.
Refer to the following code snippet to learn how to perform network requests through jQuery and vanilla JavaScript.
Kudos! You have completed learning the most used features in vanilla JavaScript. Now you can go ahead and start implementing the above features to your current or upcoming projects.
If you enjoyed reading this post and have learnt something new, then please give a clap, share it with your friends, and follow me to get updates for my upcoming posts. You can connect with me at LinkedIn.
