close

Grundlegende Syntax von jQuery – Auswählen, Bearbeiten und Effekte

Die grundlegende Syntax von jQuery umfasst die Verwendung eines Selektors(Selektor im CSS-Stil) und Methoden zum Bearbeiten der ausgewählten Elemente. Hier sind einige grundlegende Syntaxbeispiele von jQuery:

 

Elemente auswählen

  • Elemente nach HTML-Tag-Namen auswählen: $("tagname") Beispiel: $("p") Wählt alle <p> Elemente auf der Seite aus.

  • Elemente nach CSS-Klasse auswählen: $(".classname") Beispiel: $(".myClass") Wählt alle Elemente mit der Klasse „myClass“ aus.

  • Elemente nach ID auswählen: $("#idname") Beispiel: $("#myElement") Wählt das Element mit der ID „myElement“ aus.

  • Elemente nach Attribut auswählen: $("[attribute='value']") Beispiel: $("[data-type='button']") Wählt Elemente aus, deren Attribut data-type auf „Schaltfläche“ gesetzt ist.

  • Auswahl kombinieren: $("tagname.classname"), $("#idname .classname"), ...

 

Ausgewählte Elemente bearbeiten

  • Den Inhalt eines Elements ändern: .html(), .text() Beispiel: $("#myElement").html("New content") Setzt den HTML-Inhalt des Elements mit der ID „myElement“.

  • Elementattribute ändern: .attr(), .prop() Beispiel: $("img").attr("src", "newimage.jpg") Ändert das src Attribut aller <img> Elemente.

  • CSS-Klassen eines Elements manipulieren: .addClass(), .removeClass(), .toggleClass() Beispiel: $("#myElement").addClass("highlight") Fügt die Klasse „highlight“ zum Element mit der ID „myElement“ hinzu.

  • Elemente ein-/ausblenden: .hide(), .show(), .toggle() Beispiel: $(".myClass").hide() Versteckt alle Elemente mit der Klasse „myClass“.

  • Behandeln von Ereignissen für Elemente: .click(), .hover(), .submit(), ... Beispiel: $("button").click(function() { ... }) Registriert einen Click-Event-Handler

 

Arbeiten mit Elementsammlungen

  • Durch eine Sammlung iterieren: .each() Beispiel: $("li").each(function() { ... }) Iteriert über jedes <li> Element auf der Seite.

  • Filtern einer Sammlung: .filter(), .not() Beispiel: $("div").filter(".myClass") Filtert die <div> Elemente und wählt diejenigen mit der Klasse „myClass“ aus.

  • Elemente in eine Sammlung einfügen: .append(), .prepend(), .after(), .before() Beispiel: $("#myElement").append("<p>New paragraph</p>") Hängt ein neues <p> Element an das Element mit der ID „myElement“ an.

 

Effekte und Animationen

  • FadeIn-/FadeOut-Effekte ausführen: .fadeIn(), .fadeOut() Beispiel: $("#myElement").fadeIn(1000) Blendet das Element mit der ID „myElement“ über eine Dauer von 1 Sekunde ein.

  • SlideUp-/SlideDown-Effekte ausführen: .slideUp(), .slideDown() Beispiel: $(".myClass").slideUp(500) Verschiebt alle Elemente mit der Klasse „myClass“ über eine Dauer von 0,5 Sekunden nach oben.

  • Durchführen benutzerdefinierter Animationen: .animate() Beispiel: $("#myElement").animate({ left: '250px', opacity: '0.5' }) Animiert das Element mit der ID „myElement“, indem seine linke Position und Deckkraft geändert werden.

 

Diese Beispiele veranschaulichen, wie Sie verschiedene Aspekte der grundlegenden Syntax von jQuery verwenden, um Elemente auszuwählen, ihre Eigenschaften zu bearbeiten und Effekte oder Animationen anzuwenden. jQuery bietet eine Vielzahl von Methoden und Funktionen zur Vereinfachung und Verbesserung von Webentwicklungsaufgaben.