脱jQuery

jQueryのwidthメソッド、heightメソッドをJavaScriptだけで実装する方法をまとめました。 width, heightの取得 jQuery const width = $('#hoge').width(); const height = $('#hoge').height(); JavaScript // borderとscrollbarの高さをめない場合 const widt...

概要 【脱jQuery】JavaScriptだけでイベント処理を行うでは、既に存在する要素のイベントハンドラを定義したが、jQueryのonメソッド（古いバージョンではliveメソッド）は要素が後から追加された場合でもイベントハンドラが実行される。 これをJavaScriptだけで実現させる場合、以下のようにdocumentオブジェクトに対してaddEventListenerでイベントハンドラを登...

jQueryのoffsetメソッドをJavaScriptだけで実装する方法をまとめました。 top, leftの取得 jQuery const left = $('#hoge').offset().left; const top = $('#hoge').offset().top; JavaScript const rect = document.getElementById('hoge').ge...

ページ読み込み完了時に処理を実行する jQuery $(document).ready(eventHandler); // または $(document).ready(() => { // 処理 ); JavaScript document.addEventListener('DOMContentLoaded', eventHandler); // または document.addEventLis...

概要 脱jQueryのためのメモ。 Fetch APIを使うとXMLHttpRequestよりも簡単に処理を記述することができる。ただし、IEは非対応であるため、polyfillを使ってトランスパイルする必要がある。polyfillにはnpmのwhatwg-fetchパッケージを使う。 jQuery $('#hoge').load(url, completeCallback); JavaScrip...

脱jQueryのためのメモ。 テキスト、HTMLの取得・設定 取得$el.text();⇒el.textContent;$el.html();⇒el.innerHTML;設定$el.text('xxx');⇒el.textContent = 'xxx';$el.html('xxx');⇒el.innerHTML = 'xxx'; 要素削除 $el.remove();⇒el.parentNode.r...

脱jQueryのためのメモ。 要素を取得するためのメソッド ID指定の場合はdocument.getElementById、それ以外はdocument.querySelectorAll（1要素だけ取得する場合はdocument.querySelector）を使うdocument.getElementsByClassNameは使わない（戻り値であるHTMLCollectionはブラウザによってはit...