Durch die Manipulation von CSS können wir Änderungen an den Elementen, die wir auf dem Bildschirm sehen, auf sehr natürliche und flüssige Weise erreichen, ohne auf komplexe Funktionen in reinem Javascript zurückgreifen zu müssen, wie wir es vor einigen Jahren getan haben.

Das DOM und seine Bedeutung

Das DOM ist die Art und Weise, wie unser HTML- Dokument organisiert ist. Es ermöglicht uns, eine vorhersehbare und hierarchische Struktur für das zu erstellen, was wir auf dem Bildschirm anzeigen möchten. Dies ist sehr wichtig, da der Browser die Dokumente auf diese Weise interpretiert. Es gibt jedoch noch einen weiteren Aspekt, den wir zu unseren Gunsten nutzen können. Dies ist, um in der Lage zu sein, die Elemente zu lokalisieren, um auf sie einzugreifen.

Wenn wir also eine Änderung an einem bestimmten Element vornehmen müssen, können wir dank des DOM verschiedene Methoden verwenden, um es zu lokalisieren und damit seinen Inhalt, seinen Stil oder sogar ihn in Echtzeit aus dem Dokument zu entfernen.

Dies ist sehr praktisch, wenn ein Element hervorgehoben werden muss, wenn eine Aktion im Dokument ausgeführt wird oder wenn eine Antwort eingeht und die Seite nicht geändert oder vollständig aktualisiert werden muss.

Die Methode addClass ()

Eine der Best Practices beim Erstellen von CSS- Stilen ist die Verwendung von Klassen. Damit können wir Aspekte erstellen, die wir dann unabhängig voneinander auf verschiedene Elemente anwenden können, ohne den Code immer wieder neu schreiben zu müssen.

Mit jQuery können wir diese Grenzen überspringen, indem wir die Möglichkeit haben, diese Klassen in Echtzeit in das Dokument einzubinden, ohne die gesamte Seite neu laden zu müssen. Dazu verwenden wir einfach die addClass () -Methode und übergeben ihr den Namen der CSS- Klasse, die wir der hinzufügen möchten Moment

Lassen Sie uns Schritt für Schritt ein kleines praktisches Beispiel ansehen und dann den vollständigen Code der beschriebenen Sache sehen:

– En primer lugar creamos nuestro archivo llamado agregar-clases.html y vamos a incluir la librería de jQuery , para efectos prácticos hacemos el llamado directo desde la CDN adecuada, esto requiere conexión a Internet, sin embargo podemos salvar el archivo y servirlo de forma local. 1 – Zuerst erstellen wir unsere Datei mit dem Namen add-classes.html und fügen die jQuery- Bibliothek hinzu. Aus praktischen Gründen führen wir den direkten Aufruf vom entsprechenden CDN aus . Dies erfordert eine Internetverbindung. Wir können die Datei jedoch speichern und verwenden. lokale Form.

– Luego vamos a crear nuestras clases CSS , para que podamos ver de mejor forma el cambio hemos creado dos clases, cada una le cambia el color al fondo del elemento al que se aplique, y cada clase tendrá un color diferente. 2 – Dann erstellen wir unsere CSS- Klassen, damit wir die Änderung, die wir in zwei Klassen vorgenommen haben, besser sehen können. Jede Klasse ändert die Farbe auf den Hintergrund des Elements, auf das sie angewendet wird, und jede Klasse hat eine andere Farbe.

– En el body de nuestro documento creamos dos <div> ya cada uno le asignamos un ID con el cual podremos identificarlos dentro del DOM fácilmente con los selectores de jQuery . 3 – Im Hauptteil unseres Dokuments erstellen wir zwei <div> und weisen jedem eine ID zu, mit der wir sie im DOM mit den jQuery- Selektoren leicht identifizieren können.

– Luego creamos un elemento <button> al cual en el evento onclick le decimos que llame a una función Javascript . 4 – Dann erstellen wir ein <button> -Element, das im onclick -Ereignis eine Javascript- Funktion aufruft .

– Finalmente construimos nuestra función Javascript , esta simplemente va a llamar a cada elemento por su selector y con el método addClass() le va a añadir una clase de las que creamos inicialmente, al hacer esto inmediatamente veremos el cambio. 5 – Schließlich bauen wir unsere Javascript- Funktion auf, dies ruft einfach jedes Element über seinen Selektor auf und fügt mit der addClass () -Methode eine Klasse hinzu, die wir ursprünglich erstellt haben. Auf diese Weise sehen wir die Änderung sofort.

