Comme nous en avons parlé, jQuery peut être considéré comme une bibliothèque «select and do». Nous avons beaucoup parlé de la sélection, alors parlons maintenant de certaines actions. Rappelez-vous que ce modèle ressemble essentiellement à ceci:
// Select something! $(".something") // Do something! .hide();Plutôt que de travailler avec des exemples plus théoriques, nous passons directement à quelque chose de réel. Nous avons trouvé ce stylo de Drew Barontini et l'avons fourchu.
Voir le formulaire de carte de crédit Pen par Chris Coyier (@chriscoyier) sur CodePen
Dans notre exemple, nous avons masqué le formulaire de carte de crédit par défaut. Ensuite, nous avons créé un lien sur lequel vous pouvez cliquer pour faire glisser vers le haut et faire glisser le formulaire de carte de crédit. Nous sélectionnons le lien, puis faisons un slideToggle sur le formulaire. Sélectionnez et faites!
Nous n'avons pas encore beaucoup parlé d'événements, mais c'est une grande partie de jQuery. Un événement est quelque chose comme un clic de souris, une pression sur une touche, un défilement, etc. La partie «faire» de «sélectionner et faire» se produit souvent après un événement. Ne vous inquiétez pas, nous parlerons beaucoup des événements avant la fin de cette série. Pour l'instant, sachez simplement que on () est le meilleur moyen / standard de lier des événements dans jQuery. Lier, ce qui signifie "surveillez cet événement sur cet élément ou ensemble d'éléments".
Le plan de base:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));Dans notre exemple, le lien était littéralement un lien.
basculer
La façon dont les liens de hachage fonctionnent par défaut dans n'importe quel navigateur est que la fenêtre défile jusqu'à l'élément avec l'ID qui correspond à ce lien de hachage. Parfois c'est bien. J'aime la façon dont cela crée une connexion sémantique entre ce lien et cet élément. Donc, sans JavaScript, le lien a toujours un sens (surtout si vous lui attribuez un titre intelligent).
Mais parfois, ce comportement de saut de lien de hachage est une déception. Nous pouvons l'empêcher dans JavaScript en utilisant preventDefault. Comme ça:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Nous en reparlerons plus à venir.
Bien sûr, la propre documentation de jQuery est une ressource fantastique pour tous les aspects «do» de jQuery (méthodes).
Je pense que la compréhension très basique de ce «sélectionner et faire» et des événements ouvre vraiment un monde de compréhension en JavaScript. Je sais que ça l'a fait pour moi. À la fin de ce screencast, nous examinons la conception actuelle de CSS-Tricks et voyons où JavaScript est clairement utilisé pour réagir à certains événements de clic et modifier l'interface utilisateur. Des trucs très similaires à ce que nous faisions dans la démo précédente. Par exemple, définir une classe active sur les éléments sur lesquels vous cliquez, comme ceci:
Voir le Pen d6f7161a5931397b4f24195a315d52f3 par Chris Coyier (@chriscoyier) sur CodePen