jQueryを利用してナビゲーションを実装する

第3回・4回はナビゲーションの実装について説明しています。前回はアコーディオンパネルの実装を行いましたので，今回はドロップダウンメニューを実装してみましょう。まずは完成したドロップダウンメニューを見てください。

今回の記事で使うメソッドの紹介と簡単な説明

前回同様本題に入る前に，まずはドロップダウンメニューを実装するにあたって必要になるメソッドなどを紹介をしていきます。前回説明した通り，メソッドとは任意のjQueryオブジェクトに対して実行する命令文です。

jQueryオブジェクト

第1回，2回でセレクタについて説明しましたが，セレクタで取得できる要素はひとつではありません。例えば$('div')のようにすると，HTML上の全てのDIV要素をjQueryオブジェクトとして取得します。要素は配列としてHTML出現順に保存されていきます。Firebugのconsoleを使って確認してみましょう。gihyo.jpのトップページで実行してみます。gihyoのサイトではjQueryを使用していませんが，以下の手順に従ってFireQuery付属のjQuerifyを使えば，jQueryを使っていないサイトでもjQueryをロードさせることができます。

1. jQuerifyをクリックしてjQueryをロードする（jQueryを使っていないページの場合）

   

2. jQuerifyが有効になったことを確認 $jq()で使えるようになる

   

3. consoleに実行したい命令を入力する

   

4. 結果の出力

   

出力されたデータの通り，jQueryオブジェクトには複数のDIV要素が内包されています。例えばDIV要素の数を知りたいときは$('div').lengthで調べることができます。（FireQueryでは$jq('div')）

each()

eachメソッドは対象の複数のjQueryオブジェクトに対してそれぞれ関数を実行するメソッドです。関数の引数にiを持たせることで，現在のループ回数を得ることができます。前述の$('div')に対してeachメソッドを実行してみましょう。

上記のサンプルでは，DIV要素の数分，iを実行しています。

hover()

hoverメソッドは対象のjQueryオブジェクトのmouseover,mouseoutイベントに任意の関数をbindするメソッドです。hoverメソッドの第1引数にmouseover，第2引数にmouseoutにそれぞれ割り当てる関数を持たせます。hoverメソッドの簡単なサンプルを用意しましたので確認してみてください。

<ahref="#">ここにマウスカーソルをのせたり外したりしてください</a>

jQuery(function($){
  $('a').hover(function(){
    console.log('mouseover');
  },function(){
    console.log('mouseout');
  });
});

parent()

parentメソッドは対象のjQueryオブジェクトの親要素を取得して返すメソッドです。

<p><ahref="#"id="child">consoleにA要素の親要素を表示します</a></p>

jQuery(function($){
  console.log($('#child').parent());
});