4 ms·
Sure, when you need to update 1 single thing once, you can use vanilla js. But when you need to do more than that, you'll realize jQuery is still useful (assum
by rofo1 7y ago
Sure, when you need to update 1 single thing once, you can use vanilla js.
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.
- staticvar 7y ago> But when you need to do more than that, you'll realize jQuery is still useful Such as?
- purerandomness 7y agoSee here: https://medium.com/@mattburgess/in-defence-of-jquery-4a8b20f4696b https://medium.com/@mattburgess/in-defence-of-jquery-4a8b20f... 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.
- onion2k 7y agoThere's really nothing you need jQuery for any more except supporting old jQuery components. You can do things like Array.from(document.querySelectorAll('.foo')).map((fooEl)=>{ fooEl.classList.toggle('bar'); }) in a browser (with no Babel-style transpile step) these days. In case you want to play with that - https://codepen.io/onion2k/pen/NQrEKq https://codepen.io/onion2k/pen/NQrEKq
- yrwwywtywsrty 7y agoAlthough I usually agree with the 'jQuery is overused' side of the crowd, I think your example is one of the times when I see that jQuery wins in ease and readability. The jQuery equivalent for this is $('.foo').addClass('bar');
- chrismorgan 7y agoI really dislike the way jQuery makes no distinction between mutations on one or many elements. I view the native APIs’ differentiation of the two, requring you to be explicit (`document.querySelector('.foo').classList.add('bar')` versus `document.querySelectorAll('.foo').forEach(foo => foo.classList.add('bar'))`) to be a feature.
- onion2k 7y agoMy version doesn't need a 30Kb library though.
- chrismorgan 7y agoSome notes: • 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'); }); Or if you hate the `Array.prototype.` and `.call` bits, const forEach = Function.prototype.call.bind(Array.prototype.forEach); forEach(document.querySelectorAll('.foo'), (fooEl) => { fooEl.classList.toggle('bar'); }); And if you’re happy to drop a little more older browser support including IE, you can just use NodeList.prototype.forEach, which incidentally is normally the same function object as Array.prototype.forEach: document.querySelectorAll('.foo').forEach((fooEl) => { fooEl.classList.toggle('bar'); });
- onion2k 7y agoI should have expected a reply like this. Those are all good points.