でぃべろっぱーず・さいど

一晩で覚えるjQueryの逆引き基礎サンプル7つ*ホームページを作る人のネタ帳

jQueryに書くとほってんとり入りできるらしいので便乗。というかリンク先で紹介されているサンプルコードにちょっと意義異議あり。

一個のサンプルは非常に単純な構造になっておりますゆえ、jQueryをすでにやったことがある人にとって必要ないものだということをあらかじめご了承くださいませ。

ということであれば、「jQueryらしい」書き方をした方が良いかなと思います。

で、僕ならこう書くってことで。

全般的に使われている$(document).ready(fn)は、$(fn)でショートカットできます。

$(document).ready(function(){alert('hoge');})

は、

$(function(){alert('hoge');})

こう書けると。

まあ、これはどうでもいいや。短く書けるってだけなので。初心者向けに$(document).ready(fn)で説明した方が、「ドキュメントが準備完了になったら」というニュアンスが伝わるのかも。

次に、HTMLとJavaScriptの分離ってことで、サンプルでは、

<input name="btn22" type="button" value="ローディング" onClick="bt01()">
<div id="load1"></div>

と、HTMLのonclickに関数を書いていますが、id属性をつけてJavaScriptのコードで

$('#hoge').click(bt01)

と書くほうがjQueryっぽいのでは。

次に、「閉じる、開くボタンを同一の場所で交互にしたい」というtoggleの処理。サンプルでは、ローディングするHTMLにボタンを書いちゃってますが、これだとメンテナンス性が落ちちゃうんじゃないかなー。

ってことで、

<div id="load1"><input name="btn22" type="button" value="ローディング" onClick="bt01()"></div>

は、

<input name="btn22" type="button" value="ローディング" onClick="bt01()"><div id="load1"></div>

こんな感じにローディングする部分の外にボタンは出しちゃいましょう。あとは、JavaScriptで

$('input[name=btn22]').toggle(
function(){
$("#load1").load("./load.html");//HTMLをロードする処理
$(this).attr('value','閉じる')//自分自身のvalueを"ローディング"から"閉じる"に変える。
}
,function(){
$("#load1").html("");//HTMLを消す処理
$(this).attr('value','ローディング')//自分自身のvalueを"閉じる"から"ローディング"に変える。
}
);

こんな感じかな。長くなって分かりにくくなっちゃったかもね。

あと、jQueryのselectorは,区切りで複数指定できるので、

$(document).ready(function(){
$("#ls1").keyup(function () {
var value1 = $("#ls1").val();
var value2 = $("#ls2").val();
$("#ls3").val(value1 * value2);
}).keyup();

$("#ls2").keyup(function () {
var value1 = $("#ls1").val();
var value2 = $("#ls2").val();
$("#ls3").val(value1 * value2);
}).keyup();
});

は、

$(document).ready(function(){
var calc = function(){
var value1 = $("#ls1").val();
var value2 = $("#ls2").val();
$("#ls3").val(value1 * value2);
}
$("#ls1,#ls2").keyup(calc).keyup();
});

こう書いた方がすっきりするし、同様に

function del(){
$("#ls1").val("");
$("#ls2").val("");
$("#ls3").val("");
}

は、

function del(){
$("#ls1,#ls2,#ls3").val("");
}

と書いた方がかっこゆすだと思います。

jQueryを使ったことない人向けってことだったのだけど、HTMLとJavaScriptを分離できるってところが魅力の一つだし、なるべく短くコードが書けるってところもアピールできたらと思って書いてみました。

別にこれが「正解」ってつもりで書いてないので、あしからず。あくまで僕ならこう書くってことで。

2008/4/18 12:20 追記：

本当にページ中のテキスト入力フォームをすべて空にしたいのであれば、

$('input:text').val('')

でいけます。

あと、jQueryとは直接関係ないかもしれませんが、最後のサンプルで、aタグをcodeタグで囲って、さらにクリックしたときにcodeタグのtitle1,2,3属性とかを持ってくるというのは止めた方が良いですよね。

var clickFunc = function(txt1,txt2,txt3){
  $('#ls1').val(txt1);
  $('#ls2').val(txt2);
  $('#ls3').val(txt3);
}

こんな関数を定義して、各aタグに、

$('a:eq(0)').click(function(){clickFunc('北海道','飛行機','2000')});

とイベントを定義していくかなぁ。まあ、この辺はもっと上手い書き方で来ますね。