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

jQuery 语法实例

$(this).hide()
現在の HTML 要素を非表示にする jQuery Hide() 関数を示します。
$("#test").hide()
id="test" を使用して要素を非表示にする、jQuery Hide() 関数を示します。
$("p").hide()
すべての <p> 要素を非表示にする jQuery Hide() 関数を示します。
$(".test").hide()
class="test" を使用してすべての要素を非表示にする、jQuery Hide() 関数を示します。

jQuery 構文

jQuery 構文は HTML 要素を選択するためにコンパイルされ、要素に対して特定の操作を実行できます。

基本的な構文は次のとおりです: $(selector).action()

  • ドル記号の定義 jQuery
  • HTML 要素の「クエリ」および「検索」セレクター
  • jQuery の action() は要素に対して操作を実行します

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

$("p").hide() - すべての段落を非表示にする

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

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

ヒント: jQuery で使用される構文は、XPath と CSS セレクター構文を組み合わせたものです。 このチュートリアルの次の章では、セレクター構文について詳しく学習します。

ドキュメント準備機能

この例では、すべての jQuery 関数が document ready 関数内に配置されていることに気づいたかもしれません。

$(document).ready(function(){

  // jQuery functions go here

});

これは、ドキュメントが完全にロードされる (準備が整う) まで jQuery コードが実行されないようにするためです。

ドキュメントが完全にロードされる前に関数を実行すると、操作が失敗する可能性があります。 以下に 2 つの具体的な例を示します。

  • 存在しない要素を非表示にしようとしています
  • 完全にロードされていない画像のサイズを取得する