jQuery構文


jQueryを使用して、HTML要素を選択(クエリ)し、それらに対して「アクション」を実行します。


jQuery構文

jQuery構文は、HTML要素を選択し、要素に対して何らかのアクションを実行するためにカスタマイズされています。

基本的な構文は次のとおりです:$(セレクター)。アクション()

  • jQueryを定義/アクセスするための$記号
  • HTML要素を「クエリ(または検索)」するための(セレクター)
  • 要素に対して実行されるjQueryアクション()

例:

$(this).hide()-現在の要素を非表示にします。

$("p").hide()-すべての<p>要素を非表示にします。

$(".test").hide()--class = "test"ですべての要素を非表示にします。

$("#test").hide()-id = "test"で要素を非表示にします。

CSSセレクターに精通していますか?

jQueryはCSS構文を使用して要素を選択します。セレクター構文の詳細については、このチュートリアルの次の章で学習します。

ヒント: CSSがわからない場合は、CSSチュートリアルを読むことができます。


ドキュメントレディイベント

この例のすべてのjQueryメソッドは、ドキュメント準備完了イベント内にあることに気付いたかもしれません。

$(document).ready(function(){

  // jQuery methods go here...

});

これは、ドキュメントの読み込みが完了する(準備ができる)前にjQueryコードが実行されないようにするためです。

ドキュメントが完全に読み込まれ、準備が整うのを待ってから作業することをお勧めします。これにより、ヘッドセクションのドキュメントの本文の前にJavaScriptコードを含めることもできます。

ドキュメントが完全に読み込まれる前にメソッドが実行された場合に失敗する可能性のあるアクションの例を次に示します。

  • まだ作成されていない要素を非表示にしようとしています
  • まだ読み込まれていない画像のサイズを取得しようとしています

ヒント: jQueryチームは、ドキュメント準備完了イベント用にさらに短いメソッドも作成しました。

$(function(){

  // jQuery methods go here...

});

好みの構文を使用してください。ドキュメントの準備ができたイベントは、コードを読むときに理解しやすいと思います。