Comment ajouter des événements aux objets jQuery pour la programmation HTML5 et CSS3 - mannequins

La bibliothèque jQuery ajoute une autre fonctionnalité extrêmement puissante à JavaScript. Il permet aux programmeurs HTML5 et CSS3 d'attacher facilement un événement à n'importe quel 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'élément. Ce n'est pas un effet difficile à réaliser en CSS ordinaire, mais c'est encore plus facile en jQuery.

Comment ajouter un événement de survol

Regardez le code pour voir comment cela fonctionne:

survol. html $ (init); Fonction init () {$ ("li"). hover (border, noBorder);} // fin de la fonction d'initialisation border () {$ (this). css ("border", "1px black");} function noBorder () {$ (this). css ("border", "0px none black");}

Hover Demo

alpha
beta
gamma
delta

Le HTML ne pouvait pas être plus simple. C'est simplement une liste non ordonnée. Le JavaScript n'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 crée des objets jQuery de tous les éléments de la liste et leur attache l'événement. La fonction hover () accepte deux paramètres:

  • Le premier est une fonction à appeler lorsque le curseur survole l'objet.

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

• border () dessine une bordure autour de l'élément courant. L'identifiant $ (this) est utilisé pour spécifier l'objet courant.

• noborder () est une fonction très similaire à la fonction border () , mais elle supprime une bordure de l'objet courant.

Dans cet exemple, trois fonctions différentes ont été utilisées. De nombreux programmeurs jQuery préfèrent utiliser des fonctions anonymes (parfois appelées fonctions lambda ) pour inclure toute la fonctionnalité dans une longue ligne:

$ ("li"). hover (function () {$ (this).css ("bordure", "1px noir uni");}, function () {$ (this).css ("bordure", "0px none black");});

Notez que cela reste techniquement une seule ligne de code. Au lieu de référencer deux fonctions déjà créées, vous pouvez créer les fonctions immédiatement là où elles sont nécessaires. Chaque définition de fonction est un paramètre de la méthode hover ().

Si vous êtes un informaticien, vous pourriez faire valoir que ce n'est pas un exemple parfait d'une fonction lambda, et vous auriez raison. L'important est de remarquer que certaines idées de programmation fonctionnelle (comme les fonctions lambda) s'insinuent dans la programmation AJAX grand public, et c'est un développement passionnant.

Modification des classes à la volée

jQuery prend en charge une autre fonctionnalité remarquable.Vous pouvez définir un style CSS, puis ajouter ou supprimer dynamiquement ce style d'un élément.

Le code montre à quel point ce type de fonctionnalité est facile à ajouter: classe

. html bordé {frontière: 1px noir uni;} $ (init); Fonction init () {$ ("li"). cliquez sur (toggleBorder);} // fin de la fonction init toggleBorder () {$ (this). toggleClass ("bordered");}

Class Demo

alpha
beta
gamma
delta

Voici comment faire ce programme:

1. Commencez par une page HTML de base.

   Toutes les choses intéressantes se passent en CSS et en JavaScript, donc le contenu de la page n'est pas si critique.

2. Créez une classe que vous souhaitez ajouter et supprimer.

   Vous pouvez créer une classe CSS appelée qui dessine simplement une bordure autour de l'élément. Bien sûr, vous pouvez créer une classe CSS beaucoup plus sophistiquée avec toutes sortes de formatage si vous préférez.

3. Lier une méthode init ().

   Comme vous commencez à le voir, la plupart des applications jQuery nécessitent une sorte d'initialisation. Vous pouvez appeler la première fonction. init ()

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

   La méthode init () configure simplement un gestionnaire d'événements. Chaque fois qu'un élément de liste reçoit l'événement click (c'est-à-dire qu'il est cliqué), la fonction toggleBorder () doit être activée. La fonction toggleBorder (), bien, bascule la bordure.

   jQuery a plusieurs méthodes pour manipuler la classe d'un élément:

   • addClass () assigne une classe à l'élément.

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

   • toggleClass () change la classe (l'ajoute si elle n'est pas actuellement attachée ou la supprime dans le cas contraire).