**『You Don't Need jQuery』**と言われて久しいですが、なんだかんだでユーザースクリプトなどでDOM操作を行なうには便利です。1
要素の取得
ネイティブの要素取得メソッドは、種類も文字数も多すぎます。
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();
他言語版
-
自分のアプリケーションでは、Vue.jsなどを使います。 ↩