jQuery in 2021. What does it look like.
Is it still relevant, if so- for how long?
I have a confession to make. I was at one point in my career heavily dependant on…jQuery. Even when selectors starting to become natively supported in browsers, I grabbed back to the thing I knew how to use and been using for years now. Am I proud of it? Well, to be honest. I really do not care. It helped me tremendously on projects that were heavily reliant on DOM modifications and AJAX calls. So it served a purpose and served it well. At some point, it got stigmatized a bit. Because why arent you using document.querySelectorAll?
But not using jQuery on projects anymore wasn’t a conscious decision. Javascript as a language evolved and working with view libraries and frameworks like Angular, React, Vue, and others made it obsolete for me. But it got me thinking, what did I leave all those years ago. And what does it look like now?
I’m not really here to explain what jQuery is. I doubt you’d be reading this if you didn’t know. Let’s just say that in a time where browser incompatibility where a bigger thing than it is now, jQuery was a live saver. Taking care of browser inconsistencies (DOM manipulation, Events, and AJAX) so you could focus on getting your job done.
Surprising statistic perhaps (Or not), 88 percent of the top 10k websites still use jQuery to this day. In a time where there is a new flavor of a view library or framework every month. Why? Because it’s pretty damn stable. It has been around forever and is rock solid. It also still does the things that we love it for so incredibly well and concisely.
A perfect example is the one above. The jQuery way is short, concise, and in one line without creating any variables.
The Vanilla Javascript way is a bit more expansive. It’s not bad, but this is why jQuery is still loved today. Plus- if you really need to go back to IE9 (for god's sake) then you can’t go wrong.
So, what’s new in the last- say 5 years? At the time of this writing, we are at jQuery 3.6.0 (March 2021 release) and jQuery has for the most part only been making bugfixes. The core library is as stable and feature-complete as ever.
And we have to dig deep to find new features. Here is a couple I found:
Array of Classes
It’s possible now to add an array of classes to an element (2018). Like so:
for...of loops can be used on jQuery collections
jQuery 3.0 supports the for...of loop introduced in ES2015. This means you can loop over iterable objects Array, Map, and Set. When using this loop, the value obtained is a DOM element of the jQuery collection, one at a time. Note that you will need to be using an environment that supports ES2015 or a transpiler such as Babel to use for...of. Here is an example:
Custom CSS Properties
Custom properties are fully supported (since 2017)
Class manipulation methods now support SVG
jQuery 3.6 still doesn’t fully support SVG, but the jQuery methods that manipulate CSS class names, namely.addClass() and .hasClass(), now can be used to target SVG’s as well. This means you can modify or find classes with jQuery in SVG’s, then style the classes with your CSS.
Escaping strings that have a special meaning
The jQuery.escapeSelector() method allows you to escape strings or characters that mean something else in CSS in order to be able to use it in a jQuery selector.
For example, if an element on the page has an id of “abc.def” it cannot be selected with $( "#abc.def" ) because the selector is parsed as “an element with id ‘abc’ that also has a class ‘def’.
However, it can be selected with:
So these were are a couple of additions worth mentioning. As I said, most of the work in jQuery revolves around stability and compatibility. And I think jQuery’s laser focus on not padding it with unnecessary new features is a good thing. So it does pay off getting acquainted with the way jQuery does things. As you can be damn sure to run into it sooner or later.
