ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

jQuery

脱jQuery~JavaScriptに支配されないための真の思考法~ beforeメソッド

jQueryのbeforeメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 // jQuery $('#hoge').before('<div>before</div>'); // JavaScript var _div = document.createElement('div'); _div.innerText = 'before'; var _hoge = document.querySelect…

脱jQuery~JavaScriptに支配されないための真の思考法~ removeメソッド

jQueryのremoveメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 // jQuery $('#hoge').remove(); // JavaScript var _hoge = document.querySelector('#hoge'); _hoge.parentNode.removeChild(_hoge);

脱jQuery~JavaScriptに支配されないための真の思考法~ emptyメソッド

jQueryのemptyメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 // jQuery $('#hoge').empty(); // JavaScript document.querySelector('#hoge').textContent = '';

Semantic UIのdropdownのvalueについて

Semantic UIのJSを使ってdropdownを作った時の話。 $('select.dropdown').dropdown({ }); 上で表示させたdropdownのvalueはどうすれば取得することができるのだろうか? 調査してみるとselectboxと同じ容量で取得することができました。 $('select').val()

脱jQuery~JavaScriptに支配されないための真の思考法~ removeClassメソッド

jQueryのremoveClassメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 まずは、removeClassメソッドを使って一つクラス名を設定する方法について。 // jQuery $('#hoge').removeClass('foo'); // JavaScript document.querySelector…

脱jQuery~JavaScriptに支配されないための真の思考法~ addClassメソッド

jQueryのaddClassメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 まずは、addClassメソッドを使って一つクラス名を設定する方法について。 // jQuery $('#hoge').addClass('foo'); // JavaScript document.querySelector('#hoge')…

脱jQuery~JavaScriptに支配されないための真の思考法~ attrメソッド

jQueryのattrメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 まずは、attrメソッドを使って一つ属性を設定する方法について。 // jQuery $('a').attr('href','https://yahoo.co.jp'); // JavaScript document.querySelector('a').…

脱jQuery~JavaScriptに支配されないための真の思考法~ appendメソッド

jQueryのappendメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 // jQuery $('#hoge').append($('<div></div>')); // JavaScript document.querySelector('#hoge').appendChild(document.createElement('div'));

脱jQuery~JavaScriptに支配されないための真の思考法~ parent([selector])メソッド

jQueryのparentメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。 // jQuery var _$parent = $('#hoge').parent(); // JavaScript var _parentNode = document.querySelector('#hoge').parentNode; selectorを使う場合は、classList…

脱jQuery~JavaScriptに支配されないための真の思考法~ scrollメソッド

jQueryのscrollメソッドもjQueryのonメソッドに移行対象となっているメソッドなのだが、古いjQueryを使っている人も当然いるわけなので、scrollメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書きたい。 // jQuery $(window).scroll(fun…

Semantic UIのradioボタンのvalueについて

Semantic UIのJSを使ってradioボタンを作った時の話。 $('.ui.radio.checkbox').checkbox({ }); この場合のvalueつまり、チェックがついているラジオボタンの値を取得したい時はどうすればいいのか調べた。 inputのradioと同じようにselectorを使ってvalメソ…

webpackでSemantic UIの jsを使う

Semantic UIでCSSは、linkタグを使ってインクルードしている場合、semantic.jsだけをwebpackしたい場合がある。 Semantic UIのjsはjQueryも必要になるので、webpackにjQueryも含める必要がある。 jQueryはnpmで取り込んでrequire経由で呼び出せば問題はない…

脱jQuery ネイティブJavaScript(Vanilla JS)置換対応リスト

jQueryではなくネイティブJavaScript(Vanilla JS)に置き換えた場合の対応リスト なぜjQueryではなく素のJavaScriptで実装をするのか? Selector readyメソッド findメソッド clickメソッド resizeメソッド scrollメソッド parentメソッド appendメソッド att…

脱jQuery~JavaScriptに支配されないための真の思考法~ resizeメソッド

jQueryのresizeメソッドもjQueryのonメソッドに移行対象となっているメソッドなのだが、古いjQueryを使っている人も当然いるわけなので、resizeメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書きたい。 // jQuery $(window).resize(fun…

脱jQuery~JavaScriptに支配されないための真の思考法~ readyメソッド

// jQuery jQuery(function(){ }); jQuery(document).ready(function() { } // JavaScript document.addEventListener('DOMContentLoaded', function() { });

脱jQuery~JavaScriptに支配されないための真の思考法~ clickメソッド

すでに移行対象となっているメソッドだが、古いjQueryを使っているケースもあるのでネイティブJavaScipt(Vanilla JSまたは素のJavaScript)で実装する方法について書く。 // jQuery $('a').click(function(e){ }); // jQuery $('a').on('click', function(e){…

脱jQuery~JavaScriptに支配されないための真の思考法~ findメソッド

Selectorの書いたので、今日は、jQueryのfineメソッドについて書く。 // jQuery var _$foo = $('#hoge').find('.foo'); // JavaScript var _foo = document.querySelectorAll('#hoge')[0].querySelectorAll('.foo'); // jQuery var _$foo = $('.hoge').find(…

脱jQuery~JavaScriptに支配されないための真の思考法~ Selector

まずは、jQueryでSelectorを使ってdomにアクセスするのだが、それを普通のネイティブのJavaScriptの場合について書く。 // jQuery var _$hoge = $('#hoge'); // JavaScript var _hoge = document.querySelectorAll('#hoge'); // jQuery var _$hoge = $('.hog…

脱jQuery~JavaScriptに支配されないための真の思考法~

少し前に話題になった「脱○畜サ○ン」を文字って、「脱jQuery~JavaScriptに支配されないための真の思考法~」というタイトルで、元々jQueryで書いていたコードをあえて使わずに普通のJavaScript(別名VanillaJS)の場合をリスト形式で紹介する。 そもそも何故…