HOWTO · jQuery

jQuery-Selektoren

Um Eigenschaften hinzufügen und HTML-Elemente manipulieren zu können, wird die Instanz berücksichtigt. Diese Instanzen werden austauschbar als Selektoren bezeichnet. Die grundlegenden jQuery-Selektoren können drei Typen haben: Elementselektor, #id-Selektor und .class-Selektor.

Von Anika Tabassum EraVeröffentlicht 2023-06-21Aktualisiert 2024-02-15

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:

Verwendung von Elementselektor und ID-Selektor

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:

Verwendung des Klassenselektors

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.