JavaScriptのｊQueryを使う

JavaScriptのライブラリー（jQuery)がダイナミックなWebページを作るのに便利です。このライブラリーはＪａｖａＳｃｒｉｐｔで 構文を作り変えていますので、利用するためにはその文法に適合したオブジェクトを使います。そのオブジェクトの使い方を通常のJavaScriptの関数と比べると次のようになります。

JavaScript関数＝＞function name( ) { description　}

ｊQueryのオブジェクト＝＞$(function ( ) { argument } )

ｊQueryでは　var　＄　＝'ｊQuery'　と置き換えていますので、オブジェクト ｊQuery （ ）の代わりに＄( )を使っています。 これでワンクリックやマウスオーバーでスタイルシートを切り替えたり、 要素の追加や削除などのダイナミックな変更を容易に行うことができます。 さらにブラウザによる表示の違いも吸収してくれます。次にいくつかのサンプルを作ってみましょう。
 動作  画像 id="sample1"  argumentのコードとタグ
マウスを置いたらフェードアウトしフェードインをするサンプル :
 $("#sample1").mouseover(function(){
$("#sample1").fadeOut(2000).fadeIn(3000);


<IMG id="sample1" 画像>
   画像 id="sample2"   argumentのコードと表示文字のスタイルシート
 マウスを置いたら説明の文字が現れるサンプル:
　　　
$("#sample2").hover(
　　function(){$(".comment").css("display","")},
　　function(){$(".comment").css("display","none")}　);

<DIV id="sample2" style="position:relative;"><IMG　画像><P class="comment" style="display:none;font-size:18pt;position:absolute; top:100px; left:100px;color:white;" >表示文字</P></DIV>
   画像 id="sample3"   argumentのコードと画像のスタイルシート
マウスを置くと位置が変わる画像のサンプル 
 $("#sample3").mouseover(function(){
$("#sample3").animate({left:"300px"},3000).animate({left:"0px"},2000);
});

 <IMG id="sample3" 画像 style="position:relative;top:0;left:0">
   画像 id="sample4"   argumentのコードとタグ
 ドラッグして位置を変えることができます。もう一度クリックすると元に戻ります。
 　　　　　 　　　 $("#sample4").draggable(); //position=relative;
$("#sample4").click(function(){
$("#sample4").css({"top":"0px","left":"0px"});
})

 <IMG id="sample4" 画像>


最後の例はjQuery　UIという別のライブラリーも必要です。これらのライブラリーは右のようにページの前部に組み込んでおきます。 ダウンロードは下記より行います。
jQuery：http://jquery.com/
jQuery-UI：http://jqueryui.com/

参考書も沢山あるのでネットで検索してみましょう。		  <html><head>
<title></title>
<script type="text/JavaScript" src="jquery/jquery-1.4.2.min.js"></script>
<script type="text/JavaScript" src="jquery/jquery-ui-1.8.custom.min.js"></script>
<script languge="javascript"><!--
$(function(){ argument })
//--></script>
</head><body>HTML_tag</body></html>

参考：JavaScriptとｊQueryとでつくってみました＝＞「花選び」
花のページは別に作り、それぞれの花画像にname="番号"をつけておきます。それを下記のフレームにハッシュで呼び出します。

<IFRAME id="hana" name="sentaku" src="hana/hana.htm" height="191" width="238" frameborder="0" scrolling="no"></IFRAME>

押釦を押すと右のファンクションgoto_findを呼び出します。そのファンクションの中でｊQueryの手続き$()を呼び出しています。		 function goto_find() {
　$("#hana").css("display","none").slideToggle(2000);
　inword= document.dictionary.word.value;
　var num=0; index="00";
　if (inword) {
　　for (i=0;i<inword.length;i++){
　　　　if (inword.charAt(i)!=' '){num=num+inword.charCodeAt(i);}
　　}
　num=num%6+1; index="0"+num.toString(); //max flower=6;
　} 　self.sentaku.location.hash=index;
}

参考：ｊQueryを使ったメニューの色々

ｊQueryを使って、ドロップダウンメニューやアコーデオンメニューなど色々な形式のメニューも作成できます。
サンプル例はこちらを参照ください。＝＞http://jsajax.com/jQuery.aspx