jQuery 基礎教程

jQuery エフェクト

jQueryの最も基本的な概念は「要素を選択して処理する」です。

jQueryの選択子は、ウェブページ内のHTML要素を「検索」（または選択）できるようにします。

jQueryはほとんどのCSS3選択子および一部の非標準選択子。

jQueryのすべての選択子は、ドル記号と括弧で始まります：$()。

jQueryの要素選択子は、要素名に基づいて要素を選択するために使用できます。

ページ上のすべて<p>要素を選択し、以下のようにハイライト表示します：

$("p")

ユーザーがボタンをクリックした場合、以下のjQueryコードは、すべて<p>要素：

例

$("document").ready(function() {
　　$("button").click(function() {
　　　　$("p").css("background-color", "yellow");
　　});
});

jQuery #id選択子はHTMLマークアップのid属性特定の要素を検索するために使用されます。

要素のIDはページ内で一意であるべきであり、したがってID選択子は一意の要素を選択するために使用されます。

特定のIDを持つ要素を検索するには、井号（#）文字にHTML要素のIDを続けます：

$("#demo")

ユーザーがボタンをクリックした場合、以下のjQueryコードは、id="demo"を持つ要素を選択し、ハイライト表示します：

例

$("document").ready(function() {
　　$("button").click(function() {
　　　　$("#demo").css("background-color", "yellow");
　　});
});

jQuery .class選択子は特定のクラス名を持つ要素を検索します。

特定のクラスを持つ要素を検索するには、句点（.）文字にクラス名を続けます：

$(".demo")

ユーザーがボタンをクリックした場合、以下のjQueryコードは、class="demo"を持つすべての要素を選択し、ハイライト表示します：

例

$("document").ready(function() {
　　$("button").click(function() {
　　　　$(".demo").css("background-color", "yellow");
　　});
});

必要に応じて、複数の選択子を選択できます。選択子をカンマで区切ります。

複数の選択子を使用して、指定された選択子の組み合わせ結果をすべて選択します：

$("selector1, "selector2, "selectorN")

以下のjQueryコードは、各<h2>、<div>および<span>要素：

例

$("document").ready(function() {
　　$("h2, "div", "span")".css("background-color", "lightgreen");
});

異なる選択子に対して同じ操作を実行したい場合、非常に便利です。

jQueryは特定のHTML要素を選択するためのさまざまな方法を提供しています。

完全な選択子リファレンスについては、私たちのjQuery選択子リファレンス。