Zum Hinzufügen von Ereignissen zu jQuery-Objekten für HTML5 und CSS3 Programmierung - Dummies

Die jQuery-Bibliothek fügt JavaScript eine weitere sehr leistungsfähige Fähigkeit hinzu. Es ermöglicht HTML5- und CSS3-Programmierern, ein Ereignis einfach an ein beliebiges jQuery-Objekt anzuhängen. Schauen Sie schweben. html.

Wenn Sie den Cursor über ein beliebiges Listenelement bewegen, wird ein Rahmen um das Objekt angezeigt. Das ist kein schwieriger Effekt im normalen CSS, aber in jQuery ist es noch einfacher.

So fügen Sie ein Hover-Ereignis hinzu

Sehen Sie sich den Code an, um zu sehen, wie er funktioniert:

Hover. html $ (init); Funktion init () {$ ("li"). Hover (border, noBorder);} // end init Funktion border () {$ (this). css ("border", "1px solid black");} Funktion noBorder () {$ (this). css ("border", "0px none black");}

Hover Demo

alpha
beta
gamma
delta

Der HTML-Code könnte nicht einfacher sein. Es ist einfach eine ungeordnete Liste. Das JavaScript ist nicht viel komplexer. Es besteht aus drei einzeiligen Funktionen:

• init () wird aufgerufen, wenn das Dokument bereit ist. Es erstellt jQuery-Objekte aller Listenelemente und hängt das Ereignis an sie an. Die Funktion hover () akzeptiert zwei Parameter:

  • Die erste Funktion ist eine Funktion, die aufgerufen wird, wenn der Cursor über das Objekt bewegt wird.

  • Die zweite Funktion ist eine Funktion, die aufgerufen wird, wenn der Cursor das Objekt verlässt.

• border () zeichnet einen Rahmen um das aktuelle Element. Die $ (this) -Kennung wird verwendet, um das aktuelle Objekt anzugeben.

• noborder () ist eine Funktion, die der border () -Funktion sehr ähnlich ist, aber einen Rand vom aktuellen Objekt entfernt.

In diesem Beispiel wurden drei verschiedene Funktionen verwendet. Viele jQuery-Programmierer verwenden lieber anonyme Funktionen (manchmal als lambda -Funktionen bezeichnet), um die gesamte Funktionalität in einer langen Zeile einzuschließen:

$ ("li"). hover (function () {$ (this). css ("border", "1px solid black");}, function () {$ (this). css ("border", "0px none black");});

Beachten Sie, dass dies technisch immer noch eine einzige Codezeile ist. Anstatt auf zwei Funktionen zu verweisen, die bereits erstellt wurden, können Sie die Funktionen sofort dort erstellen, wo sie benötigt werden. Jede Funktionsdefinition ist ein Parameter für die Methode hover ().

Wenn Sie ein Informatiker sind, könnten Sie argumentieren, dass dies kein perfektes Beispiel für eine Lambda-Funktion ist, und Sie wären korrekt. Das Wichtigste ist, zu bemerken, dass einige Ideen der funktionalen Programmierung (wie Lambda-Funktionen) in die Mainstream-AJAX-Programmierung eingeschleust werden, und das ist eine aufregende Entwicklung.

Schnelles Ändern von Klassen

jQuery unterstützt eine weitere wunderbare Funktion.Sie können einen CSS-Stil definieren und ihn dann dynamisch aus einem Element hinzufügen oder entfernen.

Der Code zeigt, wie einfach diese Art von Funktion hinzugefügt werden kann:

Klasse. html. umrandet {border: 1px solid black;} $ (init); Funktion init () {$ ("li"). Klicken Sie auf (toggleBorder);} // beenden Sie die Init-Funktion toggleBorder () {$ (this). toggleClass ("bordered");}

Klasse Demo

alpha
beta
gamma
delta

So erstellen Sie dieses Programm:

1. Beginnen Sie mit einer einfachen HTML-Seite.

   All das Interessante passiert in CSS und JavaScript, daher sind die tatsächlichen Inhalte der Seite nicht so kritisch.

2. Erstellen Sie eine Klasse, die Sie hinzufügen und entfernen möchten.

   Sie können eine CSS-Klasse erstellen, die einfach einen Rahmen um das Element herum zeichnet. Natürlich können Sie eine viel anspruchsvollere CSS-Klasse mit allen Arten der Formatierung erstellen, wenn Sie dies bevorzugen.

3. Verknüpfen Sie eine init () -Methode.

   Wie Sie zu sehen beginnen, benötigen die meisten jQuery-Anwendungen eine Art Initialisierung. Sie können die erste Funktion aufrufen. init ()

4. Rufen Sie die Funktion toggleBorder () auf, wenn der Benutzer auf ein Listenelement klickt.

   Die Methode init () richtet einfach einen Ereignishandler ein. Immer wenn ein Listenelement das Klickereignis empfängt (dh es wird darauf geklickt), sollte die Funktion toggleBorder () aktiviert werden. Die toggleBorder () - Funktion schaltet den Rand um.

   jQuery verfügt über mehrere Methoden zur Manipulation der Klasse eines Elements:

   • addClass () weist dem Element eine Klasse zu.

   • removeClass () entfernt eine Klassendefinition aus einem Element.

   • toggleClass () wechselt die Klasse (fügt sie hinzu, wenn sie gerade nicht angehängt ist oder entfernt sie sonst).