5
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

jQueryAdvent Calendar 2017

Day 24

I Need jQuery

Last updated at Posted at 2017-12-26

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

他言語版

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

5
9
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?