Cela fait partie d'une introduction continue aux séries de programmation web jQuery. La première partie couvrait les bases de jQuery Tutoriel jQuery - Prise en main: Bases et sélecteurs Tutoriel jQuery - Prise en main: Bases et sélecteurs La semaine dernière, j'ai parlé de l'importance de jQuery pour tout développeur web moderne et pourquoi c'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 de 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 utiliser sur ces éléments DOM, ainsi que d'autres fondamentaux du langage.
$ (sélecteur) .method ();
Si vous vous souvenez de la leçon 1, c'est 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 l'endroit le plus facile à partir duquel vous pouvez commencer, et c'est pourquoi nous l'avons choisi.
Pour récapituler rapidement, la partie sélecteur 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 récupérer tous les noms de classe .hidden, nous utiliserons:
$('div.hidden') La deuxième partie de cette équation est la méthode à effectuer sur ces DIV une fois que nous les avons trouvées (si elles existent du tout, ou elles peuvent seulement être un élément "correspondant"). Souvenez-vous que jQuery ne retournera 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 avez plus d'un élément, il doit être défini comme une classe dans CSS.
Sur les méthodes alors; que pouvez-vous faire avec des éléments du DOM de toute façon?
Tout d'abord, je vous ai présenté la méthode .css la dernière fois afin que vous puissiez l'utiliser pour tester. Le format est simple:
.css('property', 'value'); Tout ce qui est définissable 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 changements CSS, alors j'ai de bonnes nouvelles pour vous; il y a aussi une méthode appelée .animate () . C'est un peu plus complexe cependant:
.animate({'property':'value'}, speed); Par exemple:
.animate({'opacity':'0.25', 'height':'100px'}, 'fast'); À ce stade, vous pourriez vous demander à quoi servent les accolades; ils sont appelés un "littéral d'objet" et sont généralement utilisés pour créer une liste de paires propriété / valeur, un peu comme un tableau indexé si vous venez d'autres langues. Vous les utiliserez beaucoup dans jQuery, donc je le répète - prenez l'habitude de vérifier correctement les parenthèses fermées et les accolades!
Consultez cette page pour beaucoup d'exemples de travail de la méthode animate.
En plus de manipuler les propriétés CSS de quelque chose, vous pouvez en ajuster le contenu avec le . Les méthodes text (), .html () et .val () aussi (val pour le contenu des éléments de formulaire) . Ces méthodes agissent à la fois comme des paramètres et des moyens; 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:
Récupère la valeur actuelle du champ name dans le formulaire de commentaire et assigne-le à une variable comment_name :
var commenter_name = $(#comment-form #name).val(); Définissez la valeur de à la valeur saisie à partir de nom_commenter :
$('span.name').text(commenter_name); Ensuite, nous avons une vaste sélection de méthodes pour cloner, déplacer, insérer ou supprimer des parties du DOM. Votre imagination est la limite, vraiment.
Supposons que vous souhaitiez insérer de manière dynamique un bloc d'image publicitaire tous les trois paragraphes dans la colonne de contenu, mais que vous le faites en Javascript pour que le chargement initial de la page reste propre. Cela semble assez complexe, non? À peine…
$('div#content p:nth-child(3n)').after(' 
'); 
');En cassant cela, nous avons demandé à jQuery de:
- Trouver la div avec un identifiant de "contenu"
- Trouvez les p contenus dans cette div
- Filtrez à chaque 3e p en utilisant le pseudo-sélecteur nth-child (plus d'informations ici)
- Insérer un img arbitraire après chaque élément correspondant
Je ne peux pas énumérer toutes les méthodes ici et vous ne voudriez pas lire cela. Le fait est, il y a une méthode pour faire à peu près tout ce que vous pouvez penser quand il s'agit de la manipulation, alors vérifiez l'API pour celui que vous pouvez utiliser.
De plus, gardez à l'esprit qu'il pourrait y avoir plus d'une façon de faire quelque chose. Si par exemple vous ne pouvez pas réduire l'objet correct à insertAfter (), pensez peut - être à trouver le prochain enfant et à utiliser à la place insertBefore () .
Méthode de chaînage
Enfin, jetons un rapide coup d'œil sur le chaînage des méthodes, simplement parce que c'est génial. 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 la même chose en une seule ligne:
$('nav#menu').fadeIn('fast').addClass('beingShown').css('margin-right', '10px'); Cela fait exactement la même chose, et est appelé chaînage de méthodes . Étant donné que presque toutes les méthodes jQuery renvoient elles-mêmes un objet jQuery, chacune peut être alimentée par la suivante. Cela signifie moins de code - ce qui est toujours une bonne chose - mais il fonctionne aussi plus vite.
Pourquoi? Eh bien, chaque fois que vous invoquez la commande et le sélecteur jQuery $ de base, vous lui demandez d'effectuer une recherche dans l'arborescence DOM pour rechercher un élément correspondant. Lorsque vous enchaînez des méthodes, vous n'avez pas besoin de vous référer au DOM, car il sait où elles se trouvent maintenant et peut effectuer 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é avec la possibilité d'effectuer des manipulations DOM assez lourdes, alors allez-y, enchaînez vos méthodes ensemble et faites un vrai bordel de la page. Pour l'instant, vous devez placer vos scripts dans le pied de page afin de donner le temps de charger le reste de la page. La semaine prochaine, nous aborderons le problème de faire faire des choses à jQuery seulement quand tout s'est correctement chargé avec les événements, et le curieux cas des fonctions anonymes.
Si vous venez de tomber sur ce post, vous êtes probablement un développeur web et vous voudrez peut-être consulter tous nos articles WordPress et blogs, ou même notre page Best WordPress Plugins.