▶ JavaScript

第４回「jQueryでのDOM操作」 - 360°スゴイ JAVA SCRIPT 講座

jQuery とは

jQueryとは、John Resig氏を中心として開発されている、オープンソースのJavaScriptライブラリです。DOM操作を中心としたプログラミングに向いています。

jQueryのメリット

  • CSSセレクタが使える
  • CSSプロパティなどの追加・変更が容易
  • 特殊効果やアニメーションをシンプルに記述出来る
  • ユーザーインターフェイス(UI)ライブラリが充実している
  • コア(中核)の部分の容量が小さい(57k)
  • さまざまな処理をシンプルに記述出来る

DOMってなんだ？

http://ja.wikipedia.org/wiki/Document_Object_Model

ホームページの色々なパーツ（画像、文字、その他）をグリグリ動かせます。

ホームページの色々なパーツ ⇒ 要素

利用方法

jQuery 本家

http://jquery.com/

右側の「Download(jQuery)ボタン」でjQuery（JSライブラリファイル）をダウンロードして下さい。

jQueryをページ内へインクルードする方法は、通常のJavaScriptファイルをインクルードする手順と同じでHTML内の head タグの中で script タグによってインクルードします。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
</body>
</html>

これで、このHTMLでのJavaScriptでjQueryが使えるようになります。

（１）セレクタ

要素（ホームページのパーツ）を指定し、操作する権利を手に入れる。

要素は下記で指定できる。

$("要素")

要素は文字列で指定します！

文字列で指定しない例外は以下の２つです（後の講座で出てきます）

  • $(document)
  • $(this)

IDに一致

  • 指定したい要素（ホームページのパーツ）
    <span id="sample_span">sample</span>

  • 要素指定
    $("#sample_span")

classに一致

  • 指定したい要素（ホームページのパーツ）
    <span class="sample">sample</span>

  • 要素指定
    $(".sample")

タグに一致

  • 指定したい要素（ホームページのパーツ）
    <span>私も古い秘密の名前を持っているんだよ</span> <span>私の名前は、</span> <span>ロムスカ・パロ・ウル・ラピュタ</span>

  • 要素指定
    $("span")　←　すべての<span>を選択

複数の要素に一致

  • 指定したい要素（ホームページのパーツ）
    <a id="link1">link1</a> <a id="link2">link2</a>

  • 要素指定
    $("#link1,#link2")　←　何個でも指定可能

特定の要素内要素

  • 指定したい要素（ホームページのパーツ）
    <ul> <li class="item"><a href="profile.html">プロフィール</a></li> <li class="item"><a href="recent.html">最近のエントリ</a></li> <li class="item"><a href="comments.html">コメント</a></li> <li class="item bottom"><a href="bookmark.html">Buzzurlにブックマーク</a></li> </ul>

  • 要素指定（ul要素の子孫のa要素）
    $("ul a")

その他にもたくさんの要素指定方法があります。

jQuery セレクタ

http://semooh.jp/jquery/api/selectors/

（２）指定した要素の操作

では指定した要素を操作してみましょう。

属性変更・取得（attrメソッド）

  • 操作したい要素（ホームページのパーツ）
    <img id="hoge" src="img/pencil.jpg" alt="鉛筆" />

  • src属性を変更
    $("#hoge").attr("src","img/school.jpg");

  • src属性を取得
    var filename = $("#hoge").attr("src");

value属性変更・取得（valメソッド）

  • 操作したい要素（ホームページのパーツ）
    <input id="hoge" value="ローラーヒーロームテキング" />

  • value属性を変更
    $("#hoge").val("クロダコブラザーズ");

  • value属性を取得
    var data = $("#hoge").val();

スタイル変更・取得（cssメソッド）

  • 操作したい要素（ホームページのパーツ）
    <div id="hoge">無限大な夢のあとの　何もない世の中じゃ</div>

  • colorスタイルを変更
    $("#hoge").css("color","red"); $("#hoge").css("color","#00FF88");

  • colorスタイルを取得
    var col = $("#hoge").css("color");

  • colorスタイルを取得
    var col = $("#hoge").css("color");

HTML変更・取得（htmlメソッド）

  • 操作したい要素（ホームページのパーツ）
    <div id="hoge"> <p> ゴキゲンな蝶になって　きらめく風に乗って<br /> 今すぐ　キミに会いに行こう<br /> 余計な事なんて　忘れた方がマシさ<br /> これ以上　シャレてる時間はない<br /> </p> </div>

  • HTMLを変更
    $("#hoge").html("<p>何が　WOW WOW～<br />");

  • HTMLを取得
    var kashi = $("#hoge").html();

テキスト変更・取得（textメソッド）

  • 操作したい要素（ホームページのパーツ）
    <div id="hoge"> <p> ウカレタ蝶になって　一途な風に乗って<br /> どこまでも　キミに会いに行こう<br /> 曖昧な言葉って　意外に便利だって<br /> 叫んでる　ヒットソング聴きながら<br /> </p> </div>

  • テキストを変更
    $("#hoge").text("だけどWOW WOW期待してても仕方ない");

  • テキストを取得
    var kashi = $("#hoge").text();

