第2回 jQueryのインストール・簡単な使い方 – jQuery入門
2009 年 4 月 15 日 投稿者: naga3
では早速jQueryを使ってみましょう。jQueryを使うには、本家サイト（http://jquery.com/）からjsファイル（jquery-1.3.2.min.js）をダウンロードしてHTMLから呼び出すのが通常の使い方ですが、GoogleがホストしているjQueryを使うこともできます。こちらのほうがインストールする手間がないので楽です。
サンプルプログラム（おばけ）
文字をクリックするとフェードアウトします。
プログラムのソース
以下のソースを拡張子 .html で作成してブラウザで表示してみてください。jQueryをダウンロードする必要はありません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">
$(function() {
$('p').click(function() {$(this).fadeOut('slow');});
});
</script>
</head>
<body>
<p>おばけー</p>
</body>
</html>
プログラムの解説
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
この２行でGoogleのホストしているjQueryを取り込んでいます。google.loadの第２引数にjqueryのバージョンを書きます。この部分を “1.3″ にすると、自動的にバージョン 1.3 系の最新版を使うようになります。そっちの方がいいかも。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
このように一行で書くこともできます。GoogleでホストされているライブラリをjQueryしか使わないときは、こちらのほうが手軽です。
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
自前で用意したjQueryを使う場合はこのように書きます。
$(function() {
$('p').click(function() {$(this).fadeOut('slow');});
});
この3行でpタグの要素内でクリックされたときに、その要素をフェードアウトする処理を行っています。省略しない書き方
jQuery（JavaScript）は無名関数などかなりコーディングを省略できるので、慣れないうちは分かりにくい部分があると思います。そこで上の3行の省略しない書き方を以下に示します。
jQuery(document).ready(setReady);
function setReady() {
jQuery('p').click(setClick);
}
function setClick() {
jQuery(this).fadeOut('slow');
}
他の言語をやっている人はこちらの方が分かりやすいのではないでしょうか。jQuery(要素)でjQueryオブジェクトというものが帰ってくるので、それに対し、readyやclickやfadeOutのようなメソッドを呼び出している感じです。
jQuery(document).ready(setReady);
この行は、documentの読み込みが終わり操作が可能になった段階でsetReady関数を呼び出す、という意味です。jQueryのコーディングでは、ほとんどの処理をjQuery(document).ready内に書くことになります。
jQuery('p').click(setClick);
この行は、全てのpタグにおいて、中の要素がクリックされたときにsetClick関数を呼び出す、という意味です。
jQuery(this).fadeOut('slow');
この行は、押されたpタグの要素をゆっくりと（slow）フェードアウトする処理です。thisは、イベントが発生した要素、すなわちクリックされたp要素を指します。jQueryクラスの別名による省略方法
「jQuery」は最もよく使うので、「$」という短い別名でもOKです。また、「jQuery(document).ready(…)」は、毎回出てくる処理なので、「jQuery(…)」または「$(…)」と省略できます。
無名関数による省略方法
関数を引数に取る関数があったとき、引数内に関数を直接書き、関数名を省略することができます。例えば
func_a(func_b);
function func_b() {処理}
のような場合、
func_a(function() {処理});
と書くことができるわけです。引数の中に関数定義を全て展開して、「$」を使い短く書くと、
$(function() {
$('p').click(function() {$(this).fadeOut('slow');});
});
こうなるわけです。
2010 年 3 月 7 日 7:00 PM
とても勉強になります。jQueryが楽しくなります。
ありがとうございますー
2010 年 3 月 7 日 11:42 PM
こちらこそありがとうございますー。
jQueryはホント楽しいですよ！