ホーム > >

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メソッドを実行できます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です