┌───────────────┬──────────────────────┐
│            jQuery            │                 VanillaJS                  │
├───────────────┼──────────────────────┤
│$('#ID属性')                  │document.getElementById('ID属性')           │
│                              ├──────────────────────┤
│                              │document.querySelector('#ID属性')           │
├───────────────┼──────────────────────┤
│$('.クラス')                  │document.getElementsByClassName('クラス')   │
│                              ├──────────────────────┤
│                              │document.querySelectorAll('.クラス')        │
├───────────────┼──────────────────────┤
│$('タグ')                     │document.getElementsByTagName('タグ')       │
│                              ├──────────────────────┤
│                              │document.querySelectorAll('タグ')           │
├───────────────┼──────────────────────┤
│.parent()                     │.parentNode                                 │
├───────────────┼──────────────────────┤
│.closest(条件)                │.closest(条件)                              │
├───────────────┼──────────────────────┤
│.find(条件)                   │.querySelectorAll(条件)                     │
├───────────────┼──────────────────────┤
│.html()                       │.innerHTML                                  │
├───────────────┼──────────────────────┤
│.html(値)                     │.innerHTML = 値                             │
├───────────────┼──────────────────────┤
│.text()                       │.innerText                                  │
│                              ├──────────────────────┤
│                              │.textContent                                │
├───────────────┼──────────────────────┤
│.text(値)                     │.innerText = 値                             │
│                              ├──────────────────────┤
│                              │.textContent = 値                           │
├───────────────┼──────────────────────┤
│.val()                        │.value                                      │
├───────────────┼──────────────────────┤
│.val(値)                      │.value = 値                                 │
├───────────────┼──────────────────────┤
│.css('スタイル')              │.style.スタイル     ※スタイルはキャメル文字│
├───────────────┼──────────────────────┤
│.css('スタイル','値')         │.style.スタイル = '値'                      │
├───────────────┤                                            │
│.css({'スタイル','値'})       │                    ※スタイルはキャメル文字│
├───────────────┼──────────────────────┤
│.addClass('クラス')           │.classList.add('クラス')                    │
├───────────────┼──────────────────────┤
│.removeClass('クラス')        │.classList.remove('クラス')                 │
├───────────────┼──────────────────────┤
│.toggleClass('クラス')        │.classList.toggle('クラス')                 │
├───────────────┼──────────────────────┤
│.attr('属性')                 │.attr('属性')                               │
├───────────────┼──────────────────────┤
│.attr('属性', '値')           │.attr('属性', '値')                         │
├───────────────┼──────────────────────┤
│.each(function(index, value) {│.forEach(function(value, index) {           │
│});                           │});                                         │
├───────────────┼──────────────────────┤
│.on('click', function(event) {│.addEventListener('click', function(event) {│
│});                           │});                                         │
├─────────┬─────┴──────────────────────┤
│$(function() {    │window.addEventListener('DOMContentLoaded', (event) => {│
│});               │});                                                     │
└─────────┴────────────────────────────┘

┌──────────────────────────────────────┐
│Hashes = [                                                                  │
│    {year:2023, month:10, value: 1},                                        │
│    {year:2023, month:11, value: 2},                                        │
│    {year:2023, month:12, value: 3},                                        │
│    {year:2024, month: 1, value:10},                                        │
│    {year:2024, month: 2, value:20},                                        │
│    {year:2024, month: 3, value:30},                                        │
│];                                                                          │
└──────────────────────────────────────┘
上記のようにDBテーブルのような多次元連想配列があり
列「year」が「2024」の行の、列「value」の値を一次元配列に抽出したい場合
以下のように「.filter()」と「.map()」を組み合わせればよい
┌──────────────────────────────────────┐
│console.log(                                                                │
│    (Hashes.filter((o) => o['year'] == '2024')).map((o) => o['value'])      │
│);                                                                          │
│//→一次元配列「10.20.30」                                                  │
└──────────────────────────────────────┘
→「.filter()」はWHERE条件、「.map()」はSELECT文のようなものだ

配列中に特定の値があるか判定するPHP関数「in_array()」。
┌──────────────────────────────────────┐
│if (in_array(値, 配列)) {                                                   │
│    // 該当あり                                                             │
│}                                                                           │
└──────────────────────────────────────┘

これをJavaScriptで実現できるjQueryの機能が「$.inArray()」。
┌──────────────────────────────────────┐
│if ($.inArray(値, 配列) >= 0) {                                             │
│    // 該当あり                                                             │
│}                                                                           │
└──────────────────────────────────────┘

最近のJavaScriptでは、配列の「indexOf()」メソッドで実現できるようになった。
┌──────────────────────────────────────┐
│if (配列.indexOf(値) !== -1) {                                              │
│    // 該当あり                                                             │
│}                                                                           │
└──────────────────────────────────────┘

なお、ビット反転により-1を0に変換できるチルダ演算子「~」を用いると
以下のようにスマートに記述できる。
┌──────────────────────────────────────┐
│if (~配列.indexOf(値)) {                                                    │
│    // 該当あり                                                             │
│}                                                                           │
└──────────────────────────────────────┘

┌──────────────────────────────────────┐
│if (文字列 && !isNaN(new Date(文字列).getDate())) {                         │
│    ' 日付である                                                            │
│} else {                                                                    │
│    ' 日付でない                                                            │
│}                                                                           │
└──────────────────────────────────────┘

いろいろあるようだ。

