Introduction à jQuery (Partie 2): Méthodes et fonctions

Publicité

Cela fait partie d'une introduction continue aux débutants de la série de programmation Web jQuery. La partie 1 a couvert les bases de jQuery Tutoriel jQuery - Prise en main: bases et sélecteursLa semaine dernière, j'ai parlé de l'importance de jQuery pour tout développeur Web moderne et pourquoi il est génial. Cette semaine, je pense qu'il est temps de nous salir les mains avec du code et d'apprendre comment ... Lire la suite comment l'inclure dans votre projet et les sélecteurs. Dans la partie 2, nous allons continuer avec l'utilisation de base en examinant certaines méthodes que vous pouvez effectuer sur ces éléments DOM, et quelques principes de base du langage.

$(sélecteur).méthode();

Si vous vous souvenez de la leçon 1, il s'agit de la structure de base d'une manipulation DOM dans jQuery. La manipulation DOM n'est pas la seule chose que vous pouvez faire avec jQuery bien sûr, mais c'est le point de départ le plus simple et le plus courant, c'est pourquoi nous l'avons choisi.

Pour récapituler rapidement, sélecteur une partie de cette instruction vous permet d'utiliser des noms d'éléments, des classes ou des ID de type CSS afin de localiser des parties du DOM. Par exemple, pour saisir tous les avec un nom de classe de .caché, nous utiliserions:

$ ('div.hidden')

La deuxième partie de cette équation est le méthode pour jouer sur ces DIVs une fois que nous les avons trouvées (si elles existent; ou il peut ne s'agir que d'un seul élément "correspondant"). N'oubliez pas que jQuery ne renverra qu'un seul élément pour les sélections d'ID, car les ID doivent faire référence à des éléments uniques. Si vous allez avoir plus d'un élément, il doit être défini comme une classe en CSS.

Passons ensuite aux méthodes; que pouvez-vous faire avec les éléments du DOM de toute façon?

Tout d'abord, je vous ai présenté le .css la dernière fois afin de pouvoir l'utiliser pour les tests. Le format est simple:

.css ('propriété', 'valeur');

Tout ce qui peut être défini par CSS peut donc être ajusté par jQuery - couleurs, transparence, emplacement, taille - pour n'en nommer que quelques-uns. Le changement est immédiat.

Si vous préférez animer les modifications CSS, alors j'ai de bonnes nouvelles pour vous; il y a aussi une méthode appelée .animer(). C'est un peu plus complexe cependant:

.animate ({'propriété': 'valeur'}, vitesse);

Par exemple:

.animate ({'opacity': '0.25', 'height': '100px'}, 'fast');

À ce stade, vous vous demandez peut-être à quoi servent les accolades; ils sont appelés un "objet littéral" et sont généralement utilisés pour créer une liste de valeur de la propriété paires, un peu comme un tableau indexé si vous venez d'autres langues. Vous les utiliserez beaucoup dans jQuery, donc je vais le répéter - habituez-vous à vérifier correctement les crochets et les accolades fermés!

Check-out cette page pour de nombreux exemples de travail de la méthode d'animation.

En plus de manipuler les propriétés CSS de quelque chose, vous pouvez ajuster le contenu de celui-ci avec le .méthodes text (), .html () et .val () également (val correspond au contenu des éléments du formulaire). Ces méthodes agissent à la fois ensembleters et avoirters; si vous ne spécifiez pas de valeur, ils obtiendront la valeur actuelle. Si vous spécifiez une valeur, ils remplaceront la valeur actuelle.

Voici quelques exemples rapides:

Obtenez la valeur actuelle du champ de nom dans le formulaire de commentaire et affectez-la à une variable comment_name:

var commenter_name = $ (# comment-form #name) .val ();

Définissez la valeur de à la valeur saisie commenter_name:

$ ('span.name'). text (commenter_name);

Ensuite, nous avons une vaste sélection de méthodes pour cloner, se déplacer, insérer ou supprimer des parties du DOM. Votre imagination est vraiment la limite.

Supposons que vous vouliez insérer dynamiquement un bloc d'image publicitaire tous les trois ans paragraphe dans la colonne de contenu, mais vous le faites en Javascript afin que le chargement initial de la page puisse être maintenu propre. Cela semble assez complexe, non? À peine…

$('div # contentp: nième enfant (3n)').après('');

En décomposant cela, nous avons demandé à jQuery de:

1. Trouvez le div avec un ID de «contenu»
2. Trouvez les p contenus dans cette div
3. Filtrer tous les 3 p à l'aide du pseudo-sélecteur nième enfant (plus ici)
4. Insérez une image arbitraire après chaque élément correspondant

Je ne peux pas énumérer toutes les méthodes ici et vous ne voudriez pas non plus lire cela. Le fait est qu'il existe une méthode pour faire à peu près tout ce que vous pouvez penser en matière de manipulation, donc vérifier l'API pour celui que vous pouvez utiliser.

N'oubliez pas non plus qu'il peut y avoir plus d'une façon de faire quelque chose. Si, par exemple, vous ne pouvez pas restreindre l'objet correct à insertAfter (), peut-être penser à trouver le prochain enfant vers le bas et en utilisant insertBefore () au lieu.

Chaînage de méthodes

Enfin, aujourd'hui, parlons brièvement du chaînage de méthodes, essentiellement parce que c'est génial. Tout d'abord, considérons les lignes de code suivantes:

$ ('nav # menu'). fadeIn ('fast'); $ ('nav # menu'). addClass ('beingShown'); $ ('nav # menu'). css ('margin-right', '10px');

Cela semble assez raisonnable, non? Mais vous pouvez faire de même en une seule ligne:

$ ('nav # menu'). fadeIn ('fast'). addClass ('beingShown'). css ('margin-right', '10px');

Cela fait exactement la même chose et s'appelle chaînage de méthode. Étant donné que presque toutes les méthodes jQuery renvoient elles-mêmes un objet jQuery, chacune peut alimenter la suivante. Cela signifie moins de code - ce qui est toujours une bonne chose - mais il s'exécute également plus rapidement.

Pourquoi? Eh bien, chaque fois que vous invoquez la requête jQuery de base $ commande et sélecteur, vous lui demandez de parcourir l'arborescence DOM à la recherche d'un élément correspondant. Lorsque vous enchaînez des méthodes, vous n'avez pas besoin de continuer à vous référer au DOM, car il sait où elles se trouvent actuellement et peut exécuter la méthode instantanément.

C’est tout pour aujourd’hui, et je pense que nous avons probablement couvert beaucoup de choses. Vous devriez maintenant être armé de la capacité d'effectuer des manipulations DOM assez lourdes, alors essayez, enchaînez vos méthodes et faites un vrai gâchis de la page. Pour l'instant, vous souhaiterez placer vos scripts dans le pied de page afin de laisser au reste de la page le temps de se charger. La semaine prochaine, nous aborderons la question de faire en sorte que jQuery ne fasse les choses que lorsque tout s'est correctement chargé avec les événements, et le cas curieux des fonctions anonymes.

Si vous venez de tomber sur ce post, vous êtes probablement un développeur Web quelconque et voudrez peut-être consulter tous nos WordPress et blogging articles, ou même notre Meilleurs plugins WordPress Les meilleurs plugins WordPress Lire la suite page.