jQuery構文
jQueryを使用すると、HTML要素を選択(クエリ)し、それらに対して「アクション」を実行します。
jQuery構文
jQuery構文は、HTML要素を選択し、要素に対して何らかのアクションを実行するためにカスタマイズされています。
基本的な構文は次のとおりです。$(selector).action()
- jQueryを定義/アクセスするための$記号
- HTML要素を「クエリ（または検索）」するための(selector)
- 要素に対して実行されるjQueryアクション()
例:
$(this).hide()- 現在の要素を非表示にします。
$("p").hide()- すべての<p>要素を非表示にします。
$(".test").hide()- class="test"ですべての要素を非表示にします。
$("#test").hide()- id="test"で要素を非表示にします。
CSSセレクターについてご存知ですか?jQuery はCSS構文を使用して要素を選択します。セレクターの構文については、このチュートリアルの次の章で詳しく説明します。
ヒント：CSSがわからない場合は、こちらのCSSチュートリアルをお読みください。ドキュメント準備完了イベント
この例のすべてのjQueryメソッドがドキュメント準備完了イベント内にあることに気付いたかもしれません。
<div>$(document).ready(function(){
<i>// jQuery methods go here...</i>
});</div>
これは、ドキュメントの読み込みが完了する(準備が整う)前にjQueryコードが実行されるのを防ぐためです。
ドキュメントが完全にロードされ、準備が整うまで待ってから作業することをお勧めします。これにより、ドキュメントの本文の前、headセクションにJavaScriptコードを配置することもできます。
ドキュメントが完全に読み込まれる前にメソッドが実行された場合に失敗するアクションの例を次に示します。
- まだ作成されていない要素を非表示にしようとしています
- まだロードされていない画像のサイズを取得しようとしています
ヒント：jQueryチームは、ドキュメント準備完了イベント用のさらに短いメソッドも作成しました。
<div>$(function(){
<i>// jQuery methods go here...</i>
});</div>
好みの構文を使用してください。コードを読むと、ドキュメントの準備完了イベントの方が理解しやすいと思います。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。