jQuery-Abfrageauswahl
In jQuery wählen wir keinen Selektor über die Methode querySelector() oder querySelectorAll() aus. Diese Wege sind in JavaScript definiert, und jQuery befindet sich immer noch auf dem primitiven Weg, Selektoren basierend auf den HTML-Attributen id und class individuell zu bezeichnen.
Hier werden wir im folgenden Inhalt untersuchen, wie die Methode querySelector() im Fall von jQuery funktioniert. jQuery reagiert nicht auf diese Methode, aber wir sehen den Prozess auf jQuery-Weise.
Verwenden Sie den Selektor id und class
Wenn wir id als Selektor betrachten, muss das Zeichen # gesetzt werden, bevor der Name id als Selektor erwähnt wird. Dies ist der Identifikationsträger, um zu sagen, dass es sich um eine id handelt.
Auch im Fall von Klasse müssen wir . verwenden. bevor Sie den Namen Klasse als Selektor hinzufügen. Sie können auch andere ids, classes oder elements verwenden, um Features explizit in der Obhut anderer Selektoren zu definieren.
Sehen wir uns eine Vorführung an.
<!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>
Ausgang:
In diesem Zusammenhang haben wir zwei div-Elemente ausgewählt, und beide haben ihren Identitäts-Tracer. Das übergeordnete div hat eine zugeordnete id, während eine Klasse das zweite div explizit definiert.
Wir hätten class und id zusammen erwähnen können. Mal sehen, wie es gemacht werden kann.
Codeschnipsel 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>
Ausgang 2:
Verwendung von :eq() und anderen filterbasierten Selektoren
Auch wenn wir in jQuery keine Methode querySelectorAll() haben, können wir unsere spezifische Auswahl explizit definieren. Bei mehreren Einträgen werden die Elemente elements, class und id indiziert.
Nur ein Eintrag würde als das [0]te indizierte Element gezählt.
Hier demonstrieren wir also den Anwendungsfall der Erweiterung :eq() von jQuery und des Filters :odd(), um genau die Änderung auszugeben, die wir in unserem Seitenfluss vornehmen möchten.
Es stehen mehrere andere Konventionen zur Auswahl der Selektoren zur Verfügung, und Sie können dem Artikel einen Besuch abstatten, der dem Konzept dieses Artikels fast ähnlich ist.
Lassen Sie uns in den Codezaun eintauchen.
<!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>
Ausgang:
Das 2nd-Element der Tabellendaten ist anders konfiguriert. Und in diesem Fall haben wir :eq() verwendet, um die Indexposition zu erhalten.
Außerdem ist zu beachten, dass die Indizierung bei 0 beginnt. Bei den odd()-Indizes der Tabellendaten haben wir einen anderen Farbton verwendet, um den Unterschied zwischen den selector-Methoden und -Indizes zu verstehen.
