JavaScript・jQuery よく使う記述の比較チートシート

JavaScriptの書き方とjQueryの書き方が分からなくなりがちで、毎回ググってしまうので、よく使う気がするものをまとめてみました。思いついた分記載しましたが、なんせ普段バックエンドを触っているので、全然足りてないだろうなとは思います。なので随時更新予定です。

jQueryが使える案件ではjQueryを使用したほうが記述量が減るため見やすくていいと思いますが、パフォーマンス面では純粋なJavaScriptの方がバックグラウンドで動く処理がない分速いようなので、使い分ける余裕を持ちたいなぁと思いました。

#jQuery

.js

// 要素取得
$('#id') // id指定
$('.class') // class指定
$('input[name="値"]') // タグ・属性指定

// 部分一致 指定
$('[id^="id"]') // id指定 前方一致
$('[id$="id"]') // id指定 後方一致
$('[id*="id"]') // id指定 部分一致

// 変更（「'new'」部分を記述しなければ値取得）
$('#id').val('new'); // value値
$('#id').text('new'); // 指定要素が内包するテキスト
$('#id').html('<p>new</p>'); // HTML
$('#id').css('color', 'red'); // CSS (例：colorの場合)
$('#id').data('hoge-hoge', 'new'); // data属性 (例：data-hoge-hoge="")

// class付与
$('#id').addclass('class'); // class

// ボタンの有効無効 切り替え
$('#id').prop('disabled', false); // 有効にする
$('#id').prop('disabled', true); // 無効にする

// チェックボックス判定
if ( $('#id').prop('checked') ) {
  // チェックボックスがONのときの処理
}

.js

// イベント
$('#id').on('click', function() { // クリック
$('#id').on('change', function() { // 変更されたら
$('#id').on('input', function() { // 入力をリアルタイムに

// 動的に増える要素の場合は以下
$(document).on('input', '#id', function() {

#JavaScript

.js

// 要素取得 querySelector()を使うとjQueryのようにCSSのセレクタで指定可能
// document.getElementById('id'); // id指定
document.querySelector('#id');
// document.getElementsByClassName('class'); // class指定
document.querySelector('.class'); // querySelector()はこのセレクターで見つかった要素のうち 最初のものだけ 取得
document.querySelectorAll('.class'); // querySelectorAll()で 全ての要素 を取得可能（forEach()が使える形で取得出来る）
// document.getElementsByName('値'); // name属性の値指定
document.querySelector('input[name="値"]');

// 変更
document.getElementById('id').value = 'new'; // value値
document.getElementById('id').textContent = 'new'; // 指定要素が内包するテキスト
document.getElementById('id').innerHTML= 'new'; // HTML
document.getElementById('id').style.color = 'red'; // CSS (例：colorの場合)
　// CSS のプロパティがハイフンで区切られている場合は、ハイフンを除去して次の文字を大文字にして指定する
　document.getElementById('id').style.backgroundColor = 'red'; //  (例：background-colorの場合)
document.getElementById('id').dataset.hoge = 'new'; // data属性 (例：data-hoge="")
　// data属性にハイフンを入れている場合は、ハイフンを除去して次の文字を大文字にして指定する
　document.getElementById('id').dataset.hogeHoge = 'new'; // data属性 (例：data-hoge-hoge="")

// class付与
document.getElementById('id').classList.add('class');
// class削除
document.getElementById('id').classList.remove('class');
// 指定したclassが付いていれば外す、付いていなければ付与する
document.getElementById('id').classList.toggle('class');

.js

// イベントは要素に属性を追加する
 ↓ HTML
<input type="button" value="" onclick="eventHandler()"> // クリック（onclick）
<select onchange="eventHandler()"> // 変更されたら（onchange）
<input type="text" oninput="eventHandler()"> // 入力をリアルタイムに（oninput）
 ↓ js
function eventHandler(){
  // 発火時の処理
}

// ボタンの有効無効 切り替え
document.getElementById('id').removeAttribute('disabled'); // 有効にする
document.getElementById('id').setAttribute('disabled', true); // 無効にする

// チェックボックス判定
if (document.getElementById('id').checked) {
  // チェックボックスがONのときの処理
}

#最後に
こうして比べてみるとjQueryスマートだなぁと感動します。素敵。
もっと知りたいなぁと思います。（でも使わないからすぐ忘れてしまう←）

#追記
@il9437 様よりコメントをいただき、
JavaScriptでid指定・class指定 等で要素取得する際に、
querySelector()、querySelectorAll()を使用することができると知りましたので更新いたしました。
誠にありがとうございました。