Modern Javascript standards have incorporated a lot of things that have started their life in jQuery. What advantages does jQuery still have?
Looking at stuff like http://youmightnotneedjquery.com/ it's easy to see why there are lots of cases where jQuery just isn't needed anymore. But 10% of them still look very verbose without jQuery and when I'm working on a simple website the convenience of jQuery is worth it to me so I continue to use it where it helps.
But when you need to do more than that, you'll realize jQuery is still useful (assuming you don't use a framework or whatever). Either you will use something like jQuery or you'll reinvent by writing the methods yourself.
IMO it's still relevant, despite the hype of other frameworks.
Such as?
In general, jQuery is an amazing wrapper around native JS with a saner API and countless hours of different browser quirk workarounds to make sure that what you try to do works in all modern browsers and IE.
In case you want to play with that - https://codepen.io/onion2k/pen/NQrEKq
The jQuery equivalent for this is $('.foo').addClass('bar');
• Array.from is comparatively recent to the web platform, and cuts out IE support.
• Learn when to use Array.prototype.forEach, and when to use Array.prototype.map: use forEach when you aren’t deliberately constructing a new array but are just wanting to call a function on each value, and map when you are applying a function to each value and care about the result. Otherwise you’re creating a new array unnecessarily.
• You can (and should) avoid Array.from when you just want to call an array method on an array-like object (e.g. NodeList, HTMLCollection, Arguments): instead, call the method directly on the instance; it’s OK, all the Array.prototype methods are deliberately designed to work on array-like objects, not just arrays. That is, instead of `Array.from(x).forEach(y)`, use `Array.prototype.forEach.call(x, y)`. Otherwise you’re creating a new array unnecessarily.
• A slight word of caution about classList: IE and very old browsers don’t implement it on SVG elements. Just take that into account if you support IE at all.
So then, you might end up with this:
Array.prototype.forEach.call(document.querySelectorAll('.foo'), (fooEl) => {
fooEl.classList.toggle('bar');
});
const forEach = Function.prototype.call.bind(Array.prototype.forEach);
forEach(document.querySelectorAll('.foo'), (fooEl) => {
fooEl.classList.toggle('bar');
});
document.querySelectorAll('.foo').forEach((fooEl) => {
fooEl.classList.toggle('bar');
});Ajax calls are one example. JQuery ajax works everywhere, while fetch() will never work in IE without polyfils.
Not to mention all the other ES6 features IE refuses to support. Not every project wants or needs a webpack/ babel build process.