◆jQueryを使ってみる：クロスフェード画像切り替えなど
短いサンプルを作成しjQueryを「使ってみます」。実際に動くサンプルとそのコードを この記事上に載せています。
- 要素選択とcss変更： テーブル色を１行おきに変える
- イベントとエフェクト： 画像をクロスフェードで切り替える
- イベントとエフェクト： 画像をフェードインで切り替える（当初の版）
jQueryのもう一つの重要な機能であるAjaxアクセスに関してはいずれ別メモ記事に載せます。
イベントハンドリングとエフェクト例（クロスフェードによる画像切り替え)
jQueryにはフェードインなどのエフェクト機能も組まれています。
フェードアウトとフェードインを組み合わせたクロスフェードサンプルを載せます。
ボタンイベントの取り扱いも行っています。
コードは次のようになっています。下線の部分は当該項目説明部へのリンクが張られています。
この記述はbody部にコピペし赤で示した部分をシステムに合わせて置き換えれば動くはずです。
<script type="text/javascript" src="../../../js/jquery.js"></script> <p><input type="button" id="prevButton" value="Prev">  <input type="button" id="nextButton" value="Next"></p> <div id="images" style="position:relative;width:480px;height:380px"> <img src="../../../image_08_11/pod_takeoff_mini.jpg"> <img src="../../../image_08_11/discover_pod_mini.jpg"> <img src="../../../image_08_11/st5s1_af_811_mini.jpg"> <img src="../../../image_08_11/st5s4_af_230_mini.jpg"> <img src="../../../image_08_11/st5s5_af_050_mini.jpg"> <img src="../../../image_08_11/poster_seq-094_mini.jpg"> <img src="../../../image_08_11/poster_up_mini.jpg"> </div> <script type="text/javascript"> var imageIndex=0; $(function(){ $("#images>img").css({"position":"absolute","top":"0px"}); $("#images>img:gt(0)").hide(); $("#nextButton").click(function(){ var oldIndex= imageIndex; imageIndex= ++imageIndex % $("#images>img").size(); $("#images>img:eq("+oldIndex+")").fadeOut("slow"); $("#images>img:eq("+imageIndex+")").fadeIn("slow"); }) $("#prevButton").click(function(){ var oldIndex= imageIndex; if( --imageIndex<0 ) imageIndex=$("#images>img").size()-1; $("#images>img:eq("+oldIndex+")").fadeOut("slow"); $("#images>img:eq("+imageIndex+")").fadeIn("slow"); }) }) </script>クロスフェードとするため、領域サイズを固定にし、位置も固定としました。
単純にフェードインで切り替える場合、サイズ/位置を固定する必要はありません。 当初はフェードインのみとしてありました。本記事後部の 単純fadeInサンプルに当初の版を載せて ありませう。
画像は◆２００１年宇宙の旅;CGギャラリーのものです。
説明
jqueryのインストールに関しては本記事内のiQueryのダウンロード を参照してください。 要素の選択に関しては本記事内の要素選択を参照してください。 当初は 「テーブル色をの１行おきに変える」の項を前に置いていたのですが 画像モノの方が面白いのでこちらを前にもってきました。そのため 基礎説明の順番が前後しています。
クリック・イベントハンドリング：
<input>要素に.click(function(){...})を付加することによりクリック イベントの処理を書くことができます。
エフェクト：
フェードインやフェードアウト、スクロール、サイズ連続変更などの 機能が用意されています。
フェードインは要素に.fadeIn()を作用させることにより実行されます。
引数に"slow"を付け.fadeIn("slow")とするとゆっくりとフェードインします。
fadeOut()はフェードアウトを実行します。
hide()は要素を隠します。
テーブル色をの１行おきに変える
jQueryライブラリを用いたテーブル色付けを行います。 なお、jQueryを使わず処理をJavascriptで書き下ろす記事を ◇HTMLのTABLEの色を１行毎に変える方法に置いてあります。
| 大型 | → | 小型 |
|---|---|---|
| ワシ | → | スズメ |
| ペンギン | → | ツバメ |
| ツル | → | チドリ |
| ハト | → | メジロ |
上のテーブルは次の記述で表示しています。 赤で示した部分をシステムに合わせて置き換えれば動きます。
<!-- tableクラスcss定義 --> <style type"text/css"> table.myTable {border:2px solid black ; border-collapse:collapse} table.myTable td{border:2px solid black} table.myTable th{border:2px solid black} </style> <!-- jqueryライブラリの読み込み --> <script type="text/javascript" src="../../../js/jquery.js"></script> <!-- テーブル定義 --> <table class=myTable style="text-align:center"> <thead><tr><th style="width:5em">大型</th><th style="width:2em">→</th> <th style="width:5em">小型</th></tr></thead> <tbody> <tr> <td>ワシ</td> <td>→</td> <td>スズメ</td> </tr> <tr> <td>ペンギン</td><td>→</td> <td>ツバメ</td> </tr> <tr> <td>ツル</td> <td>→</td> <td>チドリ</td> </tr> <tr> <td>ハト</td> <td>→</td> <td>メジロ</td> </tr> </tbody> </table> <!-- jQueryによるテーブルへの色付け --> <script type="text/javascript"> $(function(){ $(".myTable tr").css("color","white"); $(".myTable thead>tr").css("backgroundColor","#000044"); $(".myTable tbody>tr:odd").css("backgroundColor","#006666"); $(".myTable tbody>tr:even").css("backgroundColor","#004466"); }) </script>
説明
iQueryのダウンロード、ファイル配置とロード:
jQueryはページの要素選択機能やAjax通信機能などを コンパクトに表現できるようにしたライブラリです。 高度化した画面要素なども用意されています。
約70KBのコンパクトなもので、http://jquery.com/
からダウンロードできます。
可読形式のjquery-n.n.n,jsと空白を取り払ってコンパクトにしたjquery-n.n.n.min.jsがあります。
この記事ではコンパクト版をjquery.jsと名前を変え"../../../js/jquery.js"に置き利用しています。
<script type="text/javascript" src="../../../js/jquery.js"></script>
自動起動関数 $(function(){...}):
$(function(){ 動作定義 })は要素がアクセス可能になった時点で呼び出されます。widows.onloadに
近いものです。
通常は<head>内に置きべきものですが、対象となる要素全ての後ろの位置であれば
<body>内に置くこともできます。
要素選択 $("..."):
$("アクセス指定")は要素選択を行うものです。複数の要素に同じ処置を行うことが
一つの指定でできます。
複数要素に対し処理を施す場合、
ループ手続き内で１個１個に処理を施す記述をするのではなく、
対象をひとまとめにしてそれに対する処理を記述するのです。
これこそがjQueryの特徴なのです。
次のテーブルは指定法の抜粋です。
| 記述形式 | 説明 |
|---|---|
| -------- 基本指定 -------- | |
| ".クラス名" |
クラス指定で要素(複数）を選択する。 例えば、
$(".myTable").css("color","white");
ではmyTableクラス要素（複数）を選択し、colorに白をセットします。
|
| "#ID" | idで要素を指定する | "タグ名" | 指定タグの要素（複数）を選択する | "*" | 全ての要素（複数）を選択する |
| "セレクタ,セレクタ..." | 指定セレクタで要素（複数）を選択する |
| -------- 組み合わせ指定（組み合わせをさらに組み合わせることもできます） -------- | |
| "■ ◆" |
指定の祖先、子孫の関係にある要素（複数）を選択する。 要素の間は空白です。">"による親子指定は１世代の関係ですが、この指定は間に階層を挟んでも構いません。
$("table td").css("color","white");// 有効
$("table > td").css("color","red"); // 無効（親子ではない）
|
| "■ > ◆" |
親子関連（tbodyの中tdなど）にある要素（複数）を選択する。 要素の間に">"を置きます。 １世代の関係であり間に階層を挟むことはできません。
$("table tr").css("color","white");// 有効
$("table > tr").css("color","red"); // 有効
|
| "■ + ◆" | 兄弟関係にある要素（複数）を選択する。（詳細はいずれ） |
| "■ ~ ◆" | 指定要素以降の兄弟関係にある要素（複数）を選択する。（詳細はいずれ） |
| -------- フィルタ（抜粋：数が多いので一部だけここに載せます） -------- | |
| "■:first" |
先頭要素を選択する。
$("tr:first").css("color","orange");
選択したものの中での先頭です。例えば、複数のテーブルがあり、行が選択されたとすると
最初のテーブルの最初の行となります。
|
| "■:last" | 最終要素を選択する。 |
| "■:even" |
奇数番目の要素(複数)を選択する。
$("tr:even").css("color","orange");
選択したものの中での奇数番目です。例えば、複数のテーブルがあり、行が選択されたとすると
テーブル毎の奇数番目ではなく全体での奇数番目となります。
|
| "■:gt(番数)" |
指定番数を超える位置の要素を選択する。 次の例はid=imagesの中の先頭以外の<img>を見えなくしています。
$("#images>img:et(0)").hide();
|
| "■:eq(番数)" |
指定番数の位置の要素を選択する。 次の例はid=imagesの中の3番目の<img>をフェードインしています。
$("#images>img:eq(3)").fadeIn("slow");
|
| -------- 属性フィルタ（抜粋：数が多いので一部だけここに載せます） -------- | |
| "■:[属性名]" | 指定属性を含む要素(複数)を選択する。 |
| "■:[属性名=属性値] |
指定属性を含む要素(複数)を選択する。 例えば次の定義ではcolspan=2が定義されているtdの色を変えています。
$("td[colspan=2]").css("color","#444466");
このテーブルで使っています。残念ながらodd/evenに影響を与えることはできていません。
|
| -------- 内容フィルタ（抜粋：数が多いので一部だけここに載せます） -------- | |
| "■:contains(文字列）" | 指定の文字列を含む要素(複数)を選択する。 |
アクセス指定は組み合わせて複雑な選択を行うことができます。
例えば、
- myTableクラスの子孫で
- tbodyの子供の
- trの
- 奇数行要素
$("myTable tbody>tr:odd").css("backgroundColor","#006666");
と指定します。
要素アクセス
$("選択記述")で選択した要素のcssプロパティを変更したり、text内容を設定したり といったアクセスを行います。その他色々ありますが、ここにはcss変更,text変更 のみを載せます。
| 記述形式 | 説明 |
|---|---|
| css("プロパティ名","値") |
cssプロパティを設定する。
$("myTable").css("color","white");
|
|
css({"プロパティ名":"値", "プロパティ名":"値", ...}) |
複数のcssプロパティを設定する。
$("myTable").css({"backgroundColor":"white",
"color":"red"});
１個の場合はプロパティ名と値を","カンマで
つないでいますが、複数の場合":"でつなぎ、","はそのセットの並びを
現すことに注意が必要です。
|
| text("テキスト") |
指定要素にテキストを設定する。
<p>ここに.text()による[<span id="text1"></span>]出力</p>
<script type="text/javascript">
$(function(){
$("#text1").text("SAMPLE-TEXT");
}
</script>
このテーブルの後ろに実際にこのサンプルを置いてあります。
|
| hide() | 要素を隠します。 |
ここに.text()による[]出力
単純fadeInサンプル
(2010/7/7)こちらに移動
当初は単純なfadeInのみ行っていました。画面の位置調整が単純になっています。
<center>が使えると記述がすっきりします。HTML5反対！
コードは次のようになっています。
<script type="text/javascript" src="../../../js/jquery.js"></script>
<center>
<p><input type="button" id="prevButton2" value="Prev"> 
<input type="button" id="nextButton2" value="Next"></p>
<div id="images2" >
<img src="../../../image_08_11/pod_takeoff_mini.jpg">
<img src="../../../image_08_11/discover_pod_mini.jpg">
<img src="../../../image_08_11/st5s1_af_811_mini.jpg">
<img src="../../../image_08_11/st5s4_af_230_mini.jpg">
<img src="../../../image_08_11/st5s5_af_050_mini.jpg">
<img src="../../../image_08_11/poster_seq-094_mini.jpg">
<img src="../../../image_08_11/poster_up_mini.jpg">
</div>
</center>
<script type="text/javascript">
var imageIndex2=0;
$(function(){
$("#images2>img:gt(0)").hide();
$("#nextButton2").click(function(){
var oldIndex= imageIndex2;
imageIndex2= ++imageIndex2 % $("#images2>img").size();
$("#images2>img:eq("+imageIndex2+")").fadeIn("slow");
$("#images2>img:eq("+oldIndex+")").hide();
})
$("#prevButton2").click(function(){
var oldIndex= imageIndex2;
if( --imageIndex2<0 ) imageIndex2=$("#images2>img").size()-1;
$("#images2>img:eq("+imageIndex2+")").fadeIn("slow");
$("#images2>img:eq("+oldIndex+")").hide();
})
})
</script>
| 固定リンク