jQuery構文

jQueryを使用すると、HTML要素を選択（クエリ）して、それらに対して「アクション」を実行できます。

jQuery構文

jQuery構文は、HTML要素を選択することによって、選択した要素に対してある特定の操作を実行します。

基本構文

$(selector).action()

• ドル記号(＄)でjQueryを定義します。
• セレクター（selector）でHTML要素を“照会”または“検索”します。
• jQueryのaction()は、要素に対して操作を実行します。

実例

• $(this).hide()-現在の要素を非表示にします。
• $(“p”).hide()-すべての<p>要素を非表示にします。
• $(“p.test”).hide()-class=”test”ですべての<p>要素を非表示にします。
• $(“#test”).hide()-id=”test”で要素を非表示にします。

CSSセレクターのことをご存じですか？

jQueryで使用される構文は、XPathとCSSセレクター構文の組み合わせです。これからの章節ではセレクター構文について詳しく説明します。

ドキュメントレディ（document ready）イベント

この例ではすべてのjQuery関数がドキュメントレディ（document ready）関数に含まれていることに気付いたかもしれません。

$(document).ready(function(){ //jQueryコードを記述する… });

これは、ドキュメントが完全に読み込まれる（準備ができる）前にjQueryコードが実行されないようにするためです。つまり、DOMが読み込まれた後にDOMを操作できます。

ドキュメントが完全に読み込まれる前に関数を実行すると、操作が失敗するかもしれません。次には2つの具体的な例です。

• 存在しない要素を非表示にします。
• 完全に読み込まれていない画像のサイズを取得します。

ヒント：簡潔な書き方（上記と同じ効果である）

$(function(){ // jQueryコードを記述する… });

上記の2つのメソッドでドキュメントの準備ができた後、jQueryメソッドを実行できます。