jQuery-Selektoren
-
Verwendung von
element selectorund#id selectorin jQuery -
Verwendung von
class selectorin jQuery - jQuery-Selektoren
jQuery verfügt über drei grundlegende Arten von Selektoren, um eine Instanz eines beliebigen HTML-Elements zu initiieren, den Elementselektor, den #id-Selektor und den .class-Selektor.
Im folgenden Abschnitt zeigen wir Beispiele, die diese grundlegenden Selektoren und ihre Funktionen behandeln, und gehen eine Liste anderer abgeleiteter Möglichkeiten von Selektoren durch.
Verwendung von element selector und #id selector in jQuery
Code-Auszug:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('button').click(function(){
$('#title').css({'color':'blue'});
});
});
</script>
</head>
<body>
<p id='title'>Text</p>
<button>Text Change</button>
Ausgang:
Im obigen Code haben wir ein Click-Event, um die Farbe des Inhalts der p-Tags zu ändern. Wir haben eine id='title', die mit dem p-Tag verknüpft ist, und ein Schaltflächenelement, um das Klickereignis auszulösen. Das Button-Element wird mit einem element selector instanziiert, und das p wird über den #id selector geholt.
Verwendung von class selector in jQuery
Code-Auszug:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('.x:even').css({'color':'red'});
});
</script>
</head>
<body>
<p class='x'>Text</p>
<p class='x'>Text</p>
<p class='x'>Text</p>
<p class='x'>Text</p>
<p class='x'>Text</p>
<p class='x'>Text</p>
Ausgang:
Wir haben einige p-Tags, gefolgt von der ähnlichen Klasse x, in Betracht gezogen und sie über den .class-Selektor manipuliert, um den Inhalt leichter verständlich zu machen.
Die gerade positionierten p-Tags wurden rot eingefärbt, und die Eigenschaft wurde ausgelöst, als wir den .class-Selektor betrachteten.
jQuery-Selektoren
Die anderen Selektoren im folgenden Segment machen den Umgang mit Webinhalten mühelos.
| Selektoren | Beschreibung |
|---|---|
$(':button') |
Dies implizierte alle <button>-Elemente und auch die <input>-Elemente mit dem button type. |
$('class/element/id:even/odd') |
Dies impliziert einen bestimmten Selektor und die gerade oder ungerade positionierten Inhalte. |
$('p.x') |
Dies impliziert ein p-Tag gefolgt von der Klasse x. |
$('*') |
Dies impliziert alle Elemente. |
$(this) |
Dies impliziert das aktuelle HTML-Element. |
$('p:first') |
Dies impliziert das erste Element des p-Tags. |
$('ul li:first') |
Dies impliziert das erste li des ersten ul. |
$('ul li:erstes Kind') |
Dies impliziert das erste li aller ul. |
$('[href]') |
Dies impliziert alle Elemente mit href. |
