jQuery

jQueryの基礎構文についての備忘録

jQueryを使う恩恵は3点だと思っています。

①クロスブラウザな実装ができる点
②短い記述でDOM操作ができる点
③簡単にAJAXが実装できる点
 

そんなjQueryを使う前にまずこれだけは覚えておきましょうという基礎。

まずはjQueryの使い方から。

$(function(){
    $('#btn1').on('click', function(){
        $('#txt').css('color', 'red');
    });
});

 
$(function(){~~~});
部分は
$(document).ready(function(){~~~});

のシンタックスシュガーになります。
(document).readyはHTML上の全DOM要素の読み込み後に走ります。

そのfunction内にそれぞれのイベントハンドリングを書き足していきます。

ここからは、記事最下のURLがよくまとまっていたので引用しています。

①.click()ではなく.on()

$('#btn').on('click', function() {
    alert('hogegenoge');
})

.click()とか使うのは辞めましょう。

.on()では
.click(), bind(), live(), delegate()を包括しています。

.clickの場合は、
ページのレンダリング時点で存在しておらず
後からfunctionなどを使って追加したDOM要素に対しては
イベントの設定ができません。

②success:, error:ではなく.done(), fail()

以下にまとめました。
jQueryのdeferred用いたajaxについての備忘録

③POSTだけなら.ajax()ではなく.post()

postの方がシンプルにかけます。

④子要素の検索なら.find()

$('.hoge #hogege')
よりも
$('.hoge').find('#hogege')
がベターです。

ちなみに.はクラスで検索、#はIDで検索ですね。

  

まだjQuery覚え始めたところですが
もうすでにjQueryよりもこれからはReact.jsのようですがね。

モダンな開発が進む時代に取り残されないようにまだまだ勉強必要です……


参考:
jQuery使いが知っておくべきjQueryテクニック8選