2010年5月21日金曜日

jQueryでのコードの書き方覚書

ラベル: , 時刻:

jQueryでコードを書くときの方針などです。 入門レベルの内容。 JavaScript自体あまり触ってないので、雑かもしれません。

まずは、htmlのヘッダでjQueryのライブラリを読み込みます。 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="自作コード.js"></script>

jquery.min.jsは公式サイトからダウンロードして自分のサイトにアップロードしてもいいですが、ここではGoogle AJAX Libraries APIを使用しています。 ちなみに、jquery.jsはコードを読みたい人用。 通常は無駄な文字やコメントが削除されたjquery.min.jsを使いましょう。

onloadの代わりに次のコードを使います。 

$(document).ready(function()
{
    // 初期化コード
});

短縮コードは、 

$(function(){
    // 初期化コード
});

onloadイベントは、画像などその他リソースを読み込んでから発生するブラウザがあるようです。 readyの方が待ち時間が少ない模様。 C言語やjavaのメイン関数のような感じで使います。

cssのセレクタと同じ書式でhtml上の要素を指定できます。 

var obj = $('セレクタ');

ここで、objにはjQueryオブジェクトが入ります。 jQueryオブジェクトにはセレクタの条件を満たす要素が全て登録されています。 jQueryオブジェクトのメンバー関数を使うと、全ての要素に一括で処理が実行されます。 例えば、 

var obj = $('h1');
obj.text('入れ替え後のテキスト');

などとするとobjにはhtml上の全てのh1要素が登録されます。 そのobjを通して、全てのh1要素が「入れ替え後のテキスト」に書き換えられます。 実際には、$('#タグのid')を使うことが一番多そう。

jQueryオブジェクトに登録された要素を順番に処理するには、eachを使います。 

$('h1').each(function(index, elem)
{
    $(elem).text(index + '番目の要素');
});

elemも$()で囲む必要があるので注意。

htmlのbodyにonclickなどのイベントハンドラは書きません。 idから対象のタグを引いて、jQuery用のイベントハンドラを書きます。 

<!-- html -->
<input type="button" value="押" onclick="clicked();"/>
/* js */
function clicked()
{
    // イベント処理
}

↑ではなく↓ 

<!-- html -->
<input type="button" value="押" id="test_btn"/>
/* js */
$(function(){
    $('#test_btn').click(clicked);
});

function clicked()
{
    // イベント処理
}

階層のあるhtmlを作るときは、各層のタグを$('タグ')で作り、appendToします。 スマートなやり方かどうかは分からないけど、今はこんな感じで。 

$('#target').empty();
var list = $('<ol/>');
for(var i = 0; i < 10; i++)
{
    var li = $('<li/>')
        .appendTo(list);
    var anchor = $('<a/>')
        .attr('href', 'http://dummy.jp/list' + i)
        .append('list' + i)
        .appendTo(li);
}
list.appendTo('#target');

tableやリストを作るときは階層が深くなるので、読みやすくなるように工夫しなければ...

jQueryを最初に使ったとき、なんにでも$()が付いていてよく分かりませんでした。 今はオブジェクト指向とかオーバーロードとかシンタックスシュガーみたいなことを思い浮かべて、なんとか分かった気分になった状態です。 そういうのを知らない人に文法を説明するのは大変そうですね。

投稿者