TECH I.S.

jQueryセレクター


jQueryセレクターは、jQueryライブラリーの最も重要な部分の1つです。


jQueryセレクター

jQueryセレクターを使用すると、HTML要素を選択して操作できます。

jQueryセレクターは、名前、ID、クラス、タイプ、属性、属性の値などに基づいてHTML要素を「検索」(または選択)するために使用されます。CSSセレクター、さらに、いくつかの独自のカスタムセレクターがあります。

jQueryのすべてのセレクターは、ドル記号と括弧$()で始まります。


要素セレクター

jQuery要素セレクターは、要素名に基づいて要素を選択します。

次のように、ページ上のすべての<p>要素を選択できます。

<div>$("p")</div>

ユーザーがボタンをクリックすると、すべて<p>要素は非表示になります。

$(document).ready(function(){   $("button").click(function(){     $("p").hide();   }); });

#idセレクター

jQuery#idセレクターは、HTMLタグのid属性を使用して特定の要素を見つけます。

idはページ内で一意である必要があるため、単一の一意の要素を見つけたい場合は#idセレクターを使用する必要があります。

特定のIDを持つ要素を見つけるには、ハッシュ文字を書き、その後にHTML要素のIDを続けます。

<div>$("#test")</div>

ユーザーがボタンをクリックすると、id="test"を持つ要素が非表示になります。

$(document).ready(function(){   $("button").click(function(){     $("#test").hide();   }); });

.classセレクター

jQueryの.classセレクターは、特定のクラスを持つ要素を見つけます。

特定のクラスの要素を検索するには、ピリオド文字を書き、その後にクラスの名前を続けます。

<div>$(".test")</div>

ユーザーがボタンをクリックすると、class="test"を持つ要素が非表示になります。

$(document).ready(function(){   $("button").click(function(){     $(".test").hide();   }); });

jQueryセレクターのその他の例

構文 解説
$("*") すべての要素を選択します
$(this) 現在のHTML要素を選択します
$("p.enter") class="intro"を持つすべての<p>要素を選択します
$("p:first") 最初の<p>要素を選択します
$("ulli:first") 最初の<ul>の最初の<li> 要素を選択します
$("ul li:first-child") すべての<ul>の最初の<li>要素を選択します
$("[href]") href属性を持つすべての要素を選択します
$("a[target='_blank']") target属性値が「_blank」に等しいすべての <a>要素を選択します
$("a[target!='_blank']") target属性値が「_blank」に等しくないすべての<a>要素を選択します
$(":button") type="button"のすべての<button>要素と<input>要素を選択します
$("tr:even") 偶数の<tr>要素をすべて選択します
$("tr:odd") すべての奇数の<tr>要素を選択します

jQueryセレクターテスターを使用し、さまざまなセレクターのデモを行って下さい。

すべてのjQueryセレクターの完全なリファレンスについては、jQueryセレクターリファレンスを参照してください。


別ファイルの関数

Webサイトに多くのページが含まれており、jQuery関数の保守を容易にしたい場合は、jQuery関数を別の.jsファイルに入れることができます。

このチュートリアルでjQueryをデモンストレーションするとき、関数は直接<head>セクションに直接追加されます。ただし、次のように別のファイルに配置する方が望ましい場合もあります (.jsファイルを参照するにはsrc属性を使用します)。

<head> <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <span class="marked"><script src="my_jquery_functions.js"></script></span> </head>



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細