![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
イベント関数内で使用できる要素セレクト $(this) †jQueryは、１命令で複数の要素にイベントを設定できます。 $("span").click(イベント関数);
とか、 $(".someDoms").click(イベント関数);
など。 複数の要素にイベントを設定した場合、どの要素のイベントが発動したのか知りたい？ <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 src="jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<script language="JavaScript">
<!--
// == DOM Loaded Event ==
$(function(){
/* ページ作成終了時のイベント定義 */
$("span").click(function(ev){
$("span").css("color","#FF0000");
});
}); // -- End of DOM Loaded Event
-->
</script>
<span>一本でも 人参</span>
<span>ニ足でも サンダル</span>
<span>三そうでも ヨット</span>
<span>四つぶでも 胡麻塩</span>
<span>五台でも ロケット</span>
<span>六羽でも 七面鳥</span>
<span>七匹でも 蜂</span>
<span>八頭でも くじら</span>
<span>九杯でも ジュース</span>
<span>十個でも いちご</span>
</body>
</html>
→ これだとクリックで全部が赤色に！
/* ページ作成終了時のイベント定義 */
$("span").click(function(ev){
$(this).css("color","#FF0000");
});
（課題）クリックしたらすべての<span>のカラーを黒にしたあと、クリックした要素だけ赤くしよう （課題）クリックしたらクリックした文字をポップアップで表示させよう！ お疲れ様でした。ここまでで JavaScript と jQuery の勉強は終了です。 アルバムページ制作 †下記のHTMLを自分のPCに保存してください。 http://k-tateno.s-tanno.com/wiki/sample/photo.html
（１）画像をクリックしたら 640x400 の画像を「緑のDIVエリア」に表示しよう （２）マウスオーバー（mouseover）されているサムネイル画像だけ、サムネイル画像サイズを 120x75 にしよう （３）サムネイルのすべての<img>タグに title属性 を設定しよう（HTMLに記述しよう） （４）サムネイルクリックで「緑のDIVエリア」に表示した写真の下に、（３）で設定したタイトルを表示しよう （課題）（１）から順に出来るところまで進めてみてください。 完成イメージ図 †
プラグイン †jQueryは軽量・シンプルなJSライブラリなので、よく使われる機能しか実装していないです。
タイマープラグイン †jQueryは一般的にあまり使わない「タイマー機能」を持ってません！
「jQuery Timers 1.0.0」プラグインを導入して、タイマーイベントに挑戦しましょう！
プラグインのHTML記載方法 †最初に jQuery本体 を読み込み、その下でプラグインを読み込みます。 <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jquery.timers-1.0.0.js" type="text/javascript"></script> タイマープラグインを読み込むと、新しいイベント「everyTime」が使えるようになります。 $(要素).everyTime(5000, function(cnt) {
alert("タイマー");
});
5秒(5000ミリ秒)ごとにイベントに設定した関数が実行されます。
具体的なプログラムは下記になります。 <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 src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="JavaScript">
<!--
// == DOM Loaded Event ==
$(function(){
$("#clock").everyTime(5000, function(cnt) {
alert("タイマー");
});
}); // -- End of DOM Loaded Event
-->
</script>
</head>
<body>
<div id="clock"></div>
</body>
</html>
タイマーを止めたい場合は、「stopTime()」メソッドを実行します。 $(要素).stopTime(); タイマープラグインを使って時計を作ろう †＜ヒント＞
完成イメージ図 †
宿題 †（１）アルバムページを完成させてください。 余裕のある人は †アルバムページをCOOLなデザインにしよう！ 宿題が終わった人へ †（１）下記のページを見てください ※ HTMLソースは見ないでください！！！！ 写真スライドショー （２）どういうjQueryプログラムで動いていると思いますか？ 考えてみてください。 （３）HTMLソースを見てください。自分の想像したプログラムと比べてどうでしたか？？？ |
