Selecting DOM elements

Modern frontend libraries and frameworks offer the ref concept for accessing DOM element references, but web developers often have to query DOM elements if they don’t depend on a specific frontend framework. See how document.querySelectorAll() implements easy, native DOM selection similar to jQuery:

// jQuery:const elms = $(\\'.items input[type=checkbox]:checked\\');console.log(elms.toArray());// Native:const elms = document.querySelectorAll(\\'.items input[type=checkbox]:checked\\');console.log(elms);
Result:

Selecting DOM elements with CSS queries using jQuery and native web APIs
jQuery offers the closest() method to traverse back and find a matching DOM node for a given selector. The native DOM API also implements the same method using the OOP pattern:
// jQuery:const elms = $(\\'.items input[type=checkbox]:checked\\')             .closest(\\'li\\');console.log(elms.toArray());// Native:const elms = document.querySelectorAll(\\'.items input[type=checkbox]:checked\\');console.log([...elms].map(e => e.closest(\\'li\\')));
Result:

Selecting the closest DOM elements using jQuery and native web APIs
Some jQuery features don’t have identical, shorthand alternatives in modern standard DOM API, but we can use existing DOM API methods effectively with modern JavaScript features. 
For example, jQuery supports the non-standard :contains(text) selector, so we have to implement it with the filter() array method as follows:
// jQuery:const elms = $(\\'.items li label:contains(\\\"Java\\\")\\');console.log(elms.toArray());// Native:const elms = document.querySelectorAll(\\'.items li label\\');console.log([...elms].filter(e => e.textContent.includes(\\'Java\\')));
Result:

Filtering elements that contain a specific text segment using jQuery and native web APIs
The querySelectorAll() method takes the power of modern CSS pseudo-classes to offer a better native alternative for the jQuery find() function. For example, we can use the :scope pseudo-class to scope native query selector calls similar to the jQuery find() function:
// jQuery:const elms = $(\\'.pages\\')             .find(\\'.pages > .page-1\\');console.log(elms.toArray());// Native:const elms = document.querySelector(\\'.pages\\')             .querySelectorAll(\\':scope .pages > .page-1\\');console.log(elms);
Result:

Scoping DOM element selectors using jQuery and native web APIs
      Retrieving and updating DOM attributes
The class attribute, element-specific attributes, and custom data attributes are common HTML attributes that web developers often have to retrieve and update while developing web apps. 
In the past, developers had to manipulate the native className property manually to update element class names, so they used jQuery’s addClass(), removeClass(), and toggleClass() pre-developed function implementations. But now, the native classList object implements better class attribute value handling support:
// jQuery:const elm = $(\\'#item-1\\');elm.addClass(\\'item-sel\\')  .removeClass(\\'item-vl\\')  .toggleClass(\\'item-lg\\')  .toggleClass(\\'item-lg\\');console.log(elm.attr(\\'class\\'));// Native:const elm = document.querySelector(\\'#item-2\\');const cl = elm.classList;cl.add(\\'item-sel\\');cl.remove(\\'item-vl\\');cl.toggle(\\'item-lg\\');cl.toggle(\\'item-lg\\');console.log(elm.className);
Result:

Updating the class attribute values using jQuery and native web APIs
Meanwhile, the getAttribute() and setAttribute() native DOM methods become a standard replacement for the well-known jQuery attr() shorthand function:
// jQuery:const elm = $(\\'#item-1\\');elm.attr(\\'title\\', \\'Element #1\\');console.log(elm.attr(\\'title\\'));// Native:const elm = document.querySelector(\\'#item-2\\');elm.setAttribute(\\'title\\', \\'Element #2\\');console.log(elm.getAttribute(\\'title\\'));
Result:

Changing and retrieving HTML element attributes using jQuery and native web APIs
jQuery recommends developers use its attr() function to set custom data attributes, but now you can use the inbuilt dataset property for more productive data attribute retrieval/modification as follows:
// jQuery:const elm = $(\\'#item-1\\');elm.attr(\\'data-player-name\\', \\'John\\')elm.attr(\\'data-score\\', \\'200\\');console.log(`${elm.attr(\\'data-player-name\\')}: ${elm.attr(\\'data-score\\')}`);// Native:const elm2 = document.querySelector(\\'#item-2\\');elm2.dataset.playerName = \\'John\\';elm2.dataset.score = \\'200\\';console.log(`${elm2.dataset.playerName}: ${elm2.dataset.score}`);
Result:

Updating custom data attributes using jQuery and native web APIs
      DOM element manipulation
In the past, most developers used jQuery for DOM manipulation since the native DOM manipulation API didn’t offer developer-productivity-focused features. Now every modern standard web browser implements productive, high-level, inbuilt DOM manipulation support. 
Creating and appending elements are the most frequent operations in DOM manipulation tasks. Here is how it’s done using both jQuery and native web APIs:
Result:

Creating and appending new HTML elements with jQuery and native web APIs (wrapped with setTimeout for better demonstration)
jQuery also implemented prepend(), before(), and after() shorthand functions for productive DOM manipulation  —  now the native DOM API implements all these methods as well. 
Look at the following example that demonstrates before() and after():
// jQueryconst createElm = () => $(\\'
list-1
\\');const elm = $(\\'#item-1\\');elm.before(createElm());elm.after(createElm());// Native:const createElm = () =>  { const e = document.createElement(\\'h3\\'); e.textContent = \\'item-2\\'; return e;}const elm = document.querySelector(\\'#item-2\\');elm.before(createElm());`elm.after(createElm())`;
Result:

