La bibliothèque jQuery ajoute une autre capacité extrêmement puissant pour javascript. Il permet HTML5 et CSS3 programmeurs pour attacher facilement un événement à tout objet jQuery. Jetez un oeil à hover.html.

Lorsque vous déplacez votre curseur sur un élément de la liste, une bordure apparaît autour de l'article. Cela ne veut pas un effet difficile à réaliser dans CSS ordinaire, mais il est encore plus facile à jQuery.

Comment ajouter un événement de pointage

Regardez le code pour voir comment cela fonctionne:

Hover Démo
alpha
bêta
gamma
delta

Le code HTML ne pouvait pas être plus simple. Il est tout simplement une liste non ordonnée. Le javascript est pas beaucoup plus complexe. Il se compose de trois fonctions d'une ligne:

• init () est appelée lorsque le document est prêt. Il rend les objets jQuery de tous les éléments de la liste et attache de l'événement pour eux. La hover () fonction accepte deux paramètres:

• La première est une fonction à appeler lorsque le curseur passe sur l'objet.

• La seconde est une fonction à appeler lorsque le curseur quitte l'objet.

Dans cet exemple, trois fonctions différentes ont été utilisées. De nombreux programmeurs jQuery préfèrent utiliser des fonctions anonymes (parfois appelés lambda fonctions) à joindre l'ensemble des fonctionnalités dans une longue ligne:

 $ ("li") planer (function () {$ (this) Css ("frontière", "noir 1px solid") -}., function () {$ (this) Css ("frontière", "0px aucun noir ") -}) -

Notez que ceci est toujours techniquement une seule ligne de code. Au lieu de référencer deux fonctions qui ont déjà été créés, vous pouvez construire les fonctions immédiatement où ils sont nécessaires. Chaque définition de la fonction est un paramètre de la hover () Procédé.

Si vous êtes un chercheur en informatique, vous pourriez arguer que ce ne sont pas un exemple parfait d'une fonction lambda, et vous auriez raison. La chose importante est de constater que certaines idées de la programmation fonctionnelle (tels que les fonctions lambda) sont glissent dans la programmation grand public AJAX, et qui est un développement passionnant.

Modification des classes à la volée

jQuery supporte une autre caractéristique merveilleuse. Vous pouvez définir un style CSS, puis ajouter ou supprimer ce style d'un élément dynamique.

Le code montre comment facile ce genre de fonction est d'ajouter:

Classe Démo
alpha
bêta
gamma
delta

Voici comment faire pour faire de ce programme:

1. Commencez avec une page HTML de base.

   Toutes les choses intéressantes qui se passe dans CSS et javascript, donc le contenu réel de la page ne sont pas si critique.

2. Créer une classe que vous voulez ajouter et supprimer.

   Vous pouvez construire une classe CSS appelé qui attire tout simplement une bordure autour de l'élément. Bien sûr, vous pouvez faire une classe beaucoup plus sophistiqué de CSS avec toutes sortes de mise en forme si vous préférez.

3. Lier un init () Procédé.

   Comme vous commencez à voir, la plupart des applications jQuery exigent une sorte de initialisation. Vous pouvez appeler la première fonction. init ()

4. Appeler le toggleBorder () fonction chaque fois que l'utilisateur clique sur un élément de la liste.

   La init () méthode définit simplement un gestionnaire d'événement. Chaque fois qu'un élément de la liste reçoit l'événement click (qui est, il est cliqué) le toggleBorder ()fonction doit être activée. La toggleBorder ()fonction, ainsi, permet de basculer la frontière.

   jQuery dispose de plusieurs méthodes pour l'utilisation de la classe d'un élément:

5. addClass () d'attribuer une classe à l'élément.

6. removeClass () supprime une définition de classe d'un élément.

7. toggleClass() commute la classe (ajoute si elle n'a pas été fixé actuellement ou supprime contraire).