jQueryのテスト結果の個人用メモです。
関連ページ（実例）
「セレクタの指定方法」
「jQuery関数の起動」
「jQueryによる外部ファイル読込・表示」
同上。さらに多様な例がある。
「jQueryによる外部ファイルのiframeへの読込」
「jQueryによる表示・非表示（toggle）」
「マウスカーソルの動作（hover）」
jQueryは、JavaScriptライブラリの１つです。ＭＩＴのライセンスですが、無料で利用することができます。また、jQuery（の本体）を用いて。多様な機能を追加したアドオンが多くの人により開発され提供されています。
iQueryは頻繁にバージョンアップされており、1.6.2とか1.10.2などと附番されています。最新のものほど機能の増加、処理方法の改善が図られいますが、廃止される機能もあります。そのため、古いバージョンを利用したアドオンを使うときは、新バージョンでは機能しないこともあります。
本格的に利用するのであれば、また、オフライン状況でも利用したときは、jQuery.jsのソースファイルをダウンロードして使います。
http://jquery.com/からダウンロードできます。旧バージョンも揃えてあります。
単一のファイルで、コメントや改行や空白を設けて見やすい形式の Uncompressed 版でも300kb未満、それらを除去した Minified 版（minと略称）では100kbの軽量です。
ダウンロードしたjQuery（文字コードを UTF-8 にします）を、例えば iquery/iquery-1.10.2.min.js としてＰＣに保存しているならば、head部に
<script tupe="text/javascript" src="iquery/iquery-1.10.2.min.js"></script> （Ａ）
を設定します。
jQueryをダウンロードしなくても、iQueryをオンラインで提供しそれを読み込んで使用することができます。そのようなサービスをＣＤＮ（Content Delivery Network）といいます。jQuery、Google、Microsoftが有名です。
その場合は、Ａのsrc部分を次のようにscriptを記述します。
src="http://code.jquery.com/jquery-1.5.1.min.js"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"
新バージョンが出現するたびに、これを書き換えるのは面倒です。jQueryサイトでは
src="http://code.jquery.com/jquery-latest.js"
により、自動的に最新のものが利用できるようになっています。
私は、使えないアドオンがある危険性がありますが、手抜きをモットーに、これを用いて
<script tupe="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
としています。
ｊQueryのスクリプトの構造を、実行の引金となる記述をＨＴＭＬ側で書くか、スクリプト側で書くかで区分します。
<script>
function 関数() { // Ａ
// ここにjQueryの処理を記述します。
$("h4").css("color", "red"); // Ｂ
}
</script>
<input type="button" value="実行"
onclick="関数()"> <!-- Ｃ -->
</input>
ＨＴＭＬ側（Ｃ）の［実行］ボタンをクリック（onClick）したときに、スクリプト側のＡの「関数」が起動します。そして、実際の処理Ｂが行われます。
<script>
$(function() { // Ｄ
$("#実行ボタン").click( // Ｅ
function() { // F
// ここにjQueryの処理を記述します。
$(".aaa").text('class="aaa"を書き換えました'); // Ｇ
}
);
}
)
</script>
<input id="実行ボタン" type="button" value="実行"> <!-- Ｈ -->
</input>
「$」が気になりますが、とりあえず「jQueryを使うときのオマジナイ」だとしておきます。
{……} や (……) の対応に留意してください。
ＨＴＭＬのＨでは<input>に名称「id="実行ボタン」を付けています。ところがスクリプト起動の引金となる onClick がありません。
スクリプトＤでは、「fuction 関数() 」に相当するものがありません。それで、ＨＴＭＬが開かれた時点で、起動するのですが、未だ具体的な処理はされません。
起動の引金となるのが、Ｅです。「id="実行ボタン" の個所（［実行］のボタン）がクリックされたら（click）、以下の処理を行う」という意味です。
すなわち、ＨＴＭＬで行われる操作による処理を事前に記述して待機していることになります。
$("#実行ボタン").click( // Ｅ
$(".aaa").text('class="aaa"を書き換えました'); // Ｇ
);
通常のJavascriptでは、ＨＴＭＬで<body onload="関数()"> とするような場合です。引金が存在しない待機型だといえます。
この場合の記述は非常に単純です。
<script type="text/javascript">
$(function() {
// ページ表示時に実行する処理
$("#表示場所").text("自動的に書き込みました");
} );
</script>
<body onload="関数()">では、実行される関数が一つに限定されますが、jQueryでは複数の関数が実行されます。
「通常の関数型」でもページ表示時に自動的に起動できます。<script>関数();</script>とすればよいのです。
実際の処理の部分、
$("h4").css("color", "red");
$(".aaa").text('class="aaa"を書き換えました');
の一般形式は、次のようになります。
＄（セレクタ）.メソッド；
"h4"や".aaa"がセレクタ、css( )やtext( )がメソッドです。
「セレクタとはＨＴＭＬのある個所」であり、「セレクタをメソッドせよ」という意味です。
$("h4").css("color", "red");
は、<h4>～</h4>の個所（セレクタ"h4"）を文字の色を赤にせよ（css("color", "red")）という意味ですし、
$(".aaa").text('class="aaa"を書き換えました');
は、class="aaa" で囲まれた個所（セレクタ".aaa"）を'class="aaa"を書き換えました'の文字列にせよ（メソッドtext(文字列)）という意味です。
さらに「スクリプトでの記述型」では、
$("#実行ボタン").click(……);
のように、処理の引金になる記述があります。
この click などを「イベント」とといいます。
一般形式は、
$(セレクタ).イベント(……);
となります。
「セレクトがイベントしたら……をせよ」という意味です。
典型的な例を示します。
$("#表示場所).load("called.html");
とすると、親HTMLで <div id="#表示場所"></div> と記述した部分に、子HTMLファイル called.html が表示されます。
例：$("button").click(function () {
$("#aaa").toggle();
});
<p id="aaa">表示</p>
<p style="display: none">非表示</p>
<button>表示反転</button>