DEV Community

Munieru
Munieru

Posted on

I Need jQuery

#jquery #javascript

It has been a long time since you said "You Don't Need jQuery", but it's still useful for doing DOM operation in user script etc.1

Get elements

In native, element getter methods has too many kinds and has too long name.
In jQuery, $() is all.

Get element by selector

Native 

const viewport = document.querySelector('meta[name=viewport]');
Enter fullscreen mode Exit fullscreen mode

jQuery 

const $viewport = $('meta[name=viewport]');
Enter fullscreen mode Exit fullscreen mode

Get elements by selector

Native 

const externalLinks = document.querySelectorAll('a[target=_blank]');
Enter fullscreen mode Exit fullscreen mode

jQuery 

const $externalLinks = $('a[target=_blank]');
Enter fullscreen mode Exit fullscreen mode

Get elements by class

Native 

const articles = document.getElementsByClassName('article');
Enter fullscreen mode Exit fullscreen mode

jQuery 

const $articles = $('.article');
Enter fullscreen mode Exit fullscreen mode

Get element by id

Native 

const main = document.getElementById('main');
Enter fullscreen mode Exit fullscreen mode

jQuery 

const $main = $('#main');
Enter fullscreen mode Exit fullscreen mode

Get elements by name

Native 

const buttons = document.getElementsByName('button');
Enter fullscreen mode Exit fullscreen mode

jQuery 

const $buttons = $('[name=button]');
Enter fullscreen mode Exit fullscreen mode

Get elements by tag name

Native 

const links = document.getElementsByTagName('a');
Enter fullscreen mode Exit fullscreen mode

jQuery 

const $links = $('a');
Enter fullscreen mode Exit fullscreen mode

Set styles

In native, You can't set multiple styles to element at once.
In jQuery, jQuery.css() can that.

Native 

element.style['background-color'] = '#000000';
element.style['color'] = '#ffffff';
Enter fullscreen mode Exit fullscreen mode

jQuery 

$element.css({
  'background-color': '#000000',
  'color': '#ffffff'
});
Enter fullscreen mode Exit fullscreen mode

Create element from HTML string

In native, You need to cast long spell to create element from HTML string.
In jQuery, $() can that.

Native 

const foo = document.createRange().createContextualFragment(`<div id="foo">Foo</div>`);
Enter fullscreen mode Exit fullscreen mode

jQuery 

const $foo = $(`<div id="foo">Foo</div>`);
Enter fullscreen mode Exit fullscreen mode

Set display state

In native, You need to rewrite value of display property to change display state of element.
In jQuery, there are several intuitive methods.

Show element

Native 

element.style.display = 'block';  //or 'inline', 'inline-block', 'inline-table'...
Enter fullscreen mode Exit fullscreen mode

jQuery 

$element.show();
Enter fullscreen mode Exit fullscreen mode

Hide element

Native 

element.style.display = 'none';
Enter fullscreen mode Exit fullscreen mode

jQuery 

$element.hide();
Enter fullscreen mode Exit fullscreen mode

Toggle display

Native 

const elementIsShowing = element.ownerDocument.defaultView.getComputedStyle(element, null).display !== 'none';
element.style.display = elementIsShowing ? 'none' : 'block';  //or 'inline', 'inline-block', 'inline-table'...
Enter fullscreen mode Exit fullscreen mode

jQuery 

$element.toggle();
Enter fullscreen mode Exit fullscreen mode

Other Language

  1. In my own application, I will use Vue.js etc. ↩

Latest comments (36)

Collapse
 
bigbott profile image
Yuriy Novikov •

Another reason why we need jQuery is that every (almost) method returns jQuery object allowing method chaining.
Like this:
$('div').find('p').parent().click(function(){..});
The above code is simple, concise, intuitively readable.
Simple code is the base for complex systems.
Now, go rewrite it in pure JavaScript and feel the difference.

Collapse
 
nayemmajhar profile image
Nayem Majhar • • Edited

Here is a list, jQuery to JS plainjs.com/javascript/

Collapse
 
nlound profile image
Nicolás Lound •

So. If you are just lazy you need to use jQuery.

Collapse
 
4rontender profile image
Rinat Valiullov • • Edited

Some notes:

In native JS you can add several css styles to element:

div.style.cssText="color: red !important; \
    background-color: yellow; \
    width: 100px; \
    text-align: center; \
    blabla: 5; \
  ";

But you have some restriction: style.cssText overrides previous properties style

Collapse
 
isularifin profile image
isul •

Jquery still rocks even in 2018

Collapse
 
mateus_vahl profile image
Mateus Vahl •

$ = q => [... document.querySelectorAll(q)]

Collapse
 
facundocorradini profile image
Facundo Corradini •

Well, I think jquery Is still a valid option when you just want to make a simple website, which makes for 99% of the websites out there. There's no need to go react or vue if you're not really gonna be building an app-like kind of thing.

JQuery gets too much undeserved hate lately, because some people that got a sort of addiction to it and can't code 3 lines of JavaScript without it.

Sure, it was much more relevant in the dark ages of CSS 2 and crappy js, but even today, it's a valid tool for some works.

The key is to know when and why use each tool. (Which btw, the post makes an awful job at)
If all you got is a hammer, all tasks will look like nails.
Sometimes vanilla js will do, sometimes you need to go with a modern framework like vue or react, and sometimes the good ol' jquery will work just fine. Heck, nowadays most of what we used jquery for back in the day can now be achieved with CSS 3 and the simplest event listeners

I might not use it anymore , but I refuse to speak badly of a tool that provided us with such a great experience in the past. Which also means we might have to maintain legacy jquery code for a long, long time.

Collapse
 
ericschillerdev profile image
Unfrozen Caveman Dev •

The controversy in the comments makes me laugh anytime someone thinks jQuery is dead. Of course there's specialized stuff that makes some of these things easier in some instances, and as JS evolves, it adds some of this, but it's not dead, and doesn't need to be.

Thanks for keeping this alive, because sometimes you don't need a whole framework to to the little things, and sometimes there's so much specialization that no one framework will cover it well.

Anyone who gets cranky about a tech. that other people are using is either posturing or doesn't know the whole story about an individual project. There's a lot of legacy stuff out there, including browsers that sometimes have to be targeted -- better than it used to be, but still an issue.

Yes, jQuery is getting slowly replaced, but there's no reason to stop showing people how to do the basics until they can pop a framework (sometimes you don't know the best one to use in a given instance) in or upgrade their legacy stuff. Sometimes you just need to know what the previous people did so you CAN replace it with newer ES versions or framework code. Sometimes you need to get it past an entrenched IT team that has whitelisted jQuery libs but not necessarily approve of the latest and greatest yet.

For those laughing at the last bit, or refusing that kind of work, I'm happy to collect your paycheck once I'm done with my stints doing data integration work that you're also refusing.

Collapse
 
remejuan profile image
Reme Le Hane •

This is just terrifying on soo soo many levels. Next we going to have developers saying they need bootstrap to colour buttons

Collapse
 
betoflakes profile image
JR Saucedo •

zamjs.com

No more long sentences from DOMapi

View full discussion (36 comments)