Inhaltsverzeichnis
Diese Elemente oder Selektoren können mit Jquery und CSS manipuliert werden, um Effekte zu erzeugen und Inhalte zu erhalten, sie auszublenden oder hinzuzufügen und einen Effekt darauf anzuwenden, was die Arbeit der Programmierer erleichtert. Einige Selektoren sind besser für den CSS-Code bekannt, zum Beispiel:IDENTIFIKATIONEN
Sie sind Elemente der höchsten Hierarchie und definieren allgemeine Parameter für die Elemente eines Blocks.Sie werden als #id definiert und werden normalerweise auf Listen oder Blöcke angewendet.
Dies ist die Absatz-ID-Auswahl
Absatz ohne Selektor
LEKTIONEN
Sie sind Elemente der unteren Hierarchie und werden für einzelne Elemente oder zur Definition von Klassen innerhalb eines Identifiers verwendet, wie zum Beispiel:
Dies ist die Absatz-ID-Auswahl
Blauer Absatz mit p
Blauer Absatz mit divRoter Absatz mit div
Während die unabhängige Klasse .parrafoazul Element p anwenden kann, das von niemandem abhängt, können wir es sogar auf andere Elemente wie div anwenden funktioniert nicht, da es die Hierarchie nicht erfüllt, die seinen Bezeichner #paragraph auferlegt.
Es gibt viele Selektoren, die wir hier verwenden können, wir werden einige sehen
Gerade (gerade) und ungerade (ungerade) Selektor
Dieser Selektor wird auf ein Array von Elementen angewendet, die dieselbe Klasse verwenden, und kann sich auf gerade oder ungerade Elemente auswirken, zum Beispiel wir färben den Hintergrund einer Liste von Absätzen.
ABSÄTZE
Benutzer 1 hat eine Nachricht hinterlassen
Benutzer 2 hat eine Nachricht hinterlassen
Benutzer 3 hat eine Nachricht hinterlassen
Benutzer 4 hat eine Nachricht hinterlassen
UL-LISTE
- Benutzer 1 hat eine Nachricht hinterlassen
- Benutzer 2 hat eine Nachricht hinterlassen
- Benutzer 3 hat eine Nachricht hinterlassen
- Benutzer 4 hat eine Nachricht hinterlassen
WAHLSCHALTER ERSTER (Erster) UND LETZTER (Letzter)
Mit diesen Selektoren können wir das erste und das letzte Element einer bestimmten Liste manipulieren, zum Beispiel setzen wir die Liste in Grau, das erste Element in Grün und das letzte Element in Blau.
UL-LISTE
- Benutzer 1 hat eine Nachricht hinterlassen
- Benutzer 2 hat eine Nachricht hinterlassen
- Benutzer 3 hat eine Nachricht hinterlassen
- Benutzer 4 hat eine Nachricht hinterlassen
FOKUSWAHL
Der Fokus auf ein Element wird aktiviert, wenn Sie auf ein Element klicken und deaktiviert, wenn Sie auf einen anderen Bereich des Webs oder auf ein anderes Element klicken. Wir sehen ein Beispiel mit einem Login-Formular, wir erstellen die Klasse .focologin und wenden sie dann auf den Bezeichner des #login-Formulars an, um alle darin enthaltenen Elemente zu beeinflussen. Wir können es auch auf eine Ebene oder einen Div-Block anwenden und das Formular innerhalb des Blocks platzieren.
FORM
Benutzer-Passwort:
Weisen Sie einem Element mit AddClass einen CSS-Stil zu oder ändern Sie ihn
Wenn wir einen CSS-Stil dynamisch zuweisen oder gemäß einer festgelegten Bedingung ändern möchten, verwenden wir AddClass. In diesem Fall haben wir eine Schaltfläche der Klasse .green und dem Eingabetyp Text weisen wir die Klasse .box von Jquery zu. Die Eingabe des Passworttyps ist nicht betroffen und auch die Schaltfläche zum Senden ist nicht betroffen, da wir ihnen keine CSS-Klasse zugewiesen haben.
ANMELDEFORMULAR
Name:
Adresse:
Telefon:
Email:
Dieser Selektor ermöglicht es, ein Element eines Arrays von Elementen anhand der Position zu identifizieren, an der sich beispielsweise eine Tabellenzelle befindet. Wir müssen bedenken, dass die Elemente als Indizes einer Matrix beginnend mit 0,1,2 usw .
| Titel A | Titel B | Titel C |
|---|---|---|
| Zelle 0 | Zelle 1 | Zelle 2 |
| Zelle 3 | Zelle 4 | Zelle 5 |
Weiter mit den Tabellen und der Anwendung von Selektoren, werden wir sehen, wie man ein Hintergrunddesign abwechselnd in den Farben der Zeilen einer Tabelle erstellt, ähnlich wie es zuvor bei Absätzen und Listen angewendet wurde. Wir fügen nicht so viel CSS oder Design hinzu, damit der Effekt grundsätzlich besser wahrgenommen wird.
AUSWAHL n.-Kind
In Fortsetzung des vorherigen Beispiels können wir den n-ten-Kind-Selektor als Komplement verwenden, ähnlich dem eq-Selektor, aber der Unterschied besteht darin, dass mit n-tem-Kind Positionen in Form einer arithmetischen Operation angegeben werden können. Es wird verwendet, um ein oder mehrere Elemente auszuwählen, jedoch unter der Bedingung, dass es das n-te Kind seines Elternteils ist. Dieser Selektor ist nützlich, um den zweiten Absatz eines Blocks oder das dritte Element einer Liste usw. auszuwählen. Die Elemente werden nicht als Array genommen, sondern in der Reihenfolge zuerst, zweitens usw.
Wenn wir zum Beispiel im vorherigen Skript hinzufügen
In diesem Fall werden ungerade Spalten ausgewählt
- Ungerade Spalten n-tes Kind (2n + 1)
- Gepaarte Spalten n.-Kind (2n)
- Erste und vierte Spalte n.-Kind (3n + 1)