Da wir beschrieben haben, was wir tun sollen, werden wir den Code so sehen, wie er war:

 <! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title> Klassen hinzufügen </ title> <script src = "https://code.jquery.com/jquery-2.1.1.min.js"> </ script> <style> .primeraclase {Hintergrundfarbe: grün;} .second class {Hintergrundfarbe: grau;} </ style> </ head> <body> <section> <div id = "element_1"> Unser erster jQuery-CSS-Block </ div> </ br> <div id = "element_2"> Unser zweiter Block für jQuery-CSS </ div> </ section> <p> <button onclick = "Javascript: changeClasses ();"> Klicken Sie hier, um die Klassen zu ändern. </ button> </ p> <script type = "text / javascript"> Funktion changeClasses () { $ ("# element_1"). addClass ("primeraclase"); $ ("# element_2"). addClass ("secondclass"); } </ script> </ body> </ html> 

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

Nachdem wir auf den Button geklickt haben, können wir den Übergang auf unserer Seite sehen:

Entfernen Sie eine Klasse

Wenn wir eine Klasse hinzufügen können, müssen wir auch in der Lage sein, das Gegenteil von dem zu tun, das sie entfernt. Für diese jQuery wird die removeClass () -Methode bereitgestellt , und sie funktioniert nach einem Prinzip, das dem vorherigen Beispiel sehr ähnlich ist. Wir platzieren einfach ein Element und sagen durch die Methode, die die angegebene Klasse entfernen muss, wenn sie entfernt wurde, geschieht sonst nichts.

Um die Sache ein wenig interessanter zu machen, werden wir die Verwendung einer anderen Methode hinzufügen und es ist die Klassenprüfung, dies ist die hasClass () , mit der wir überprüfen können, ob ein Element eine bestimmte Klasse hat, mit der wir bedingte und tun können verschiedene Experimente, die uns unsere Logik diktiert.

Ein praktisches Beispiel

Dazu erstellen wir eine kleine Seite, in der wir mehrere Funktionen haben. Eine Funktion überprüft, ob das Element eine bestimmte Klasse hat. Wenn dies der Fall ist, wird es entfernt. Wenn die Antwort jedoch negativ ist, werden wir es hinzufügen.

Dies gibt uns die Möglichkeit, ein bisschen dynamisch mit den Stilen zu spielen, da wir in Echtzeit sehen können, ob wir bestimmte Werte hinzufügen oder entfernen.

– Tomando como base el ejemplo anterior solamente nos vamos a concentrar en la parte donde hemos escrito la función Javascript . 1 – Anhand des vorherigen Beispiels konzentrieren wir uns nur auf den Teil, in dem wir die Javascript- Funktion geschrieben haben.

– Dentro de la función vamos a crear dos condicionales, en el primero trabajaremos con el primer elemento, en primer lugar vamos a preguntar con un bloque condicional if() si tiene la clase llamada primeraclase , en caso de ser positiva la respuesta aplicaremos el método de remover clase, sin embargo de no tener la clase vamos a añadírsela, esto nos dará un efecto de switch . 2 – In der Funktion werden wir zwei Bedingungen erstellen. In der ersten werden wir mit dem ersten Element arbeiten. Zuerst werden wir mit einem bedingten Block fragen, ob () ob es die Klasse firstracing hat. Im Falle, dass sie positiv ist, wird die Antwort angewendet Methode zum Entfernen von Klassen. Wenn wir jedoch nicht über die Klasse verfügen, die wir hinzufügen möchten, erhalten wir einen Wechseleffekt .

– Repetimos el paso anterior para el segundo elemento y así logramos que se comporte de la misma manera. 3 – Wir wiederholen den vorherigen Schritt für das zweite Element und können uns daher genauso verhalten.

