CSS-Manipulation mit jQuery

Mit jQuery Auf der Ebene der Benutzerinteraktion können wir viele Dinge erreichen, einschließlich der Manipulation der DOM-BaumEines der Dinge, die mir jedoch vielleicht nicht in den Sinn kommen, ist die CSS-Manipulation.
Durch die Manipulation der CSS Wir können Veränderungen der Elemente, die wir auf dem Bildschirm sehen, auf sehr natürliche und flüssige Weise erreichen, ohne auf komplexe Funktionen in zurückgreifen zu müssen Javascript rein, wie wir es vor ein paar Jahren machen mussten.
Das SONNE So ist unser Dokument aufgebaut HTML, ermöglicht es uns, dem, was wir auf dem Bildschirm anzeigen möchten, eine vorhersehbare und hierarchische Struktur zu geben. Dies ist sehr wichtig, da der Browser die Dokumente so interpretiert, aber es gibt noch einen weiteren Aspekt, den wir zu unserem Vorteil nutzen können; Dies dient dazu, die Elemente zu lokalisieren, um darauf Aktionen auszuführen.
Wenn wir also eine Änderung an einem bestimmten Element vornehmen müssen, dank der SONNE Wir können verschiedene Wege nutzen, um es zu lokalisieren und so seinen Inhalt, seinen Stil zu manipulieren oder sogar in Echtzeit aus dem Dokument zu entfernen.
Dies ist sehr praktisch in Momenten, in denen wir ein Element hervorheben müssen, wenn wir eine Aktion im Dokument ausführen oder eine Antwort erhalten, und daher die Seite nicht ändern oder eine vollständige Aktualisierung durchführen müssen.
Eine der Best Practices beim Erstellen von Stilen CSS ist die Verwendung von Klassen, damit können wir Aspekte erstellen, die wir dann unabhängig auf verschiedene Elemente anwenden können, ohne den Code immer wieder neu schreiben zu müssen.
KlassenattributDamit ein Element diese Stile annehmen kann, müssen wir es nur in seinem Attribut platzieren Klasse = "" der Name der entsprechenden Klasse und wenn der Stil, den wir darin schreiben, für das Element geeignet ist, wird es widergespiegelt.
EinschränkungKlingt alles gut, aber es gibt eine Einschränkung, der Stil wird beim Anheben der Seite geladen und wenn wir einen neuen Stil einfügen müssen, müsste die Seite normalerweise neu geladen werden, was eine Unterbrechung der Navigation für den Benutzer verursacht.
jQuery ermöglicht es uns, diese Grenzen zu umgehen, indem wir die Möglichkeit haben, diese Klassen in Echtzeit in das Dokument einzubinden, ohne die gesamte Seite neu laden zu müssen, dazu müssen wir einfach die Methode verwenden Klasse hinzufügen () und übergeben Sie ihm den Namen der Klasse CSS die wir dem Moment hinzufügen möchten.
Sehen wir uns Schritt für Schritt ein kleines praktisches Beispiel an und dann sehen wir den vollständigen Code dessen, was beschrieben wird:
1- Zuerst erstellen wir unsere Datei namens add-classes.html und wir werden die Bibliothek von jQuery, aus praktischen Gründen machen wir den direkten Anruf vom CDN ausreichend, dies erfordert eine Internetverbindung, wir können die Datei jedoch speichern und lokal bereitstellen.
2- Dann werden wir unsere Klassen erstellen CSSDamit wir die Änderung besser sehen können, haben wir zwei Klassen erstellt, jede ändert die Farbe des Hintergrunds des Elements, auf das sie angewendet wird, und jede Klasse hat eine andere Farbe.
3- Im Hauptteil unseres Dokuments erstellen wir zwei und jedem weisen wir eine ID zu, mit der wir ihn innerhalb der . identifizieren können SONNE einfach mit den Selektoren jQuery.
4- Dann erstellen wir ein Element, zu dem im Ereignis onclick wir sagen ihm, dass es eine Funktion aufrufen soll Javascript.
5- Schließlich bauen wir unsere Funktion Javascript, dies ruft einfach jedes Element durch seinen Selektor und mit der Methode auf Klasse hinzufügen () Es wird eine Klasse der ursprünglich erstellten Klasse hinzufügen. Wenn wir dies tun, werden wir die Änderung sofort sehen.
Da wir beschrieben haben, was wir tun sollen, sehen wir den Code so, wie er war:

 Klassen hinzufügenUnser erster jQuery CSS-Block
Unser zweiter jQuery CSS-Block
Klicken Sie hier, um die Klasse zu ändern

Wie wir sehen, ist es ziemlich einfach und wenn wir dies in unserem Browser ausführen, werden wir sehen, wie die Elemente vor dem Klicken auf die Schaltfläche normal sind und nach dem Klicken die Farbe ändern und die entsprechenden Klassen hinzugefügt werden. Sehen wir uns im folgenden Bild an, worauf wir uns beziehen:

VERGRÖSSERN

Nachdem wir auf die Schaltfläche geklickt haben, können wir den Übergang auf unserer Seite visualisieren:

