jQuery 構文

❮ 前章へ 次章へ ❯

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


jQuery 構文

jQuery 構文は、HTML 要素を選択し、その要素上のいくつかのアクションを実行するための仕立屋さんです。

基本的な構文:$(selector).action()

例:

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

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

$(".test").hide() - class="test" である全要素を非表示にします。

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

あなたは、CSS セレクタをご存知ですか?

jQuery は、要素の選択に CSS 構文を使用します。セレクタ構文の詳細は、次章で学習します。


Document Ready イベント

このチュートリアルにおける事例における 全ての jQuery メソッドは、document ready イベント内にあることに注意してください:

$(document).ready(function(){

   // jQuery methods go here...

});

これは、文書の読み込みが完了(して準備ができる)前に jQuery コードの実行を防ぐためです。

実行前に、文書が完全にロードされ、準備できるまで待つことをお勧めします。 これはまた、文書の本文前の head 部に JavaScript コードを記述することを可能にします。

ここに、文書が完全にロードされる前にメソッドを実行した場合に失敗するアクションの例を示します:

チップ: jQuery チームは、document ready イベントをより短く書く方法を作成しました:

$(function(){

   // jQuery methods go here...

});

好みの構文を使用してください。document ready イベントの方が、コードを読むときに理解しやすいと思います。


❮ 前章へ 次章へ ❯