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>
