前回DOMによる様々なノードの取得を行いました。
その際は単純にHTMLを操作するだけでした。しかしJavascriptのライブラリを使用すると簡単な記述でさらに「動き」を加えることができます。

Javascriptライブラリとは？

規則的にまとめられたプログラムパーツの集まりをいいます。関数を1つ呼び出すだけで動作させることができます。

ダウンロード

ライブラリには色々な種類がありますが、今回使用するのは「jQuery」です。
ダウンロードはこちらから

jQueryをダウンロードして、それを読み込ませます。
[sourcecode language=’HTML’]


[/sourcecode]
jQueryを使用して記述しますので、読み込ませる順番は1番最初です。
その後に、こちらで記述するJavascriptを読み込ませます。

jQueryの実行

jQueryを使用せずにJavascriptを実行する場合は下記を記述します。
[sourcecode language=’javascript’]
window.onload = function() {
}
[/sourcecode]
しかしこれだとHTMLの画像などを読み込まれた後に実行されます。
このサイトの最初のページの猫の上にある吹き出しがいい例です。

jQueryだとdocumentを読み込むのを監視して実行されます。
[sourcecode language=’javascript’]
$(document).ready(function() {
});
[/sourcecode]

Toggleを指定して要素を開閉させる

jQueryの記述

とても簡単な記述でスムーズな開閉が実現します。
[sourcecode language=’javascript’]
$(‘h1’).click(function(){ //h1をクリックすると
$(‘.navi’).slideToggle(‘slow’); //class=”navi”が開閉する
});
[/sourcecode]
DOMだとgetElementByIdなどが必要ですが、jQueryだと$と記述するだけで要素を取得できます。
後は.slide Toggleを入れるだけで開閉します。slowは開閉スピードです。

サンプル

こちらにサンプルを用意しております。

1. Web-Parkのホーム > 
2. Javascript > 
3. jQueryでスムーズな開閉