要素を表示（showメソッド）

  • 操作したい要素（ホームページのパーツ）
    <img id="hoge" src="img/phone.jpg" />

  • 要素を表示
    $("#hoge").show(); $("#hoge").show("slow"); $("#hoge").show("normal"); $("#hoge").show("fast"); $("#hoge").show(1500); // 1.5秒かけて表示

要素を非表示（hideメソッド）

  • 操作したい要素（ホームページのパーツ）
    <img id="hoge" src="img/phone.jpg" />

  • 要素を表示
    $("#hoge").hide(); $("#hoge").hide("slow"); $("#hoge").hide("normal"); $("#hoge").hide("fast"); $("#hoge").hide(1500); // 1.5秒かけて非表示

要素をスライドさせて表示（slideDownメソッド）

  • 操作したい要素（ホームページのパーツ）
    <img id="hoge" src="img/phone.jpg" />

  • 要素をスライドさせて表示
    $("#hoge").slideDown(); $("#hoge").slideDown("slow"); $("#hoge").slideDown("normal"); $("#hoge").slideDown("fast"); $("#hoge").slideDown(1500);

要素をスライドさせて非表示（slideUpメソッド）

  • 操作したい要素（ホームページのパーツ）
    <img id="hoge" src="img/phone.jpg" />

  • 要素をスライドさせて非表示
    $("#hoge").slideUp(); $("#hoge").slideUp("slow"); $("#hoge").slideUp("normal"); $("#hoge").slideUp("fast"); $("#hoge").slideUp(1500);

要素をフェードイン（fadeInメソッド）

  • 操作したい要素（ホームページのパーツ）
    <img id="hoge" src="img/phone.jpg" />

  • 要素をフェードイン
    $("#hoge").fadeIn(); $("#hoge").fadeIn("slow"); $("#hoge").fadeIn("normal"); $("#hoge").fadeIn("fast"); $("#hoge").fadeIn(1500);

要素をフェードアウト（fadeOutメソッド）

  • 操作したい要素（ホームページのパーツ）
    <img id="hoge" src="img/phone.jpg" />

  • 要素をフェードアウト
    $("#hoge").fadeOut(); $("#hoge").fadeOut("slow"); $("#hoge").fadeOut("normal"); $("#hoge").fadeOut("fast"); $("#hoge").fadeOut(1500);

透明度変化（fadeToメソッド）

  • 操作したい要素（ホームページのパーツ）
    <img id="hoge" src="img/phone.jpg" />

  • 透明度変化（33%の透明度へ変化）
    $("#hoge").fadeTo("slow",0.33); $("#hoge").fadeTo("normal",0.33); $("#hoge").fadeTo("fast",0.33); $("#hoge").fadeTo(1500,0.33);

jQuery Attributes

http://semooh.jp/jquery/api/attributes/

jQuery Effects

http://semooh.jp/jquery/api/effects/

　

要素の操作のイメージ

指定した要素に命令

$("#hoge").show();
$("#hoge").hide();
$("#hoge").text("人がゴミのようだ");

同時に複数の指定した要素に命令

$(".hoge").show();
$(".hoge").hide();
$("div").css("color","red");

指定した要素の情報取得

var myColor = $("#hoge").css("color");
var input = $("#hoge").val();

（演習１）要素選択・属性操作をやってみよう

(1)サンプルHTMLをダウンロード

http://tatenosystem.com/pukiwiki/sample/cssselect.html

(2)jQueryライブラリを読み込もう

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="jquery.min.js"></script>

(3)要素選択・操作

$("#entries-layout").css("background-color","red");

(4)いろいろな要素（ホームページのパーツ）を選択してみよう！

    • 要素変更の前に alert("POUSE"); を入れると変化がわかりやすいです。

（演習２）要素選択・エフェクト操作をやってみよう

(1)サンプルHTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<img id="test" src="hoge.jpg" />

<script language="JavaScript">
<!--

/* ここにJSプログラム */

-->
</script>

</body>
</html>

(2)jQueryライブラリを読み込もう

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

<script src="jquery.min.js" type="text/javascript"></script>

(3)hoge.jpg を好きな画像に設定

画像サンプル

(3)要素選択・操作

$("#test").hide("slow");

(4)いろいろなエフェクトをやってみよう！

DOMとプログラムを各順番

  • これはちゃんと色が変わります
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>

<div id="hoge">JAVA SCRIPTを覚えよう！</div>

<SCRIPT LANGUAGE="JavaScript">
<!--
  $("#hoge").css("color","red");
-->
</script>

</body>
</html>
  • これは色が変わりません
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>

<SCRIPT LANGUAGE="JavaScript">
<!--
  $("#hoge").css("color","red");
-->
</script>

<div id="hoge">JAVA SCRIPTを覚えよう！</div>

</body>
</html>

HTMLもプログラムも、上から処理していくよ。

宿題

最初にJavaScriptでIDを変えて同じ画像を10個表示してください（for文でdocument.write）

<img id="test1" src="http://tatenosystem.com/study/img/crash.jpg" />
　～
<img id="test10" src="http://tatenosystem.com/study/img/crash.jpg" />

次に「偶数のIDを持つ画像」をゆっくり非表示にしてください（for文で要素への指示）

$("なんとか").hide(10000);