jQuery クエリ セレクター
jQuery では、querySelector() または querySelectorAll() メソッドを介してセレクターを選択しません。 これらの方法は JavaScript で定義されており、jQuery は依然として、HTML 属性 id および class に基づいて個別にセレクターを示すプリミティブ パスにあります。
ここでは、次の内容で、jQuery の場合に querySelector() メソッドがどのように機能するかを調べます。 jQuery はこのメソッドに応答しませんが、jQuery の方法でプロセスを確認します。
id および class セレクターを使用する
id をセレクターと見なす場合、セレクターとして id の名前を記述する前に # 記号を付ける必要があります。 これがidと言う識別キャリアです。
また、class の場合は、. を使用する必要があります。 セレクターとして class 名を追加する前に。 他の ids、classes、または elements を使用して、他のセレクターのケアで機能を明示的に定義することもできます。
デモンストレーションを見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>id selector</title>
</head>
<body>
<div id="pink" style="height: 100px; width: 100px">
<div class="purple" style="height: 50px; width: 50px"></div>
<div id="buff" style="height:60px"></div>
<button onclick="btn()">Click</button>
<script>
function btn(){
$("#pink").css("background-color", "pink");
$(".purple").css("background-color", "purple");
}
</script>
</div>
</body>
</html>
出力：
この点に関して、2つの div 要素を選択しましたが、どちらも ID トレーサーを持っています。 親 div には関連付けられた id がありますが、クラスは明示的に 2 番目の div を定義します。
class と id を一緒に言及することもできました。 それがどのようにできるか見てみましょう。
コード スニペット 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>id selector</title>
</head>
<body>
<div id="pink" style="height: 100px; width: 100px">
<div class="blue" style="height: 50px; width: 50px"></div>
<div class="purple" style="height: 50px; width: 50px"></div>
</div>
<div id="buff" style="height:40px"></div>
<button onclick="btn()">Click</button>
<script>
function btn(){
$("#pink").css("background-color", "pink");
$("#pink .purple").css("background-color", "purple");
$('#pink .blue').css("background-color", "powderblue");
}
</script>
</div>
</body>
</html>
出力 2:
:eq() およびその他のフィルターベースのセレクターの使用
jQuery には querySelectorAll() メソッドがありませんが、特定の選択を明示的に定義できます。 elements、class、および id は、複数のエントリがある場合にインデックスが作成されます。
[0]th インデックス付き要素としてカウントされるエントリは 1つだけです。
そのため、ここでは、jQuery の :eq() 拡張機能と :odd() フィルターの使用例を示して、ページ フローで行いたい正確な変更を出力します。
セレクターを選択するには、他にも複数の規則が利用可能であり、この記事の概念とほとんど同じ記事にアクセスすることもできます。
コードフェンスに飛び込みましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>id selector</title>
</head>
<body>
<table border=2>
<tr><td>D0</td><td>D1</td></tr>
<tr><td>D2</td><td>D3</td></tr>
</table>
<div id="buff" style="height:10px"></div>
<button onclick="btn()">Click</button>
<script>
function btn(){
$("td:eq(2)").css("background-color", "powderblue");
$("td:odd").css("background-color", 'violet');
}
</script>
</div>
</body>
</html>
出力：
テーブル データの 2nd 要素の構成は異なります。 この場合、:eq() を使用してインデックス位置を取得しました。
また、インデックスは 0 から始まることに注意してください。 selector メソッドとインデックスの違いを理解するために、テーブル データの odd() インデックスに異なる色合いを付けました。