Using before() and after() functions using jQuery and native web APIs
      Animating DOM elements
If you are an experienced web developer who built web apps more than a decade ago, you know how jQuery fadeIn(), fadeOut(), and animate() functions helped you to make your web apps more interactive. These animation functions even supported animation easing to build smoother animations. 
Native CSS animations/transitions and JavaScript web animation API made jQuery animation API obsolete. Here is how you can implement fadeIn() with the standard web animations API:
Result:

Fade-in animations using jQuery and native web animations API
You can use the native animate() method as a standard alternative for the old-fashioned, non-standard jQuery animate() function to create high-performance, smooth animations using pure JavaScript without switching CSS class names:
Result:

Creating animations with jQuery and native web animations API
jQuery dynamically updates CSS properties to construct animation keyframes, but the standard animations API natively renders animations, so the native web animation-based approach is indeed performance-friendly. 
Moreover, you can create CSS-only animation loops without even using JavaScript, as explained in this comprehensive tutorial.
      Working with browser events
Every browser typically lets developers attach event handlers through JavaScript for various standard events. Every web app uses DOM events to make the web interface interactive for users. jQuery offers shorthand on() and off() functions to register event handlers, but the native DOM API also offers self-explanatory functions for the same purpose:
// jQuery:function handleClick(e) { const btn = $(e.target); const val = parseInt(btn.text())   1; btn.text(val); if(val === 5)   btn.off(\\'click\\', handleClick);}$(\\'#btn1\\').on(\\'click\\', handleClick);// Native:function handleClick(e) { const btn = e.target; const val = parseInt(btn.textContent)   1; btn.textContent = val; if(val === 5)   btn.removeEventListener(\\'click\\', handleClick);}document.querySelector(\\'#btn2\\')       .addEventListener(\\'click\\', handleClick);
Result:

Attaching and removing event handlers with jQuery and native web APIs
Both jQuery and the native DOM API offer shorthand ways to attach event listeners:
// jQuery:$(\\'#btn1\\').click(() => {});// Native:document.querySelector(\\'#btn2\\').onclick = () => {};
jQuery also offers the one() function to trigger an event handler once — now every standard web browser supports the once option for the same purpose:
// jQuery$(\\'#btn1\\').one(\\'click\\', () => {});// Native:document.querySelector(\\'#btn2\\').addEventListener(\\'click\\', () => {}, { once: true});
      Communicating with web services
Past monolithic web apps frequently sent HTTP requests to the backend server to get new pages with updated data  —  web apps rendered the entire page for each major user action. 
Later, developers made better, interactive web apps by updating a part of the webpage by requesting HTML content via AJAX. They used jQuery to send AJAX requests because of browser compatibility and productivity issues with the built-in AJAX API. 
Now developers can use the standard fetch() function instead of jQuery’s AJAX features:
// jQuery:$.ajax({ url: \\'https://corsproxy.io/?https://example.com\\'}).then(data => { console.log(data.length);});// jQuery:$.get(\\'https://corsproxy.io/?https://example.com\\').then(data => { console.log(data.length);});// Native:fetch(\\'https://corsproxy.io/?https://example.com\\') .then(req => req.text()) .then(data => {   console.log(data.length); });
Result:

Sending HTTP requests with jQuery and native web APIs
Nowadays, most developers use RESTful APIs to separate data sources from the presentation layer. jQuery offers a productive, shorthand function for getting JSON data from RESTful services, but native fetch() offers a better standard approach:
// jQuery$.getJSON(\\'https://jsonplaceholder.typicode.com/users\\').then(users => { console.log(users);});// Nativefetch(\\'https://jsonplaceholder.typicode.com/users\\') .then(req => req.json()) .then(users => {   console.log(users); });
Result:

Requesting JSON data from a RESTful web service with jQuery and native web APIs
      Utility functions
jQuery offers various pre-developed utility functions to save web developers time. Nowadays, we can find inbuilt ECMAScript features for all of these pre-developed utility functions that exist in jQuery v4, as listed in the following table:
jQuery
Native replacement
`$.each()`
`Array.forEach()`
`$.extend()`
`Object.assign() or the spread operator`
`$.inArray()`
`Array.includes()`
`$.map()`
`Array.map()`
`$.parseHTML()`
`document.implementation.createHTMLDocument()`
`$.isEmptyObject()`
`Object.keys()`
`$.merge()`
`Array.concat()`
Older utilities like $.parseJSON() were already deprecated in past jQuery versions and removed in v4.
      Can I use jQuery with Vue, React, or Angular?
Web developers used jQuery when modern app development frontend libraries didn’t exist. They used jQuery’s DOM manipulation and AJAX features mostly to dynamically update the frontend without refreshing the entire webpage. Now, SPA (single-page application) development techniques in modern frontend frameworks/libraries let web developers build highly interactive, well-structured, lightweight web apps without using old-fashioned AJAX-based rendering techniques. 
We can use jQuery with Vue, React, and Angular like any popular frontend library/framework, but integrating jQuery with these frontend libraries is discouraged since it doesn’t bring any value to the modern frontend development ecosystem. 
Every popular frontend library offers the ref concept for accessing DOM element references within components, so you don’t need to use either jQuery or document.querySelector(). For example, you can get the DOM element reference of a 
 in Vue as follows:
Result:

Accessing DOM element references in Vue using refs
Using jQuery in Vue as follows is indeed possible, but it undermines the modern Vue source with old-fashioned syntax that was introduced about a decade ago and breaks the intended way a modern frontend library should be used: