jQueryチートシート

## 前提
jQuery v3.6
ES6

## セレクタ
```javascript
$("div"); // 要素の種類
$("$form1"); // id
$(".d-block"); // class
$("div.d-block"); // AND
$("div, span"); // OR
$("div > div"); // 直下
$("div .d-block"); // 先祖

$("[type]"); // 属性を持つ
$("[type='hidden']"); // 完全一致
$("[type!='hidden']"); // 不一致
$("[type^='hidden']"); // 前方一致
$("[type$='hidden']"); // 後方一致
$("[type*='hidden']"); // 部分一致
$("[type-='hidden']"); // 単語(スペースで区切った単位)一致
$("[type|='hidden']"); // ハイフンを付けた派生語(hidden-1, hidden-hidden)に一致
$("[type='hidden'][type='text']"); // AND
$("[type='hidden'], [type='text']"); // OR

$('li:first-of-type'); // (親要素の中で)1番最初のli
$('li:last-of-type'); // (親要素の中で)1番最後のli
$('li:nth-of-type(3)'); // (親要素の中で)3番目のli indexは1から
$('li:nth-of-type(odd)'); // (親要素の中で)奇数番目のli indexは1から
$('li:nth-of-type(3n+1)'); // (親要素の中で)3n+1番目のli indexは1から
$('li::nth-last-of-type(3)'); // (親要素の中で)後ろから3番目のli indexは1から

$('div:hidden'); // 隠れている要素(display: none;, height: 0px; width: 1px;, opacity: 0;, type=hidden)
$('div:visible'); // 表示されている要素

$('input:checked');
$('option').filter(':selected');
$('input:disabled');
$('input:enabled');
$('input:focus'); 
```

## イベント
```javascript
$('span').on('click', event => {
    console.log(event.type); // マウス click dbclick mousedown->mousemove->mouseup mouseover->mouseout mouseenter->mouseleave hover toggle
    console.log(event.type); // キー keydown->keypress->keyup focusin->focusout
    console.log(event.type); // フォーム focus->blur focusin->focusout change select submit
    console.log(event.type); // ブラウザ resize scroll error
    console.log(event.type); // ロード load unload ready
    console.log(event.witch); // 1
    event.preventDefault(); // フォームやリンクなどのデフォルトの動作をキャンセルする
    event.stopPropagation(); // 上位の要素へのイベント伝播を止める
    event.stopImmediatePropagation(); // 上位の要素と同じ要素への他のイベント伝播を止める
});
$(document).on('click', 'span', event => {
    //
});
$(document).on('click', 'span', { data: 'data' }, event => {
    //
});
$('span').off(); // 全てのイベントを削除
$('span').off('click'); // クリックイベントを削除
$(document).off('click', 'span'); // セレクタで絞り込んだ要素のクリックイベントを削除
$(document).off('click', 'span', Function); // セレクタで絞り込んだ要素の特定のクリックイベントを削除
```

## 非同期通信
```javascript
$.ajax({
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8', // "application/json; charset=utf-8"
    context: this,
    data: $('form').serialize(), // JSON.stringify({ test: "test" })
    dataType: 'json',　// xml or script or html
    headers: { 'Authorization': 'Bearer token' },
    timeout: 3000, // ミリ秒
    type: 'GET', // or POST
    url: 'http://localhost:8000/api/json',
}).then((data, status, xhr) => {
    console.log(data); // xhr.responseJSON, xhr.responseText,  xhr.responseXML
    console.log(status); // success, notmodified or nocontent
    console.log(xhr.status) // 200 or etc...
    console.log(xhr.getAllResponseHeaders()); // connection: close content-length: 18 date: Sun, 08 Aug 2021 05:34:21 GMT host: localhost:8000
    console.log(xhr.getResponseHeader('Host')); // localhost:8000
}).catch((xhr, status, error) => {
    console.log(status); // timeout, error, abort or parsererror
    console.log(error); // error内容
    console.log(xhr.status) // 404 or etc...
    console.log(xhr.responseText)
}).then(() => {
    console.log('always');
});
```

