Hacker News Reader

Comment by lobstrosity420 | Hacker News Reader

Can you elaborate on what JQuery does for you that you can't do with modern JS features such as fetch and query selectors?

View on HN

This page gives a pretty good overview of why jQuery is still relevant: http://youmightnotneedjquery.com/

Requests have gotten better with "fetch", but unfortunately, the "modern" DOM API is quite bad in some parts, making lots of stuff unnecessarily verbose. On top of that, it's really odd that the DOM API is not compatible with for-of loops, which could have been a selling point.

>it's really odd that the DOM API is not compatible with for-of loops, which could have been a selling point.

I'm not sure what you mean by that? querySelectorAll returns an iterable. Also, your link is outdated. It doesn't include the fetch API which has enjoyed wide support for quite a while now.

> I'm not sure what you mean by that? querySelectorAll returns an iterable.

Apparently my knowledge is outdated. Last time I tried to switch from jQuery to vanilla JS, the results of document.getElementsByTagName and others were not iterable with for-of.

jQuery has the most consistent return values I've ever seen in an API. It somehow always works. Contrasted to that the fact that a NodeList is not an Array gets me every time.

To use an example, I'd much rather do

$(".elements").css("color", "red")

versus

var selector = document.getElementsByClassName('elements');

selector.style.color = 'red';

You can do

const $ = document.querySelector;

$('.elements').style.color = 'red';

Which is only marginally more verbose.

No you can't. $('.elements') in jQuery is more equivalent to querySelectorAll('.elements').

You can however do:

document.querySelectorAll('a').forEach(a => a.style.color = 'red')

This is the only post that I see so far that touches on the real innovation and unique value of jQuery: operating on groups. Everybody can go ahead and tell me that using a forEach every time is trivial, or that I can just insert some transpiler step in my build pipeline to take advantage of X language's convenient syntax, but the bottom line is that people use jQuery because it continues to be easier. Thank you for your insight and great design sense John Resig! Still not bested after 15 years.

Though your alias definition needs a little extra, or the function loses its context and colling it will just result ":

  const $ = document.querySelector.bind(document);

or slightly less efficient, wrap in a function:

  const $ = function(x) { return document.querySelector(x) };

or if you want to be concise and don't need to support legacy IE:

  const $ = (x) => document.querySelector(x);

(and as pointed out already, you need querySelectorAll() and a loop for what jQuery does by default, though your example will work for a single element)

The jQuery example is good, but the "vanilla" example is cleaner and simpler: the class name isn't decorated with a dot, the CSS property name is not quoted, $ might be hijacked or overloaded, it is not obvious (compared to a plain assignment) that css is a setter and what arguments it takes.

Sorry, that doesn't even work:

> document.getElementsByClassName('comment').style

> undefined

You'd need a for loop right there I believe.

For me, the code is easily 10x more readable than vanilla JS. And much shorter, so I can hand code everything quicker without typos.

Reply on news.ycombinator.com