Die jQuery-Bibliothek fügt eine weitere extrem leistungsstarke Funktionen für den javascript. Es ermöglicht HTML5 und CSS3-Programmierer leicht, ein Ereignis zu jedem jQuery-Objekt anhängen. Werfen Sie einen Blick auf hover.html.

Wenn Sie den Mauszeiger über einen beliebigen Listeneintrag bewegen, wird ein Rahmen um das Element. Dies ist nicht eine schwierige Effekt in normalen CSS zu erreichen, aber es ist noch einfacher in jQuery.

Wie ein Hover-Event hinzufügen

Schauen Sie sich den Code, um zu sehen, wie es funktioniert:

 
Hover Demo
Alpha
Beta
Gamma
Delta

Die HTML könnte nicht einfacher sein. Es ist einfach eine ungeordnete Liste. Das javascript ist nicht viel komplexer. Es besteht aus drei einzeilige Funktionen:

• drin() aufgerufen wird, wenn das Dokument fertig ist. Es macht jQuery Objekte aller Listenelemente und legt das Ereignis zu ihnen. Das schweben() Funktion akzeptiert zwei Parameter:

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

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

Rand() das aktuelle Element zieht eine Grenze um. Das $ (This) Kennung wird verwendet, um das aktuelle Objekt zu spezifizieren.

keine Grenze() ist eine Funktion, die der sehr ähnlich ist, Rand() Funktion, aber es entfernt eine Grenze aus dem aktuellen Objekt.

In diesem Beispiel wurden drei verschiedene Funktionen verwendet. Viele jQuery Programmierer bevorzugen anonyme Funktionen zu verwenden (manchmal auch als Lambda Funktionen) die gesamte Funktionalität in einer langen Zeile einzuschließen:

 $ ( "Li") schweben (function () {$ (this) CSS- ( "Grenze", "1px solid black") -}., Function () {$ (this) CSS- ( "Grenze", "0px keine schwarz ") -}) -

Beachten Sie, dass dies immer noch technisch eine einzige Zeile Code ist. Statt zwei Funktionen einer Anzeige, die bereits erstellt haben, können Sie die Funktionen bauen sofort, wo sie gebraucht werden. Jede Funktionsdefinition ist ein Parameter, um die schweben() Verfahren.

Wenn Sie ein Informatiker sind, könnte man argumentieren, dass dies nicht ein perfektes Beispiel für eine Lambda-Funktion ist, und würden Sie richtig sein. Das Wichtigste ist zu bemerken, dass einige Ideen der funktionalen Programmierung (wie Lambda-Funktionen) kriechen in die Mainstream-AJAX-Programmierung, und das ist eine spannende Entwicklung.

Ändern Klassen on the fly

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

Der Code zeigt, wie einfach diese Art von Feature hinzuzufügen ist:

 
Klasse Demo
Alpha
Beta
Gamma
 
Delta

Hier ist, wie dieses Programm zu machen:

1. Beginnen Sie mit einer einfachen HTML-Seite.

   All das interessante Sachen passiert in CSS und javascript, um so die tatsächlichen Inhalte der Seite sind nicht so kritisch.

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

   Sie können eine CSS-Klasse bauen genannt, die einfach eine Grenze zieht um das Element. Natürlich können Sie mit allen Arten von Formatierung eine viel komplexere CSS-Klasse machen, wenn Sie es vorziehen.

3. Link ein drin() Verfahren.

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

4. Ruf den toggleBorder () Funktion, wenn der Benutzer ein Listenelement klickt.

   Das drin()Verfahren setzt einfach einen Event-Handler auf. Jedes Mal, wenn ein Listenelement erhält das Click-Ereignis (das heißt, wird es angeklickt) die toggleBorder ()Funktion sollte aktiviert werden. Das toggleBorder ()Funktion, na ja, schaltet die Grenze.

   jQuery hat mehrere Methoden für die Klasse eines Elements zu manipulieren:

5. addClass () weist eine Klasse auf das Element.

6. removeClass () entfernt eine Klassendefinition von einem Element.

7. toggleClass() schaltet die Klasse (fügt es, wenn es nicht gerade angebracht oder entfernt sie aus anderen Gründen).