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 セレクター構文の組み合わせです。このチュートリアルの次の章では、セレクター構文について詳しく学習します。 |
ドキュメント準備完了イベント
お気づきかもしれませんが、この例では、すべての jQuery 関数がドキュメント準備完了関数内に配置されています:
$(document).ready(function(){
/ / jQuery コードの作成を開始します...
});
/ / jQuery コードの作成を開始します...
});
これは、ドキュメントが完全にロードされる (準備が整う) 前に jQuery コードが実行されるのを防ぐためです。
ドキュメントが完全にロードされる前に関数を実行すると、操作が失敗する可能性があります。以下に 2 つの具体的な例を示します:
- 存在しない要素を非表示にしようとする
- 不完全にロードされた画像のサイズを取得する
ヒント: 簡潔な記述 (上記と同じ効果):
$( function( ){
// jQuery コードの作成を開始します...
});
// jQuery コードの作成を開始します...
});
ドキュメントの準備ができたら、好みのメソッドを選択して jQuery メソッドを実行できます。