どのように私はjQueryを使用して停止し、API

私は最近、記事の75 %のような何かがまだjQueryを使用する記事を読みました.私はこのstatがどれほど正確かを知りません、しかし、それが私を驚かせました、誰かがそれがそれであったと思うというより少ない.
今、私は誰もがどのように反応を使用する必要があります方法についてのランニングを開始するつもりはない、Vue、$ Thisstra MonthssHelthornのフレームワーク-私はもっと頻繁にバニラJavaScriptの人です-しかし、私はそれがjQueryが作成された理由を認識することが重要だと思うし、なぜそれはそれほど関連していない.
jQueryは荒っぽい昔から始まっていました.標準が緩んでいるとき、競争は疑わしいです、そして、互換性は低くなりました.また、DOMや他のブラウザAPIは、はるかに開発されていなかった- JavaScript自体を言及する.
簡単な要素のコレクションを選択して、働くために、それは我々に単純な$(インターフェース)をもたらしました.クロスブラウザの互換性の問題を抽象化.それは一般的なパターンをカプセル化し、そのコードを繰り返すことを私たちに教えてくれます.

バニラ
そのためには、いくつかの一般的なjQueryのスニペットやパターン、プレーンバニラJSで実装する方法があります.jQueryを使い続けるなら、それはあなた次第です-それはまだ値を持ちます、レガシープロジェクトは一貫性に値します、そして、私はあなたのためにあなたのツールを決めるためにここにいません.

選択
明らかに、最も一般的な行為は、要素を選択することです.

    var buttons = $("button.myclass")

我々が現在持っているDOMでquerySelector and querySelectorAll . 最初のマッチを選択するための最初の、すべてのマッチのための後者.これはドキュメント、または任意の要素で呼び出すことができます.

    let buttons = document.querySelectorAll('button.myclass')

これはNodeList , これは配列のようです.重要なのは、配列のようにそれを添字することができますforEach .

イベントリスナー
イベントリスナーを要素の選択に付けるには、JQueryで次のようにします.

    buttons.on('click', function (ev) { alert('You clicked it!'); })

バニラJSでは、これはもう少し詳細ですaddEventListener :

    buttons.forEach(
      el => el.addEventListener('click', ev => alert('You clicked it!'))
    )

さらに、JQueryでは、“デリゲート”ハンドラーを追加することができます.これは、要素にバインドし、パターンに一致する子孫からイベントをキャッチします.

    $('div.toolbar').on('click', '.hide', function (ev) { doHideToolbar(ev.target); });

バニラJSにとって、これは再び少しの仕事を必要とします、しかし、それが必要としたよりはるかに少ない:

    document.querySelectorAll('div.toolbar').forEach(el => {
      el.addEventListener('click', ev => {
        if (!ev.target.matches('.hide')) return;
        doHideToolbar(ev.target);
      })
    })

そこでここではイベントリスナーをそれぞれに加えますdev.toolbar 要素をクリックしてイベントをクリックしてmatches メソッド.

木に登る
しばしば、あなたは特定のノードにDOMをバックアップしたいでしょう.

    var form = $(ev.target).closest('form');

それが起こると、これはネイティブのJSでより簡単です:

    let form = ev.target.closest('form');

クラスの操作
別の一般的なアクションは、要素のクラスを扱うことです追加または削除、トグルまたはテスト.

    var button = $('button[type=submit]').first();

    button.addClass('active');
    button.removeClass('active');
    button.toggleClass('active');

    if button.hasClass('active') {

現代のDOMでは、要素はclassList 属性は、我々にさらに多くの力を与えます:

    let button = document.querySelector('button[type=submit]');

    button.classList.add('active');
    button.classList.remove('active');
    button.classList.toggle('active');

    if button.classList.contains('active') {

ボーナス

    bonus.classList.replace('old', 'new');

The classList , はDOMTokenList , また、多くの配列のようなインターフェースをサポートしますforEach() , and length .

属性とデータ
暗い昔に、DOM要素の上で属性を操作することは、互換性がないメソッドとbyzantine規制の地雷原でした.それで、もちろん、jQueryはそれを抽象化しました.
しかしながら、'属性'と'プロパティ'の間のjQueryで、すなわち、DOM要素の属性とHTML文書のプロパティの間に明確な区別があることに注意してください.

    var inp = $('input[type=checkbox]');

    inp.prop('value')
    inp.prop('value', 'six');

再び、現代のドームは提供しますattributes , としてNamedNodeMap : 名前の順序のない、ライブマップAttr インスタンス.

    let inp = document.querySelector('input[type=checkbox]')

    inp.attributes.value;
    // alternatively
    inp.attributes['value'];

    inp.attributes.value = 'six';

さらに、jQueryはdata() 操作方法data-* 要素の属性.そして、もう一度、現代のDOMは、我々を連れてきますElement.dataset , はDOMStringMap .

    $('[data-thing]').data('thing')  // yields the value of data-thing
    $('[data-thing]').data('thing', 'wibble')  // sets the value

そして、バニラのために:

    let el = document.querySelector('[data-thing]')

    el.dataset.thing
    el.dataset['thing']

    el.dataset.thing = 'wibble';
    el.dataset['thing'] = 'wibble';

最後に
私がこの記事をレビューするよう頼んだ誰かによって示される大きい資源は、そうですhttp://youmightnotneedjquery.com/ これはjQueryの例とIE 8 +/9 +/10 +の置換方法を含んでいます.

もっと?
私はダイビングをするつもりだった.Ajaxと家族、しかし、私はこのポストが十分であると感じます、そして、それは等しく長くあるので、私はもう一つのポストのためにそれを保存します.
あなたがより多くのあなたが見たいと思うならば、ちょっとコメントしてください、そして、私は私がそうすることができるところを手伝います.