## DOM属性操作
```javascript
$('div').hasClass('text-primary');
$('div').toggleClass(['d-inline']);
$('div').removeClass(['text-primary', 'd-inline']).addClass(['text-secondary', 'd-block']);

$('div').html(); // 取得
$('div').html("<p>All new content. <em>You bet!</em></p>"); // 挿入

$('div').text(); // 取得
$('div').text("All new content. You bet!"); // 挿入(HTMLエンコードされる)

$('div').val(); // 取得
$('div').val("value"); // 挿入

$('input').attr('type'); // 取得
$('input').attr('data-id', 3); // 挿入
$('input').attr({ // まとめて挿入
    type: 'text',
    href: ''
});
$('input').removeattr('type');

$('input').prop('checked'); // true or false
$('input').prop('disable', true); // 挿入
$('input').prop({ // まとめて挿入 AND 削除
    checked: false,
    disable: false
});
$('input').removeProp('type');

// ※ data() は初期値こそHTMLのdata属性が使用されるが、その後はキャッシュしている値が使用され、HTMLのdata属性と連動しないため使用する場合は注意する
```

## 遅延オブジェクト

```javascript
const sleepDeferred = ms => {
    const d = new $.Deferred();
    const isFast = ms < 1000;
    setTimeout(() => {
        isFast ? d.resolve(ms) : d.reject(ms);
    }, ms)
    return d.promise()
}
sleepDeferred(2000)
    .then(ms => console.log(`${ms}ms fast!`), ms => console.log(`${ms}ms slow!`));
```
```javascript
const d1 = $.Deferred();
const d2 = $.Deferred();
const d3 = $.Deferred();

$.when( d1, d2, d3 ).done(function ( v1, v2, v3 ) {
    console.log( v1 ); // v1 is undefined
    console.log( v2 ); // v2 is "abc"
    console.log( v3 ); // v3 is an array [ 1, 2, 3, 4, 5 ]
});

d1.resolve();
d2.resolve( "abc" );
d3.resolve( 1, 2, 3, 4, 5 );
```

## アニメーション
```javascript
$(window).scrollTop($('div').offset().top);
$("html, body").animate({　scrollTop:　$('div').offset().top　});
```

## 操作
```javascript
var e = $('<div>').html('hello').val('val').attr('data-id', 'id').attr('trip', 'trip');
$('div').after(e); // divの後ろに追加する
$('div').append(e); // divの子要素の最後に追加する
$('div').before(e);　// divの前に追加する
$('div').prepend(e);　// divの子要素の最初に追加する

$('div').empty(); // divの子要素を全て削除する
$('div').remove(); // divそのものを削除する

$('div').wrap();
$('div').unwrap();

$('div').clone(); // div要素を複製する
```

## Traversing
```javascript
$('div').siblings('form'); // 同階層の該当する要素
$('div').next('form'); // 同階層の該当する次の要素だけ
$('div').nextAll('form'); // 同階層の該当する次の要素全て
$('div').nextUntil('span', 'form'); // 同階層のdivからspanまでの該当する要素全て
$('div').prev('form');; // 同階層の該当する前の要素だけ
$('div').prevAll('form'); // 同階層の該当する前の要素全て
$('div').prevUntil('span', 'form'); // 同階層のdivからspanまでの該当する要素全て
$('div').children('form'); // divの子要素でセレクタにマッチする要素
$('div').find('form'); // divの子孫要素でセレクタにマッチする要素
$('div').parent('form');// divの親要素でセレクタにマッチする要素
$('div').parents('form');// divの先祖要素でセレクタにマッチする要素
$('div').parentsUntil('span', 'form');// divのspanまでの先祖要素でセレクタにマッチする要素
$('div').closest('form'); // divの祖先要素でセレクタにマッチする直近の要素

$('div').not('.class'); // classクラスを除外する
$('div').is();
$('div').map();
$('div').find('.class'); // 子孫要素でセレクタにマッチする要素
$('div').even();
$('div').odd();
$('div').add('form'); // form要素を追加する
```

## ユーティリティ
```javascript

```

## その他
```javascript
$('div').index();
$('div').grep();
$('div').each();
$('div').map();
$('div').length;
$('div').toArray();
$.merge();
$.unique();
$.inArray();
$.now();
$.trim();
$.type();
```

## 参考
https://www.jquerystudy.info/index.html
https://iwb.jp/jquery-deferred-resolve-reject-promise-javascript-code/