jQuery is a JavaScript library that aims to simplify DOM manipulation, animations, ajax, and event handling.

Some examples of jQuery syntax compared to vanilla JavaScript

Executing code after the page has finished loading

Vanilla Javascript:

window.addEventListener('DOMContentLoaded', (event) => {
	console.log("We can now manipulate the DOM!");
});

jQuery:

$(function() {
    console.log("We can now manipulate the DOM!");
});

Querying items, and adding a class to all of them

Vanilla Javascript:

document.querySelectorAll("#my-id a").forEach(node => {
	node.classList.add("my-class");
});

jQuery:

$("#my-id a").addClass("my-class");

Adding a click handler to a div that progressively increases its width by 100px

Vanilla Javascript:

document.querySelector("div#test").addEventListener("click", event => {
    let initialWidth = event.target.clientWidth;
    let addedWidth = 0;
    var id = setInterval(frame, 1);
    function frame() {
        if (addedWidth == 100) {
        clearInterval(id);
        } else {
        addedWidth++;
        event.target.style.width =  addedWidth + initialWidth + "px";
        }
    }
})

jQuery:

$("div#test").click(function(){
    $(this).animate({width: "+=100px"});
});

The past

When jQuery came out in 2006¹, ECMAScript (the JavaScript standard implemented by browsers) was only in its version 3, and lacked convenient DOM tree traversal methods such as CSS query selectors. The new library made front-end development much simpler and greatly improved cross-browser compatibility of complex sites, imposing itself as the standard JavaScript framework.

The Present

JavaScript is now more mature, and offers many of the features previously only offered by jQuery. Browsers are also more consistent in how they implement JavaScript, leading to less compatibility issues. Lastly, CSS is also much improved and more consistent across browsers. It can do many things that used to require scripting, such as complex animations.

The Future

The rise of front-end frameworks that use plain vanilla JavaScript such as React, Vue.js, and Angular.js means jQuery is losing market share. It may make code simpler, but it’s not required like it used to be. A web page using React, jQuery, and Bootstrap may need all of these scripts:

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js " integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj " crossorigin="anonymous "></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js " integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN " crossorigin="anonymous "></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js " integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s " crossorigin="anonymous "></script>

Any added page loading time can lead to lost sales or frustrated customers², so the trend is to reduce that number. This is one reason why React switched to vanilla JavaScript, and why Bootstrap is doing the same³ starting with version 5 (in beta as of this writing). Nevertheless, in 2020 jQuery is still used by over 75% of top sites⁴, meaning that developers should still be familiar with it to maintain existing codebase.

References:

• ¹https://jquery.org/history/
• ²https://www.forbes.com/sites/steveolenski/2016/11/10/why-brands-are-fighting-over-milliseconds/
• ³https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/
• ⁴https://w3techs.com/technologies/overview/javascript_library

---