4. Faites bouger votre HTML
Vous pouvez utiliser jQuery pour créer des animations et des effets de base. Le cœur de l'effet d'animation est la fonction animate(), qui peut modifier le style CSS spécifié à tout moment. Par exemple, vous pouvez modifier la hauteur, la largeur, la transparence ou la position. Vous pouvez également spécifier la vitesse de l'animation, et. vous pouvez utiliser des millisecondes lors de la modification de la vitesse (millisecondes), ou vous pouvez utiliser des valeurs de vitesse prédéterminées : lente, normale ou rapide.
Voici un exemple d'animation qui modifie la largeur et la hauteur d'un élément en même temps. n'est pas une valeur initiale, seulement la valeur finale. La valeur initiale peut être extraite directement de l'élément existant. En même temps, j'ai également ajouté une fonction de rappel :
$('#grow').animate({ height: 500. , width: 500 }, "slow", function() {alert('L'élément a fini de grandir !');});En utilisant ces fonctions intégrées de jQuery, il est assez facile de créer des effets d'animation que vous pouvez utiliser. la fonction show() et la fonction hide() pour afficher et masquer les éléments peuvent être configurés pour s'exécuter immédiatement ou à une vitesse spécifiée. Vous pouvez également utiliser les fonctions fadeIn() et fadeOut() ou les fonctions slideDown() et slideUp(). pour afficher ou masquer un élément, selon l'effet souhaité. Voici un exemple simple pour afficher l'effet de glissement vers le bas de la barre de navigation :
$('#nav').slideDown('slow'); scripts et gestion des événements jQuery est probablement le meilleur pour manipuler le DOM et le traitement des événements a été effectué. Il est en fait très facile de parcourir et d'utiliser le DOM. La liaison, la suppression et l'appel d'événements sont également très naturels et faciles à utiliser, et comparés à manuellement. en écrivant ces codes, les erreurs peuvent être considérablement réduites. En fait, jQuery simplifie le DOM Diverses opérations Vous pouvez créer un élément et le lier à d'autres éléments en utilisant la fonction append(), vous pouvez copier l'élément en utilisant clone(), vous pouvez. définir le contenu en utilisant html(), vous pouvez supprimer le contenu en utilisant la fonction empty() et supprimer en utilisant la fonction () supprime les éléments et le contenu, et vous pouvez même utiliser la fonction wrap() pour envelopper cet élément avec un autre élément. des fonctions qui peuvent modifier le contenu de l'objet jQuery lui-même en traversant le DOM. Vous pouvez également obtenir les frères et sœurs d'un élément, parents() ou enfants. Vous pouvez également utiliser next() et prev() pour. find siblings. find() est peut-être la plus puissante de ces fonctions. Elle vous permet d'utiliser un sélecteur jQuery pour rechercher dans votre objet jQuery et ses nœuds descendants. Ces fonctions deviennent encore plus puissantes lorsqu'elles sont associées à la fonction end(). La fonction end() agit comme une annulation, faisant revenir votre objet jQuery au moment où vous avez appelé find() ou parents() ou tout autre état avant la fonction de traversée. Si vous utilisez le lien de méthode que nous avons mentionné ci-dessus, des fonctions très complexes. peut être implémenté avec un code simple. Le Listing7 montre un exemple, vous trouverez un formulaire de connexion et effectuerez quelques opérations sur les éléments qu'il contient. Traverser et manipuler facilement le DOM$('form#login')// cacher tout. les étiquettes à l'intérieur du formulaire avec le class.find( 'label.optional').hide().end()// ajoutent une bordure rouge à tous les champs de mot de passe du formulaire.find('input:password') .css('border', '1px solid red'). end()// ajouter un gestionnaire de soumission au formulaire.submit(function(){return confirm('Etes-vous sûr de vouloir soumettre ?');}) ; Croyez-le ou non, cet exemple n'a en fait qu'un seul lien. Une ligne de code avec quelques espaces au milieu. J'ai d'abord sélectionné le formulaire de connexion, puis j'ai trouvé les étiquettes facultatives à l'intérieur, je les ai masquées, puis j'ai appelé end(. ) pour revenir au formulaire. J'ai trouvé la zone de saisie du mot de passe et j'ai changé la bordure en rouge, puis j'ai appelé à nouveau end() pour revenir au formulaire. Enfin, j'ai ajouté une fonction de traitement du temps de soumission à ce formulaire. Ce qui est intéressant, c'est qu'en plus du code extrêmement concis, jQuery a également optimisé toutes les opérations par lui-même pour garantir que lorsque tout est bien connecté, vous n'avez pas besoin de chercher un élément deux fois. La gestion des événements généraux est également très simple, tout comme. appeler la fonction click(), submit() ou mouseover(), puis la transmettre à un écouteur d'événement. Les fonctions sont les mêmes. De plus, vous pouvez également utiliser bind('eventname', function(){}) pour. spécifiez la fonction de traitement des événements. Vous pouvez utiliser unbind('eventname') pour dissocier un événement, ou utiliser unbind() pour dissocier tous les événements. Pour plus d'informations sur cette série de fonctions et comment les utiliser, veuillez consulter la programmation d'application de jQuery. documentation de l'interface (API). 6. Révéler la puissance des sélecteurs jQuery
Normalement, vous utilisez l'ID pour sélectionner des éléments, tels que #myid ; ou utilisez des noms de classe pour sélectionner, tels que div.myclass. Cependant, jQuery a un outil assez complexe et complet. syntaxe de sélecteur qui vous permet d'utiliser un seul sélecteur pour trouver n'importe quelle combinaison d'éléments. La syntaxe
du sélecteur de jQuery est largement basée sur CSS3 et XPath, plus vous en savez sur CSS3 et XPath, mieux vous pouvez utiliser jQuery. , y compris CSS3 et XPath, veuillez vous référer aux liens de ressources à la fin de cet article.
CSS3 inclut une certaine syntaxe qui est prise en charge par tous, vous ne la verrez donc peut-être pas très souvent. Cependant, vous pouvez toujours l'utiliser pour sélectionner des éléments dans jQuery, car jQuery possède son propre moteur d'analyse de sélecteur personnalisé. Par exemple, pour ajouter un tiret à chaque colonne vide du tableau, vous pouvez utiliser le pseudo-opérateur :empty :
$('td:empty').html('- '); Comment trouver tous les éléments qui ne contiennent pas un nom de classe spécifique ? CSS3 a une syntaxe spécifique pour cette situation, en utilisant le pseudo-opérateur :not. Le code suivant masquera tous les éléments de la zone de saisie de texte qui ne contiennent pas le nom requis. class name. $('input:not(.required)').hide( ); Vous pouvez également utiliser des virgules pour connecter plusieurs sélecteurs ensemble, tout comme en CSS. Le code suivant masquera différents types d'éléments de liste sur la page. en même temps. $('ul, ol, dl' ).hide();XPath est un outil puissant pour rechercher des éléments dans un document. Il est quelque peu différent du CSS et vous permet de trouver de nombreuses choses qui ne peuvent pas être trouvées en utilisant CSS. . Par exemple, vous souhaitez ajouter Pour une bordure, vous pouvez faire ceci : $("input:checkbox/..").css('border', '1px solid #777'); jQuery a également des sélecteurs supplémentaires qui. ne se trouvent pas dans CSS et XPath, par exemple. Pour augmenter la lisibilité d'un tableau, vous souhaiterez peut-être définir des lignes paires et impaires pour utiliser des noms de classe différents. Faire cela avec jQuery est un jeu d'enfant. grâce au sélecteur :odd Voici le code démontrant l'utilisation de la classe striped pour changer la couleur d'arrière-plan des lignes impaires d'un tableau : $('table.striped > tr:odd').css('background', ' #999999'); Vous voyez, les puissants sélecteurs de jQuery peuvent simplifier votre code. Quel que soit l'élément que vous souhaitez affecter, peu importe sa clarté ou son flou, vous pouvez toujours trouver un moyen de le cibler à l'aide d'un simple sélecteur jQuery 7. Étendre jQuery à l'aide de plug-ins Contrairement à d'autres logiciels, vous pouvez Écrire un plug-in jQuery n'est en aucun cas une épreuve douloureuse avec un tas d'API compliquées. En fait, écrire un plug-in pour jQuery est si simple que vous voudrez peut-être le faire. écrivez un plug-in plus tard pour rendre votre code plus concis. Voici la partie la plus élémentaire du plug-in que vous allez écrire : $.fn.donothing = function(){return this;}; , cela nécessite une petite explication. Tout d'abord, vous devez ajouter une fonction à chaque objet jQuery, vous devez l'attribuer à $.fn. Deuxièmement, la fonction doit renvoyer ceci (objet jQuery) pour vous assurer qu'elle ne rompt pas le chaînage des méthodes. règles mentionnées ci-dessus. Vous pouvez facilement étendre le code ci-dessus. Pour écrire un Pour changer la couleur d'arrière-plan du plug-in au lieu d'utiliser css('background'), vous pouvez faire ceci : $.fn.background = function(bg) {return this.css('background', bg);}; Notez que je peux renvoyer directement la fonction css (), car il s'agit déjà d'un objet jQuey lui-même, donc le chaînage de méthodes peut bien fonctionner. constatez que vous répétez constamment du code. Par exemple, lorsque vous utilisez la fonction each() pour gérer la même chose encore et encore, vous pouvez envisager d'utiliser un plug-in [Annotation : Pas très clair.]. sont très faciles à développer, il existe des milliers de plug-ins disponibles pour vous. JQuery propose des plug-ins pour les tableaux, les coins arrondis, les diaporamas, les info-bulles, la sélection de dates et à peu près toutes les applications auxquelles vous pouvez penser. une liste complète des plug-ins dans la liste des ressources à la fin de cet article. Le plug-in le plus complexe et le plus utilisé est Interface, un plug-in d'animation qui gère le tri, les effets de glissement, divers effets spéciaux complexes et autres. effets d'interface utilisateur intéressants et complexes. L'interface est à jQuery ce que Scriptaculous est au Prototype. Un plug-in tout aussi populaire et utile est le plug-in Form, qui vous permet de simplement soumettre un formulaire en arrière-plan en utilisant ajax. cette situation : lorsque vous devez détourner l'événement de soumission du formulaire, recherchez tous les différents champs de sortie de texte et utilisez-les pour créer l'appel ajax. 8. jQuery Après cela, je viens de parler de quelques choses superficielles sur jQuery. intéressant à utiliser, car les nouvelles fonctionnalités et les nouvelles méthodes que vous apprenez semblent très naturelles et logiques. Une fois que vous utiliserez jQuery, vous vous rendrez compte que cela peut simplifier votre travail de développement Javascript et Ajax, chaque fois que vous apprenez quelque chose, le code deviendra plus simple. Après
avoir appris jQuery, j'ai trouvé beaucoup de plaisir dans la programmation Javascript, et toutes les choses ennuyeuses sont bien gérées, donc j'ai juste besoin de me concentrer sur la partie principale. Après avoir utilisé jQuery, je me souviens à peine de la dernière fois que j'ai utilisé un for. boucle. J'ai même peur d'utiliser d'autres bibliothèques Javascript. jQuery a complètement changé ma vision de la programmation Javascript.