Wenn wir eine Klasse hinzufügen können, müssen wir dafür auch das Gegenteil können, nämlich sie entfernen jQuery liefert uns die Methode Klasse entfernen (), und dies funktioniert nach einem sehr ähnlichen Prinzip wie im vorherigen Beispiel, wir platzieren einfach ein Element und teilen ihm durch die Methode mit, dass es die angegebene Klasse entfernen muss, wenn sie es hat, wird es entfernt, sonst passiert nichts.
Um die Dinge ein wenig interessanter zu machen, werden wir die Verwendung einer anderen Methode hinzufügen und es ist die Klassenüberprüfungsmethode hasKlasse () Damit können wir überprüfen, ob ein Element eine bestimmte Klasse hat. Damit können wir Bedingungen verwenden und verschiedene Experimente durchführen, die unsere Logik vorschreibt.
Dazu werden wir eine kleine Seite erstellen, auf der wir mehrere Funktionen haben werden, eine Funktion überprüft, ob das Element eine bestimmte Klasse hat, wenn ja, wird es entfernt, aber wenn die Antwort negativ ist, fügen wir es hinzu .
Dies gibt uns die Möglichkeit, dynamisch ein wenig mit den Stilen zu spielen, da wir in Echtzeit sehen können, ob wir bestimmte Werte hinzufügen oder entfernen.
1- Basierend auf dem vorherigen Beispiel konzentrieren wir uns nur auf den Teil, in dem wir die Funktion geschrieben haben Javascript.
2- Innerhalb der Funktion werden wir zwei Bedingungen erstellen, im ersten werden wir mit dem ersten Element arbeiten, zuerst werden wir mit einem Bedingungsblock fragen Wenn () wenn du die Klasse genannt hast erste KlasseWenn die Antwort positiv ist, wenden wir die Methode zum Entfernen der Klasse an. Wenn wir die Klasse jedoch nicht haben, fügen wir sie hinzu. Dies führt zu einem Effekt von schalten.
3- Wir wiederholen den vorherigen Schritt für das zweite Element und erreichen so, dass es sich genauso verhält.
Sehen wir uns den neuen Code an, den wir unten erstellt haben:

 Klassen hinzufügenUnser erster jQuery CSS-Block
Unser zweiter jQuery CSS-Block
Klicken Sie hier, um die Klasse zu ändern

Sehen wir uns nun an, wie unser Programm ausgeführt wird. In diesem ersten Bild sehen wir, wie unser Dokument aussieht HTML Im Ausgangszustand haben wir die Konsole aufgenommen Chrom damit wir merken, wie sich die Elemente ändern:

VERGRÖSSERN

Sehen wir uns nun an, was passiert, wenn wir auf die Schaltfläche klicken und der Übergang erfolgt:

VERGRÖSSERN

Auf den ersten Blick mag es scheinen, dass dieses Dokument genauso funktioniert wie das erste, das wir in diesem Tutorial erstellt haben, aber wenn wir erneut klicken, sehen wir, wie die Methode funktioniert. Klasse entfernen ().
Wir haben auch überprüft, wie die Methode hasKlasse () hat funktioniert, vielleicht tut es nichts, was der Benutzer sieht, aber es gibt uns die Möglichkeit, Bedingungen auf unserem auszuführen HTML.
Es gibt etwas, das uns erlaubt jQuery und das ist um zwischen Klassen zu wechseln, dafür verwenden wir die Methode toggleKlasse (), damit können wir unserem Element angeben, dass es beim Auslösen eines Ereignisses eine Klasse annimmt, wenn die andere in der Liste bereits angewendet wurde.
NützlichkeitDies ist sehr nützlich, wenn wir an Zustandsänderungen arbeiten möchten, es ist eine Art Abkürzung, um nicht mit der Methode eine bedingte Struktur schreiben zu müssen hasClass(). Ihre Anwendung ist den bisher bekannten Methoden sehr ähnlich, der einzige Unterschied besteht darin, dass wir anstelle einer Klasse zwei durch ein Leerzeichen getrennte Klassen übergeben.
Mal sehen, wie wir nur die Funktion ändern werden Javascript unseres Testdokuments, um diese neue Methode zu integrieren:
1- Wir werden unseren Elementen eine erste Klasse hinzufügen, auf diese Weise haben wir einen Ausgangspunkt für die Änderungen.
2- Dann innerhalb unserer Funktion Javascript wir werden einfach die Methode anwenden toggleKlasse () zu jedem der Elemente über seinen Selektor.
Sehen wir uns an, wie unser Code mit den angewendeten Änderungen aussieht:

 Klassen hinzufügenUnser erster jQuery CSS-Block
Unser zweiter jQuery CSS-Block
Klicken Sie hier, um die Klasse zu ändern

Sehen wir uns nun an, was passiert, wenn wir das Dokument zum ersten Mal laden:

Sehen wir uns nun an, was passiert, wenn wir erneut auf die Schaltfläche klicken:

VERGRÖSSERN

Wenn wir weiter auf die Schaltfläche klicken, wechseln sich die Klassen weiterhin unbegrenzt ab.
Damit beenden wir dieses Tutorial, wir haben gelernt, wie wir das manipulieren können CSS direkt mit jQueryDamit können wir beginnen, bessere Ideen zu haben, um unsere Benutzeroberflächen funktionsreicher zu gestalten.