Nachfolgend sehen wir den neuen Code, den wir erstellt haben:

 <! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title> Klassen hinzufügen </ title> <script src = "https://code.jquery.com/jquery-2.1.1.min.js"> </ script> <style> .primeraclase {Hintergrundfarbe: grün;} .second class {Hintergrundfarbe: grau;} </ style> </ head> <body> <section> <div id = "element_1"> Unser erster jQuery-CSS-Block </ div> </ br> <div id = "element_2"> Unser zweiter Block für jQuery-CSS </ div> </ section> <p> <button onclick = "Javascript: changeClasses ();"> Klicken Sie hier, um die Klassen zu ändern. </ button> </ p> <script type = "text / javascript"> Funktion changeClasses () { if ($ ("# element_1"). hasClass ("primeraclase")) { $ ("# element_1"). removeClass ("primeraclase"); } else { $ ("# element_1"). addClass ("primeraclase"); } if ($ ("# element_2"). hasClass ("segundaclase")) { $ ("# element_2"). removeClass ("secondclass"); } else { $ ("# element_2"). addClass ("secondclass"); } } </ script> </ body> </ html> 

Nun wollen wir sehen, wie die Ausführung unseres Programms ist. In diesem ersten Bild sehen wir, wie unser HTML- Dokument im Ausgangszustand aussieht. Wir haben die Chrome- Konsole integriert, damit wir feststellen können, wie sich die Elemente ändern:

Nun wollen wir sehen, was passiert, wenn wir auf die Schaltfläche klicken und der Übergang ausgeführt wird:

Auf den ersten Blick scheint dieses Dokument genauso zu funktionieren wie das erste, das wir in diesem Tutorial gemacht haben. Wenn wir jedoch erneut klicken, werden wir sehen, wie die removeClass () -Methode funktioniert .

Wir haben auch überprüft, wie die hasClass () -Methode funktioniert. Vielleicht macht sie nichts, was der Benutzer sieht, aber es gibt uns die Möglichkeit, Bedingungen in unserem HTML auszuführen.

toggleClass ()

Es gibt etwas, das es uns ermöglicht, jQuery zu verwenden und dies zwischen Klassen zu wechseln. Dazu verwenden wir die Methode toggleClass () , mit der wir unserem Element angeben können, dass es beim Auslösen eines Ereignisses eine Klasse benötigt, wenn die andere der Liste bereits angewendet wurde.

Mal sehen, wie wir nur die Javascript- Funktion unseres Testdokuments ändern, um diese neue Methode zu integrieren:

– Vamos a añadir una clase inicial a nuestros elementos, de esta forma tendremos un punto de partida para los cambios. 1 – Wir werden unseren Elementen eine erste Klasse hinzufügen, auf diese Weise werden wir einen Ausgangspunkt für die Änderungen haben.

– Luego dentro de nuestra función Javascript simplemente aplicaremos el método toggleClass() a cada uno de los elementos mediante su selector. 2 – Dann wenden wir in unserer Javascript- Funktion einfach die toggleClass () -Methode über ihren Selektor auf jedes der Elemente an.

Mal sehen, wie unser Code mit den vorgenommenen Änderungen ist:

 <! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title> Klassen hinzufügen </ title> <script src = "https://code.jquery.com/jquery-2.1.1.min.js"> </ script> <style> .claseinicial {Hintergrundfarbe: blau;} .primeraclase {Hintergrundfarbe: grün;} .second class {Hintergrundfarbe: grau;} </ style> </ head> <body> <section> <div id = "element_1" class = "initialclass"> Unser erster jQuery-CSS-Block </ div> </ br> <div id = "element_2" class = "initialclass"> Unser zweiter Block für jQuery-CSS </ div> </ section> <p> <button onclick = "Javascript: changeClasses ();"> Klicken Sie hier, um die Klassen zu ändern. </ button> </ p> <script type = "text / javascript"> Funktion changeClasses () { $ ("# element_1"). toggleClass ("initial class initialraclase"); $ ("# element_2"). toggleClass ("initialclass secondclass"); } </ script> </ body> </ html> 

Nun wollen wir sehen, was passiert, wenn wir das Dokument zum ersten Mal laden:

Nun wollen wir sehen, was passiert, wenn wir erneut auf die Schaltfläche klicken:

Wenn wir weiter auf die Schaltfläche klicken, wechseln sich die Klassen ohne Einschränkungen ab.

Nachdem wir dieses Tutorial abgeschlossen haben, haben wir gelernt, wie wir das CSS direkt mit jQuery manipulieren können. Auf diese Weise können wir bessere Ideen haben, um unsere Benutzeroberflächen funktionsreicher zu gestalten.