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

Javascriptライブラリとは？

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

ダウンロード

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

jQueryをダウンロードして、それを読み込ませます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="test.js"></script>

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

jQueryの実行

jQueryを使用せずにJavascriptを実行する場合は下記を記述します。

window.onload = function() {
}

しかしこれだとHTMLの画像などを読み込まれた後に実行されます。
このサイトの最初のページの猫の上にある吹き出しがいい例です。

jQueryだとdocumentを読み込むのを監視して実行されます。

$(document).ready(function() {
});

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

jQueryの記述

とても簡単な記述でスムーズな開閉が実現します。

$('h1').click(function(){ //h1をクリックすると
$('.navi').slideToggle('slow'); //class="navi"が開閉する
});

DOMだとgetElementByIdなどが必要ですが、jQueryだと$と記述するだけで要素を取得できます。
後は.slide Toggleを入れるだけで開閉します。slowは開閉スピードです。

サンプル

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

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