I Need jQuery

Munieru — Tue, 26 Dec 2017 13:00:05 +0000

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.¹

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]');

jQuery

const $viewport = $('meta[name=viewport]');

Get elements by selector

Native

const externalLinks = document.querySelectorAll('a[target=_blank]');

jQuery

const $externalLinks = $('a[target=_blank]');

Get elements by class

Native

const articles = document.getElementsByClassName('article');

jQuery

const $articles = $('.article');

Get element by id

Native

const main = document.getElementById('main');

jQuery

const $main = $('#main');

Get elements by name

Native

const buttons = document.getElementsByName('button');

jQuery

const $buttons = $('[name=button]');

Get elements by tag name

Native

const links = document.getElementsByTagName('a');

jQuery

const $links = $('a');

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';

jQuery

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

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>`);

jQuery

const $foo = $(`<div id="foo">Foo</div>`);

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'...

jQuery

$element.show();

Hide element

Native

element.style.display = 'none';

jQuery

$element.hide();

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'...

jQuery

$element.toggle();

Other Language

Japanese

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

Forem: Munieru

I Need jQuery

Get elements

Get element by selector

Native

jQuery

Get elements by selector

Native

jQuery

Get elements by class

Native

jQuery

Get element by id

Native

jQuery

Get elements by name

Native

jQuery

Get elements by tag name

Native

jQuery

Set styles

Native

jQuery

Create element from HTML string

Native

jQuery

Set display state

Show element

Native

jQuery

Hide element

Native

jQuery

Toggle display

Native

jQuery

Other Language