初学者のJavaScript メニューの表示/非表示

##jQueryとは
オープンソースライブラリの一つで、定型的な処理を書きやすくしてくれる。主に、DOM操作をする際に使用する。今回はサブメニューの表示/非表示を切り替えプログラムに使用した。

##DOM操作
DOM操作とはHTMLやCSSを書き換えたり、HTML要素にイベントを設定したりすること。

##jQueryの処理について

• イベントを設定したい要素を取得する
• 取得した要素にイベントを設定する
• イベント発火した際の処理決め、実行する

##記述の仕方

$(document).ready(function(){
  $('hoge').on('click', function(){
    $(this).next().toggleClass('fuga');
  });
});

$(document).ready(function(){});
「HTMLが読み込まれたら、functionの{}を処理する」という内容
$('.hoge').on('click', function(){});
取得したhogeの要素をクリックした際にイベント発火し、functionの{}が実行される
(this).next().toggleClass('fuga')
hoge要素をクリックした際の処理の内容として、(this)でイベント発火の要素を取得し、nextでその直後の要素を取得している。hogeの直後の要素（fuga）の表示/非表示を切り替えるための記述。hogeをクリックすることで、イベント発火し、fugaをtoggleClassメソッドで(this).next()に追加・削除を繰り返すことで、表示/非表示を切り替えている。

##メソッドのまとめ

• $('セレクタ')：jQueryで要素を取得するメソッド。取得した要素は「jQueryオブジェクト」という独自のオブジェクトに変換する。
• ('取得したい要素').on('イベント名', function(){イベント発火時の処理})：取得した要素に対し、イベントを設定する。同じ要素が複数ある場合jQueryでは対象の要素全てにイベントを設定する。
• (hoge).toggleClass('クラス名')：toggleDlassメソッドは取得した要素(hoge)にクラス名があれば削除、なければ追加をする。

さいごに

プログラミングの初学者です。その日に学んだことを学習の一環としてアウトプットしています。より深く学習していきたいと考えておりますので、ご指摘等いただけますと幸いです。

参考図書：確かな力が身につくJavaScript「超」入門　第２版　著者：加納祐東