ポンクソフト

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

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

目次

  1. jQuery入門
  2. jQueryのインストール・簡単な使い方
  3. クイズゲームの作り方
  4. 秘密の暗号を作ってみよう(たぬき暗号)
  5. アクションゲームを作ってみよう(ぬりかべ)
  6. 画像を使ったジグソーパズルを作ってみよう
  7. もぐらたたきっぽいゲーム
  8. ドラッグ可能なポップアップウインドウを作ろう
  9. jQuery UI Sortableで1ラインオセロゲーム
  10. ブラウザ全体をブロックしてみる
  11. Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
  12. 発生したイベントの状態を保持・保存する6つのパターン
  13. Ajaxを利用したシンプルなイメージギャラリーを作ってみる
  14. テーブルにページ送り(ページング)を実装してみる
  15. jQuery UI Draggableを使って付箋(sticky)を作ってみる
  16. カラムでソートできるテーブルを自作してみる
  17. テーブルを使ったシンプルなドット絵エディタを作ってみる
  18. iPhoneのようにマウスではじいてスクロール(フリックスクロール)を実装してみる
  19. テキストフィールドの数値をマウスの上下移動で増減する
  20. iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
  21. iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
  22. リアルタイムプレビュー付きのHTMLエディタを作ろう
  23. 保存できる付箋を作ってみる(Cookie、localStorage)

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 次ページ
このエントリーをはてなブックマークに追加 そっか0