jQueryがすごいらしい

最近よく聞くjQuery。そもそもjavascriptすらよくわかんないんだけど。

jQueryは、Ajaxのフレームワークの一種。prototype.jsや Yahoo! UI Library、Spryなどなどここ最近は、群雄割拠な状態ですが中でも注目度が高いのが、この jQueryです。

その特徴は、軽くて手軽。10KB弱の JavaScriptをコピーするだけで使え、JavaScriptの標準的な書式を一切無視した、超手軽な書き方が出来るようになります。

jQueryを使おう:jQueryってなに?: Recently Ajax より引用

ということはきっとjavascriptより簡単にいろいろ書けるんじゃないか、楽しいんじゃないかという意味の分からない試みでスタート。とはいっても日本語のリファレンスがないので仕方なく英語のサイトの簡単なチュートリアルで体験 :cry:

jQuery: Tutorial
まずは環境を整えましょうを書いてあるのでこんな感じのhtmlファイルを作成。

<html>
<head>
<script type="text/javascript"
  src="http://jquery.com/src/latest/"></script>
<script type="text/javascript">
  // ここにコードを書く
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>

もしローカルに落としたい人は最新版をダウンロードしてください。
んでjavascriptを使用するとき、よくwindow.onload = function(){ ... }って最初に書くと思うんだけど、jQueryではこう書きます。

$(document).ready(function(){
  // ここにコードを書く
});

というわけで準備終了。あとはチュートリアルに従ってコードを書いていくだけ。
1:アンカーをクリックしたらアラートを出す

$("a").click(function(){
  alert("クリックされました");
});

でもこのままでは全てのアンカーがクリックされるたびにアラートが出てウザイので

$("a.test").click(function(){
  alert("クリックされました");
});

こんな風にそのままクラスを書き込むことも可能です。

2:アンカータグにクラスを追加する。もしくは削除する。
追加するとき

$("a").addClass("test");

削除するとき

$("a").removeClass("test");

3:アンカーをクリックしたら要素を隠す

$("a").click(function(){
  $(this).hide("slow");
  return false;
});

4:divの中のテキストをゆっくり出現させる

$('div').show('slow');

という感じのことがチュートリアルには書いてあってきっとどれも普通にjavascriptを書いても大丈夫なんだけど、なんともhtmlのソースがキレイです。javascriptのソースも普通に書くよりすっきりで見やすい。テストページで確認できます。もうちょっとしたらちゃんと日本語のチュートリアルが出てくることを祈ってます :oops:

Trackback URI: http://blog.ochanocosaisai.com/wp-trackback.php?p=244

気軽に記事を評価してみて下さい。
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 3.50 out of 5)
Loading ... Loading ...

Pua said,

2008/4/11 金曜日 @ 15:21:44

It sounds good, I love the simplicity. Your posts are easy as a pie and really attractive at the same time.

コメントする

RSS feed for comments on this post · TrackBack URI · add to hatena hatena.comment 2 users add to del.icio.us 0 user add to livedoor.clip 0 user