JSの書き方(1)

　お久しぶりです、例の新人です。

　今回はJavaScriptの記述方法、特にjQueryの書き方について学んだことを記述します。

　jQueryは、JavaScriptライブラリ（JavaScriptの使用頻度の高い機能や効果などのプログラムを再利用できる形にまとめたもの）の1つで、主にWebブラウザや小〜中規模のWebアプリケーションに利用されています。

①jQueryのセレクタ
　セレクタ（セレクターとも）とは、HTML上の要素を選ぶ記述のことです。処理を実行したい要素のIDやクラス等を記述することで、その要素に対して処理を実行することができます。セレクタの使い方は、CSSのそれとよく似ています。
　セレクタの記述方法は、以下のものが基本となっているようです。

　(1)基礎部分
　　基礎となる書き方は、以下のような$から始まるものです。
　$(【セレクタ】).【実行したい処理】;

　(2)IDセレクタ
　　シャープ（#）で始まるセレクタは、IDから要素を選択する場合のものであり、以下のように記述します。
　$("#【選択する要素のID】").【実行したい処理】;

　(3)クラスセレクタ
　　ドット（.）で始まるセレクタは、クラス名から要素を選択する場合であり、以下のように記述します。
　$(".【選択する要素のクラス名】").【実行したい処理】;

　(4)要素セレクタ
　　「div」や「p」等、要素のタグ名がそのまま記述されるセレクタは、そのタグ名の要素全てを選択する場合のものであり、以下のように記述します。
　$("【選択する要素のタグ名】").【実行したい処理】;
　　また、要素セレクタとクラスセレクタを合わせることで、以下のように特定の要素の中から特定のクラスを選択して処理を実行する記述もできます。
　$("【選択する要素のタグ名】.【選択する要素のクラス名】".【実行したい処理】;

　(5)属性セレクタ
　　「type」、「name」等、要素の属性名から選択する場合のものであり、以下のように記述します。
　$("[【選択する要素の属性名】]").【実行したい処理】;
　　また、こちらもクラスセレクタと同様に要素セレクタと合わせることで、以下のように特定の要素の中から特定の属性を選択して処理を実行する記述もできます。
　　$("【選択する要素のタグ名】[【選択する要素の属性名】]").【実行したい処理】;

　(6)属性＝値セレクタ
　　属性セレクタの発展型で、選択したい属性から更に値を指定して要素を選択する場合のものであり、以下のように記述します。
　$("[【選択する要素の属性名】='【選択する属性の値】']").【実行したい処理】;
　　また、属性セレクタと同様の記述方法で、以下のように特定の要素の中から特定の値の属性を選択して処理を実行させることができます。
　$("【選択する要素のタグ名】[【選択する要素の属性名】='【選択する属性の値】']").【実行したい処理】;

　(7)子孫セレクタ
　　「div」の中の「p」のような、子孫要素を選択する場合のものであり、以下のように記述します。
　$("【選択する子孫要素の親要素】 【選択する子孫要素】").【実行したい処理】;
　　親要素と子孫要素の間には空白が入ることに注意してください。

　(8)全称セレクタ
　　アスタリスク（*）のセレクタは、全ての要素を選択する場合のものであり、以下のように記述します。
　$("*").【実行したい処理】;

　(9)複数のセレクタ
　　複数のセレクタがカンマ（,）で区切られて記述されているセレクタは、複数の要素をまとめて選択する場合のものであり、以下のように記述します。
　$("【セレクタ】,【セレクタ】,...,【セレクタ】").【実行したい処理】;

②要素を非表示にする際のjQueryの「hide()」と「css()」の違い
　ある要素を非表示にする際のjQueryの記述の仕方には、「hide()」を使う方法と「css()」を使い「visibility」属性を非表示に設定する方法があります。それぞれの記述方法と特徴は以下の通りです。

　(1)「hide()」を使う場合
　$("【非表示にしたい要素のセレクタ】").hide();
　　非表示にした要素のあった領域は、要素が非表示になった分だけ他の要素が詰められます。
　　また、このjQueryの記述はCSSにより以下の記述で代替できます。
　【非表示にしたい要素のセレクタ】{
　　display: none;
　};

　(2)「css()」を使う場合
　$("【非表示にしたい要素のセレクタ】").css("visibility","hidden")
　　非表示にした要素のあった領域は確保されたまま非表示になります。つまり、2つの要素に挟まれた要素を非表示にした場合、非表示になった要素の分だけ2つの要素の間には空白が出来ます。
　　また、このjQueryの記述はCSSにより以下の記述で代替できます。
　【非表示にしたい要素のセレクタ】{
　　visibility: hidden;
　};

　次回はイベントについて記述します。