jQueryの構文

jQuery 構文

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

jQuery 構文

jQuery 構文は、HTML 要素を選択し、選択した要素に対して特定の操作を実行します。

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

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

例:

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

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

$("p.test").hide() - すべての class= を非表示にする;p> "test" の要素

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

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

ドキュメント準備完了イベント

この例のすべての jQuery 関数がドキュメント準備完了関数内にあることに気づいたかもしれません:

$(document).ready(function(){
// jQuery コードの記述を開始します。. .
});

これは、ドキュメントが完全にロードされる (準備が整う) 前に jQuery コードが実行されるのを防ぐためです。

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

不完全に読み込まれた画像のサイズを取得するために存在しない要素を非表示にしようとする

ヒント: 簡潔な記述 (上記と同じ効果):

$(function(){
jQuery の記述を開始するcode...
});

ドキュメントの準備ができたら、上記の 2 つの方法を選択して jQuery メソッドを実装できます。


学び続ける
||
<!DOCTYPE html> <html> <head> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>这是一个标题</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> <button>点我</button> </body> </html>
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