GETパラメータを書き換える方法。
┌──────────────────────────────────────┐
│history.pushState(null, null, '?key1=val1&key2=val2');                      │
├──────────────────────────────────────┤
│history.pushState(null, null, location.pathname + '?key1=val1&key2=val2');  │
├──────────────────────────────────────┤
│history.pushState(null, null, '?' + new URLSearchParams({                   │
│    'key1'  :'val1',                                                        │
│    'key2'  :'val2',                                                        │
│}).toString());                                                             │
├──────────────────────────────────────┤
│history.pushState(null, null, location.pathname + '?' + new URLSearchParams({
│    'key1'  :'val1',                                                        │
│    'key2'  :'val2',                                                        │
│}).toString());                                                             │
├──────────────────────────────────────┤
│const url = new URL(location.href.replace(/\?.*$/, ''));                    │
│url.searchParams.set('key1', 'val1');  // .append()でもOK                   │
│url.searchParams.set('key2', 'val2');  // .append()でもOK                   │
│history.pushState(null, null, url);                                         │
└──────────────────────────────────────┘

GETパラメータをクリアする方法。
┌──────────────────────────────────────┐
│history.pushState(null, null, location.pathname);                           │
├──────────────────────────────────────┤
│history.pushState(null, null, location.href.replace(/\?.*$/, ''));          │
└──────────────────────────────────────┘

(jQueryを用いているが)「id="id"」の値が変わった場合に
表示中のURLに埋め込む方法。
┌──────────────────────────────────────┐
│$('#id').on('change', function() {                                          │
│    //----------------------------------------------------------------------│
│    //  (案1)リロードする場合                                               │
│    //----------------------------------------------------------------------│
│    if ($('#id').val() == '') {                                             │
│        location.href = location.href.replace(/\?.*$/, '');                 │
│    } else {                                                                │
│        location.href = location.href.replace(/\?.*$/, '')                  │
│                      + '?id=' + encodeURI($('#id').val());                 │
│    }                                                                       │
│    //----------------------------------------------------------------------│
│    //  (案2)URLだけ書き換える場合                                          │
│    //----------------------------------------------------------------------│
│    if ($('#id').val() == '') {                                             │
│        history.pushState(null, null, location.pathname);                   │
│    } else {                                                                │
│        history.pushState(null, null, `?id=${encodeURI($('#id').val())}`);  │
│    }                                                                       │
│    //----------------------------------------------------------------------│
│});                                                                         │
└──────────────────────────────────────┘
これで、値を変更した場合に、URLも変化するので
そのURLを用いることができる。

URLの「～?id=値」もしくは「～&id=値」を読み込む関数。
┌──────────────────────────────────────┐
│function GetGetParam() {                                                    │
│    const params = location.search.substring(1).split('&');                 │
│    for (let i = 0; params[i]; i++) {                                       │
│        let kv = params[i].split('=');                                      │
│        if (kv[0] == 'id') {                                                │
│            return decodeURI(kv[1]);                                        │
│        }                                                                   │
│    }                                                                       │
│    return null;                                                            │
│}                                                                           │
└──────────────────────────────────────┘
これを表示時(初期処理)にて読み込んで処理を行えばよい。(以下はjQueryの場合)
┌──────────────────────────────────────┐
│$(function() {                                                              │
│    const param = GetGetParam();                                            │
│    if (param) {                                                            │
│        // 処理(param);                                                     │
│    }                                                                       │
│});                                                                         │
└──────────────────────────────────────┘

console.log()系のメモ。

【出力方法の種類】
console.log(文字列);
console.info(文字列);
console.warn(文字列);   //→△
console.error(文字列);  //→×
console.table(配列);

【プレースメントの種類】
console.log('%s', 文字列);
console.log('%d', 数値);
console.log('%i', 数値);
console.log('%f', 小数);
console.log('%c', CSS);
console.log('%o', オブジェクト)
console.log('%O', オブジェクト)
console.log('%o', URL)
console.log('%O', URL)

┌──────────────────────────────────────┐
│(                                                                           │
│    (arg) => {                                                              │
│        switch (arg) {                                                      │
│            case  1: return 'a';                                            │
│            case  2: return 'b';                                            │
│            case  3: return 'c';                                            │
│            default: return 'z';                                            │
│        }                                                                   │
│    }                                                                       │
│)(1)                                                                        │
└──────────────────────────────────────┘

連想配列でクラスを代用するには以下の方法がある。
┌──────────────────────────────────────┐
│const オブジェクト = {                                                      │
│    メンバ変数  :値,                                                        │
│    メソッド    :function(引数) {                                           │
│                     return 引数 * this.メンバ変数;                         │
│                 },                                                         │
│    メソッド    :引数 => {                                                  │
│                     return 引数 * this.メンバ変数;                         │
│                 },                                                         │
│    メソッド(引数) {                                                        │
│        return 引数 * this.メンバ変数;                                      │
│    }                                                                       │
│};                                                                          │
└──────────────────────────────────────┘
ES2015からはクラスが導入された。
┌──────────────────────────────────────┐
│class クラス {                                                              │
│////メンバ変数 = 値;  ←これはNG                                            │
│    constructor(引数) {                                                     │
│        this.メンバ変数 = 引数;                                             │
│    }                                                                       │
│    メソッド() {                                                            │
│        return this.メンバ変数;                                             │
│    }                                                                       │
│}                                                                           │
├──────────────────────────────────────┤
│const インスタンス = new クラス(引数);                                      │
│インスタンス.メソッド();                                                    │
├──────────────────────────────────────┤
│class 継承クラス extends クラス {                                           │
│    constructor(引数) {                                                     │
│        super();                                                            │
│    }                                                                       │
│}                                                                           │
└──────────────────────────────────────┘