JavaScriptはWebサイトのユーザビリティを向上したり、魅力的なビジュアルエフェクトを与える際に不可欠な言語です。

とはいえ、OSやWebブラウザによって挙動が異なる場合があり、ときには複雑で拡張性にかけるコードになってしまうことがあります。


動作環境の違いに対応し、信頼性の高いコードをスピーディに記述できるライブラリが数多く発表されてきましたが、そのなかで最も注目されているのがjQueryです。

jQueryはファイルサイズが小さい為動作が軽く、基本となるイベントの操作やDOM、ビジュアルエフェクトやAjaxなど、実用的な多くの機能を標準でサポートしています。

HTML・CSSの知識や概念が応用できたり、ほかのJavaScriptライブラリとの競合が回避出来たり、拡張性が高いのもJqueryのメリットといえます。

通常JavaScriptで何らかの機能を実装する場合は、イベントハンドラなどを利用して、WebブラウザがHTMLや画像などの部品を読込後スクリプトが動作するようにします。

これはJavaScriptでブラウザにまだ読み込まれていない要素に対して操作を行おうとするとエラーになってしまうためです。

ただし、WebページがWebブラウザに表示されてから動作が開始するためスクリプトの読込が終了するまでの間ユーザーがなにか操作を行った際にいとしない動作になってしまうこともあります。

JQueryではそれを防ぐ為に「$(document).ready()」というイベントが用意されています。

ready()を利用することでWebページが完全に読み込まれていなくてもHTMLの準備が整った時点でスクリプトの実行を開始することができます。

構文：$(document).ready(処理の内容);

記述例：$(document).ready(function(){
　　　　　// ここに処理を記述
　　　　});

構文：$(function(){処理の内容});

記述例：$(function(){
　　　　　//ここに処理を記述
　　　　});

スクリプトの中では、取得した要素に対して複数の処理を連続して実行したいことがあります。

次の例では「hoge」のID名をもつdiv要素内のp要素を非表示にし、class名を”abcde”から”text”に変更した後、再表示します。

記述例：
$(“div#hoge p”).hide();
$(“div#hoge p”).removeClass(“abcde”);
$(“div#hoge p”).addClass(“text”);
$(“div#hoge p”).show();

記述例：
$(“div#hoge p “).hide().removeClass(“abcde”).addClass(“text”).show();

記述例：
$(“div#hoge p “)
　.hide()
　.removeClass(“abcde”)
　.addClass(“text”)
　.show();