how_to_javascript_4

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

↑

指定した要素の情報取得 †

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

↑

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

(1)サンプルHTMLをダウンロード
http://k-tateno.s-tanno.com/wiki/sample/cssselect.html

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

<script type="text/javascript" src="jquery-1.3.2.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 type="text/javascript" src="jquery-1.3.2.min.js"></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="gurren.jpg" />
　～
<img id="test10" src="gurren.jpg" />

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

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

↑

余裕のある人は †

JavaScriptでIDを変えて違う画像を10個表示してください（for文でdocument.write）
下記の10個のファイルを用意して表示してください。

jstest0.jpg
　～
jstest9.jpg

やり方は２種類あります。

"test"+i+".jpg" といった感じでファイル名を指定
最初に配列に画像ファイル名を入れておく　例：gazo[2] = "jstest2.jpg";

２つのやり方は各々メリットが有ります。
考えてみてください。