jQueryのインストール・簡単な使い方 - jQuery入門

jQueryを使うには？

では早速jQueryを使ってみましょう。jQueryを使うには、本家サイト（http://jquery.com/）の「Download」ボタンを押してjQuery本体をダウンロードし、HTMLから呼び出すのが通常の使い方ですが、Googleのサイトに置いてあるjQueryをURLで指定して使うこともできます。本講座ではこちらの方法を使用します。

クリックするとフェードアウトするプログラム

今回作成するプログラムを以下に示します。

別ページで開く

文字をクリックするとフェードアウトします。

プログラムのソース

以下のソースを拡張子htmlで作成してブラウザで表示してみてください。jQueryをダウンロードする必要はありません。


<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="utf-8">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<title>おばけ</title>

<script>

$(function() {

  $('p').click(function() {$(this).fadeOut('slow');});

});

</script>

</head>

<body>

<p>おばけー</p>

</body>

</html>

プログラムの解説


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

GoogleがホストしているjQueryを取り込んでいます。「1.7.0」の数字を変えると別バージョンを取り込むこともできます。


<script src="http://www.google.com/jsapi"></script>

<script>google.load("jquery", "1.7.0");</script>

このように2行で書くこともできます。Googleがホストしている他のライブラリを使うときはこちらの方が良いかも。


<script src="jquery-1.7.0.min.js"></script>

jQueryをダウンロードして使う場合はこのように書きます。


$(function() {

  $('p').click(function() {$(this).fadeOut('slow');});

});

この3行で、p要素をクリックされたときにフェードアウトする処理を行っています。

省略しない書き方

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);

この行は「DOMの準備が終わった時点で、setReady関数を呼び出す」という意味です。jQueryのコーディングでは、多くの処理をjQuery(document).ready内に書くことになるでしょう。この中に書かない場合、body内の要素を使える保証がありません。


jQuery('p').click(setClick);

この行は、ドキュメント内のp要素がクリックされたときにsetClick関数を呼び出す、という意味です。


jQuery(this).fadeOut('slow');

この行は、押された要素をゆっくりと（slow）フェードアウトする処理です。thisはイベントが発生した要素、すなわちクリックされたp要素を指します。

jQueryの別名による省略方法

「jQuery」という識別子は頻繁に使うので、「$」という短い別名があります。JavaScriptでは「$」文字を識別子（の一部）として使うことができます。また、「jQuery(document).ready(…)」は、ほぼ必ず出てくる処理なので、「jQuery(…)」または「$(…)」と省略できます。

無名関数による省略方法

関数を引数に取る関数があったとき、引数内に関数を直接書き、関数名を省略することができます。例えば、


func_a(func_b);

function func_b() {処理}

のような場合、


func_a(function() {処理});

と書くことができるわけです。

省略した書き方

上記の省略方法を使って、引数の中に関数定義を全て展開して、「$」を使い短く書くと、


$(function() {

  $('p').click(function() {$(this).fadeOut('slow');});

});

こうなるわけです。

前ページ　 jQuery入門 TOP　次ページ

ポンクソフト