I Need jQuery #JavaScript

『You Don't Need jQuery』と言われて久しいですが、なんだかんだでユーザースクリプトなどでDOM操作を行なうには便利です。¹

要素の取得

ネイティブの要素取得メソッドは、種類も文字数も多すぎます。
jQueryでは、$()がすべてです。

セレクタで取得（1つ）

ネイティブ

const viewport = document.querySelector('meta[name=viewport]');

jQuery

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

セレクタで取得（複数）

ネイティブ

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

jQuery

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

classで取得

ネイティブ

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

jQuery

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

idで取得

ネイティブ

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

jQuery

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

nameで取得

ネイティブ

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

jQuery

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

タグ名で取得

ネイティブ

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

jQuery

const $links = $('a');

複数のスタイルの設定

ネイティブでは、要素に対して複数のスタイルをまとめて設定することはできません。
jQueryなら、jQuery.css()で可能です。

ネイティブ

element.style['background-color'] = '#000000';
element.style['color'] = '#ffffff';

jQuery

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

HTML文字列からの要素の作成

ネイティブでは、HTML文字列から要素を作成するために長い呪文を唱える必要があります。
jQueryなら、$()で可能です。

ネイティブ

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

jQuery

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

表示状態の設定

ネイティブで要素の表示状態を切り替えるには、displayプロパティの値を書き換える必要があります。
jQueryには、いくつかの直感的なメソッドがあります。

表示

ネイティブ

element.style.display = 'block';  //or 'inline', 'inline-block', 'inline-table'...

jQuery

$element.show();

非表示

ネイティブ

element.style.display = 'none';

jQuery

$element.hide();

切り替え

ネイティブ

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

他言語版

English

自分のアプリケーションでは、Vue.jsなどを使います。 ↩