3 ms·

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

mschuetz 5y ago
This page gives a pretty good overview of why jQuery is still relevant: http://youmightnotneedjquery.com/ 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.
- lobstrosity420 5y ago
  >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.
  - mschuetz 5y ago
    > 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.
legitster 5y ago
For me, the code is easily 10x more readable than vanilla JS. And much shorter, so I can hand code everything quicker without typos.
BlameKaneda 5y ago
To use an example, I'd much rather do $(".elements").css("color", "red") versus var selector = document.getElementsByClassName('elements'); selector.style.color = 'red';
- lobstrosity420 5y ago
  You can do const $ = document.querySelector; $('.elements').style.color = 'red'; Which is only marginally more verbose.
  - yoz-y 5y ago
    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')
    - MarkLowenstein 5y ago
      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.
  - dspillett 5y ago
    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)
- HelloNurse 5y ago
  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.
yoz-y 5y ago
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.

mschuetz 5y ago

This page gives a pretty good overview of why jQuery is still relevant: http://youmightnotneedjquery.com/ 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.

lobstrosity420 5y ago
>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.
- mschuetz 5y ago
  > 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.

legitster 5y ago

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

BlameKaneda 5y ago

To use an example, I'd much rather do $(".elements").css("color", "red") versus var selector = document.getElementsByClassName('elements'); selector.style.color = 'red';

lobstrosity420 5y ago
You can do const $ = document.querySelector; $('.elements').style.color = 'red'; Which is only marginally more verbose.
- yoz-y 5y ago
  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')
  - MarkLowenstein 5y ago
    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.
- dspillett 5y ago
  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)
HelloNurse 5y ago
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.

yoz-y 5y ago

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.