直接ＨＴＭＬのではなくても、ＪａｖａＳｃｒｉｐｔ或いはjQueryではより簡単に、ＣＳＳクラスの追加・削除が出来ます。
$("セレクタ").addClass("クラス名"); セレクタで選択された要素にクラスを追加します
$("セレクタ").removeClass("クラス名"); セレクタで選択された要素からクラスを削除します
ＣＳＳクラスの追加 addClass の例： はSample 05-01をご覧ください。
jQueryでＨＴＭＬ要素（タグ）も追加したり、削除したり、また内容の変更もしたりすることが出来ます。
$("セレクタ").append("新しい子要素"); 親要素の一番下に新しい子要素を追加します
$("新しい子要素").append("セレクタ"); 新しい子要素を親要素の一番下に追加します
$("セレクタ").preppend("新しい子要素"); 親要素の一番上に新しい子要素を追加します
$("新しい子要素").preppend("セレクタ"); 新しい子要素を親要素の一番上に追加します
$("新しい兄弟要素").before("兄弟要素"); 新しい兄弟要素を兄弟要素の前に追加します
$("新しい子要素").after("兄弟要素"); 新しい兄弟要素を兄弟要素の後に追加します
$("セレクタ").text("新しいテキスト"); セレクタで指定した要素のテキストを書換えます
$("セレクタ").html("新しいＨＴＭＬ"); セレクタで指定した要素のＨＴＭＬを書換えます
ＨＴＭＬタグ要素の追加・削除及び変更のサンプル・プログラムは： Sample 05-02をご覧ください。
ＨＴＭＬタグ要素のテキストやＨＴＭＬタグそのものを書きかえるサンプル・プログラムは： Sample 05-02aをご覧ください。
アニメーションのメソッドはＨＴＭＬ要素を様々な方法で動かしたり、表示したりします。
$("セレクタ").show(); セレクターを表示する
$("セレクタ").hide(); セレクターを非表示する
$("セレクタ").toggle(); セレクターを表示と非表示とに交互に切り替える
$("セレクタ").slideDown(); セレクターをスライトで下がってくるように表示する
$("セレクタ").slideUp(); セレクターをスライトで上がってくるように非表示にする
$("セレクタ").slideToggle(); セレクターをslideDownとslideUpとを交互に切り替える
$("セレクタ").fadeIn(); セレクターを透明度をあげながら表示する
$("セレクタ").fadeOut(); セレクターを透明度をさげながら非表示する
$("セレクタ").fadeToggle(); セレクターをfadeInとfadeOutとを交互に切り替える
$("セレクタ").toggleClass("クラス"); セレクタを切り替えるアニメーション
画像の表示、非表示、トグル等のサンプルは： Sample 05-03をご覧ください。
クラスを切り替えてアニメーション効果をだすのサンプルは： Sample 05-04をご覧ください。
マウスを早く連打するとアニメーションの動きが乱れることがあります。これを防ぐためにアニメーションの動きを一時止める必要があります。これには2種類のメソッドが用意されています。
$("セレクタ").stop(); 前後のアニメーション・メソッドの間に入れて前のメソッドが終わるまで次の
メソッドの実行を待たせることが出来ることが出来る。
$("セレクタ").filter(":animated"); 現在アニメーション中のセレクタを選択する
$("セレクタ").not(":animated"); 現在アニメーション中でないセレクタを選択する
上の2つのメソッドはToggle形のアニメーションに有効で、これを使って連打の乱れを防ぐことが出来る。
$("セレクタ").アニメーションのメッソド(スピード,function(){
〜アニメーションが完了した時の操作〜
});
スピードはアニメーションの経過時間でミリ秒単位で指定するか、
"slow"、"normal"、"fast"の何れかで指定する。指定しないとnormalになる。
funtion()はコールバック関数と言い、アニメーションが完了した時の操作です。
これは省略可能で、指定しなければ何も起こらない。
$("セレクタ").animate(変化後のCSSプロパティ, スピード, イージング, コールバック関数）；
変化後のCSSプロパティは｛"margin-left": 40px", "margin-top", "20px"}のように複数指定可
スピードは省略可能で、指定無ければnormalとなる
イージングアニメーションの変化の仕方で、linear(定速)かswing（自然の動きで初期値）
コールバック関数は指定しないと何も起こらない。
一般形のメソッドを使ったアニメーションのサンプルは： Sample_5-5ご覧ください。
$("セレクタ").メソッド１ 一つのセレクタに複数のメソッドを付けると
.メソッド２ 連続したアニメーションの動きをさせることが出来ます。
.メソッド３ 連続的動きの乱れを防ぐために：
・ .delay(遅らせる時間ミリ秒単位)
・ .stop()
.メソッドn; が使われます。
メソッド・チェインを使った連続的動きのアニメーションのサンプルは： Sample_5-6
ご覧ください。
☆ 特殊なCSSプロパティの指定の仕方
＄（”セレクタ”）．animate({left:"+=20px"},500); 相対指定（-=20pxもある）
クリック毎に20pxづつ0.5秒かけて左へ移動する
CSSプロパティ名が英数字とアンダースコアの時、又は値が
数字の時、””が省略できる。
$("セレクタ").animate({"opacity,不透明度｝,スピード,コールバック関数）；
不透明度：0が透明、１が完全に見える状態
相対指定と不透明度を使ったアニメーションのサンプル： Sample_5-7ご覧ください。
イベントとはPC上で「マウスをクリックした」（onClick）、「ページが読み込まれた」（onLoad）など、何かが起きた時に発生するものです。JavaScriptではそのイベントに対して行う処理（イベントハンドラ）をタグの部分で指定します。
jQueryではイベントも手軽に設定できるようになっています。例えば、loadイベントは(function(){ 処理 })とするだけです。非常に簡単にできます。その他のイベントには各々イベント・メソッドが用意されています。
$function(){}; ページが読み込まれた時、処理する
$("セレクタ").click(function(){ 処理 }); セレクタがクリックされた時、処理する
$("セレクタ").dblclick(function(){ 処理 }); セレクタがダブル・クリックされた時、処理する
$("セレクタ").focus(function(){ 処理 }); セレクタが選択された状態になった時、処理する
$("セレクタ").mouseover(function(){ 処理 }); セレクタにマウスが乗せられたされた時、処理する
AjaxはAsynchronous JavaScript + XMLの略で、通常のブラウザーのURLによるサーバーへのページRequestでなく、製作者の意図したタイミングで（これが非同期的にという意味）、欲するページの部分だけを要求して、ブラウザーに表示出来るというJavaScript
の機能を言います。この機能をJavaScriptのHTTP通信機能と言います。
JavaScriptだけではこの機能を使いこなすのは少々難しいのですが、jQueryにはより易しく使えるようなメソッドが用意されています。
$("セレクタ").load("ファイル・パス"); セレクタにパスで指定されたファイルを読み込む
$("セレクタ").load("ファイル・パス セレクタ"); セレクタにパスで指定されたファイルの
セレクタ部分だけをを読み込む
Ajaxのloadメソッドを使ったサンプル： Sample_5-8ご覧ください。
Ａｊａｘ通信のloadメソッドでは読み込めるデータ・タイプはＨＴＭＬファイルに限られていましたが、この$.ajax命令を使うとＨＴＭＬだけでなく、ＴＥＸＴやＸＭＬ等の色々なデータを読み込むことが出来ます。
$.ajax({
url : "ファイルのパス",
dataType : "html or xml or text", // 読み込むデータ・タイプを指定する
success : function(data){
// 読み込みが成功した時に実行する処理
}
});
// 残念ながらajaxのloadメソッドのように選んだファイルの一部だけを取り出して表示は出来ない。
それをするためには、元のファイルを選んだものを指定しておかねばならない。
$.ajax命令を使ったサンプル： Sample_5-9ご覧ください。
var timerID = setInterval(function(){ ☆ 実行間隔で指定したインターバルで繰り返し処理をする方法
定期的に実行する処理
｝, 実行間隔); 実行間隔を設定する
var timerID = setInterval(function(){ ☆指定した待ち時間のあとで1回だけ処理をする方法
clearInterval(timerID); 設定したiインターバルをリセットとして、一回だけの処理とする
1回だけ実行する処理
｝, 待ち時間）； 実行間隔が１回なので結果的に待ち時間となる
タイマー処理のサンプル： Sample_5-10をご覧ください。
$.ajax命令とタイマー処理を組み合わせたより複雑なサンプルは： Sample_5-11をご覧ください。
htmlの<a>タグは本来の機能は他のページへリンクするためのものですが、それ以外にもJavaScriptの関数を起動するボタンとしても使われます。
この場合は、 <a id="button" href="#">関数実行ボタンの表示</a>
としますが、リンクとしての機能を抑えるために必要なことがあります。
方法１ $("a#button").click(function(){
〜クリックした時の処理〜
return false; // この命令を最後に付け加えておく必要があります
});
方法２ $("a#button").click(function(e){ // パラメターeを指定して
e.preventDefault(); // この命令を最後に付け加えておく必要があります
〜クリックした時の処理〜
});
jQueryのTextやHTMLやCSSのメソッドは指定したセレクタの内容を書き換える働きがありましたが、書き換える内容を指定しないと、逆に指定したセレクタのその折の中身を取得する働きをします。
$("セレクタ").html(); // 指定したセレクタの中身をHTMLとして取り出す
$("セレクタ").textl(); // 指定したセレクタの中身をtextLとして取り出す
$("セレクタ").css("プロパティ"); // 指定したセレクタのプロパティの中身を取り出す
$("セレクタ").attr("属性名"); // 指定したセレクタの属性の中身を取り出す
$("セレクタ").remove(); // 指定したセレクタを削除する
$("リストや配列などのセレクタ").each(function(){ //一つの要素に対する処理を繰り返し行う
〜リストや配列など一つの要素に対する処理〜
});
eachメソッドを使って中身を取り出すサンプルは： Sample_5-12をご覧ください。
これまで学習してきましたjQueryのメッソッド（これをjQueryのコアーとも言います）を使って色々なプログラムを作ることが出来ますが、jQueryは世界中の色々なプラットフォームの利用者がjQueryを使って既に作成し、ネット上に無料で公開しているライブラリーが多数存在しますので、それらのライブラリーを利用するとより一層簡単に複雑なプログラムを作成することが出来ます。
これらのライブラリーは正式にはjQueryにある特殊な機能を追加するという意味で「jQueryのアドオン・ライブラリー」と言われています。殆どの場合、「jQueryのアドオン・ライブラリー」はjQueryのコアの部分に新たなメソッドを追加するという形で使用できるようになっています。 例えば、イメージのロール・オーバー・ライブラリーではコアー機能にない「rollover」という新しいメソッドが追加されて使えるようになっており、ＨＴＭＬ頁の中の一連の#listと名付けたリストの中にあるimgにロール・オーバー機能を付けるには；
$("#list img").rollover(); というjQuery共通の簡単なコーディングを書けばよいようになっています。
| サイトのトップへ | JavaScriptの目次へ | 第１章へ戻る | 第６章へ進む |