Is jQuery Unavoidable?

I’ve seen jQuery requested a lot in job descriptions. I’ve also seen it when I add the scripts to use bootstrap in a project. And, I’ve also seen a bit of the syntax of jQuery.

jQuery syntax:

$ (document).ready(function( ){
 $(“#div2”).find(“*”).css({“color”:”red”, “border”:“5px solid red”});
});

Why does it keep popping up? What does it do? When is it best used? Are there any disadvantages? Can I get by without ever using it? How can I learn more if I do ever need to use it?

The tagline on jQuery’s website is “write less, do more”. How quaint.

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. — jQuery

A Brief Look

They show a couple examples of DOM Traversal and Manipulation, Event Handling and Ajax. They seem to mostly make sense to me.

Their example of Event Handling:

var hiddenBox = $( “#banner-message” );
$( “#button-container button” ).on( “click”, function( event ) {
 hiddenBox.show();
});

More information for context: Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked.

I’m going to attempt to write a Vanilla JavaScript version of the above, just to make sure I’m understanding everything correctly.

function hiddenBox(“#banner-message”){
 (“#button-container button”).addEventListener(‘click’, (e) => e.preventDefault(show(“#banner-message”))
}

Hmm… 🤔 I’m still not 100% my ‘translation’ is accurate but it seems to be the basic gist of it all. I’m not completely sold on this jQuery. It did not seem significantly simpler or easier to use than regular JavaScript. Then again, there’s probably more going on in the jQuery version that I still don’t understand.

Learn More

Fortunately, while poking around in their API documentation they mention a jQuery Learning Center for newbies, like me. Here, they’ll go over the basics, common problems and how-tos in 10 chapters. Since it is a JavaScript library, they do recommend you have a strong grasp of JavaScript before tackling jQuery.

When To Use jQuery

While I was going through the beginning segment of “How jQuery Works” in the jQuery Learning Center, I didn’t find too much of interest as it went through another example of a ‘click’ event function and adding/removing an HTML classname.

Then, there’s a section on special effects and my interest was piqued. I haven’t explored too much on special effects with Vanilla JavaScript, yet. The jQuery library comes with some methods/functions (I’m not sure what they’re technically called).

Effects | jQuery API Documentation

Their example makes a link slowly disappear when clicked. Don’t know why I’d want to do that. Maybe in a ‘game’ sort of situation?

( “a” ).click(function( event ) {
 
 event.preventDefault();
 
 $( this ).hide( “slow” );
 
});

Note: (“a”) is referring to <a href=“http://jquery.com/“>jQuery</a>
It seems jQuery allows you to act directly on the element similar to CSS selectors.

Another note: “.hide” is the function/method with a parameter set to “slow”.

Again, I don’t know how easy (or mildly challenging) enacting effects like this is in Vanilla JavaScript. I have heard of doing some animations with CSS, though. Not sure how I’d make a link disappear. Maybe with the ‘display’ property? In any case, it’d probably take many more lines of code than just using .hide( ) in jQuery. Maybe.

To jQuery or Not jQuery

Along my programming journey I’ve heard murmurs that we should begin moving away from jQuery. Yet, I keep seeing how popular it is with some companies still to this day in their job postings. If the consensus was that we can drop the jQuery I probably wouldn’t even give it a second thought. Yet, here I am writing this blog trying to figure it out.

Flaviocopes explains how jQuery became popular in the early-mid 2000s to power slideshows of images and widgets. Back then, browsers weren’t standardized and jQuery was user-friendly and helped overcome this browser issue.

Another point I’m gathering from this article is that jQuery was very useful but much of its functionality has been standardized into current browsers which is why we can manipulate the virtual DOM. They give way better examples of comparing the jQuery way versus the DOM way of doing things than my attempt to translate jQuery into Vanilla JavaScript.

jQuery way vs DOM way — change content of an element; ex from flaviocopes.com

They also confirmed that jQuery animations can also be done with CSS Transitions or CSS Animations.

In their opinion, jQuery “should not be used anymore in new projects that only target modern browsers.”

Situations where jQuery should (or can) be used:

• if the project relies on it
• some libraries depend on jQuery (like Bootstrap; but Bootstrap 5 is designed to be used without jQuery *gasp* )
• some templates and plugins require it
• if, for some reason, still need to support older browsers
• is useful for animations if you lack CSS skills

There are so many articles and forums debating the merits of JavaScript vs jQuery. Here’s a recent one by Real Tough Candy published July 2021 with a title that gets straight to the point, “Is jQuery dead in 2021?”. They did a poll with 155 developers and came up with a couple observations.

One interesting pattern they noticed was the decline of jQuery usage when developers began using React (which is pretty popular and modern).

Another observation was that most of the developers polled don’t use jQuery for new projects. Though sometimes, if the original version of an app used jQuery, it might be easier to rebuild a new app with some jQuery.

One developer learned how to do the same things in Vanilla JavaScript while also learning jQuery. Another amplified that notion by saying that modern JavaScript can do everything jQuery can.

Conclusion

I think I’ve read enough to draw my own conclusions. Since I’ve already learned a bit of React.js and may focus more on modern apps, I can probably not bother with jQuery. Especially now that Bootstrap no longer relies on it.

Maybe I should just focus on improving with CSS for animations and the good ol’ Vanilla JavaScript.

Since there still are quite a few companies and apps using jQuery, I think I’ll just learn the syntax and methods on the fly if it comes down to it. Otherwise, I’m just going to move forward.