Maison >interface Web >js tutoriel >5 Syntaxe de base JQuery utile

5 Syntaxe de base JQuery utile

Christopher Nolan
Christopher Nolanoriginal
2025-03-08 00:02:23707parcourir

5 Useful Basic jQuery Syntax

5 Syntaxe de base JQuery utile

1) Masquer / afficher

Ceci est utilisé pour masquer ou afficher des éléments HTML sans effets. Utilisez-le si vous souhaitez masquer ou afficher rapidement certains éléments HTML.
  • Syntaxe: masquer (), show ()
EXEMPLE :
<span>$(document).ready(function(){
</span>	<span>$(".btn1").click(function(){
</span>		<span>$("p").hide();
</span>	<span>});
</span>	<span>$(".btn2").click(function(){
</span>		<span>$("p").show();
</span>	<span>});
</span><span>});</span>
Démo en direct: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_show_hide

2) Fade in / Fade Out

Cela implique de cacher et de montrer des éléments HTML en utilisant de beaux effets de décoloration. Il est bien utilisé lorsque vous souhaitez afficher ou masquer une div et son contenu d'une manière agréable.
  • Syntaxe: fadein (), fadeout ()
EXEMPLE:
<span>$(document).ready(function(){
</span>	<span>$(".btn1").click(function(){
</span>		<span>$("p").fadeOut()
</span>	<span>});
</span>	<span>$(".btn2").click(function(){
</span>		<span>$("p").fadeIn();
</span>	<span>});
</span><span>});</span>
Démo en direct: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein

3) Stop

Si vous souhaitez arrêter les animations en cours d'exécution, utilisez-le.
  • Syntaxe: stop ()
EXEMPLE:
<span>$(document).ready(function(){
</span>	<span>$("#start").click(function(){
</span>		<span>$("div").animate({height:300},3000);
</span>	<span>});
</span>	<span>$("#stop").click(function(){
</span>		<span>$("div").stop();
</span>	<span>});
</span><span>});</span>
Démo en direct: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_stop

4) Animer

Une belle syntaxe qui apporte des modifications à un élément d'un état à un autre avec les styles CSS. Il modifie progressivement la valeur de la propriété CSS, ce qui entraînera des effets d'animation.
  • Syntaxe: animate ()
EXEMPLE:
<span>$(document).ready(function()
</span><span>{
</span>	<span>$("#btn1").click(function(){
</span>		<span>$("#box").animate({height:"300px"});
</span>	<span>});
</span>	<span>$("#btn2").click(function(){
</span>		<span>$("#box").animate({height:"100px"});
</span>	<span>});
</span><span>});</span>
Démo en direct: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate

5) Togue de diapositives

Cette syntaxe est grandement utilisée dans divers sites Web qui utilise jQuery. Idéalement, c'est juste pour cacher et afficher un élément HTML, mais dans un très bel effet coulissant, tout comme le menu de la barre gauche du côté dans la zone administratrice d'un site Web WordPress typique.
  • Syntaxe: slidetoggle ()
EXEMPLE:
<span>$(document).ready(function(){
</span>	<span>$("button").click(function(){
</span>		<span>$("p").slideToggle();
</span>	<span>});
</span><span>});</span>
Démo en direct: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_slidetoggle

Questions fréquemment posées (FAQ) sur la syntaxe jQuery

Quelle est la syntaxe de base de jQuery?

La syntaxe de base de jQuery est conçue pour sélectionner des éléments HTML et effectuer une action sur les éléments. Il est écrit comme $ (sélecteur) .action (). Ici, le signe du dollar ($) définit ou accède à jQuery, le (sélecteur) trouve des éléments HTML, et le .Action () est ensuite effectué sur le ou les éléments. Par exemple, $ («p»). Hide () - cache tous les éléments de paragraphe.

Comment l'événement Ready Document fonctionne-t-il dans jQuery?

L'événement Ready Document est un élément crucial du travail avec jQuery. Il garantit que le code JavaScript ne s'exécute pas tant que le document n'est pas entièrement chargé. Ceci est important car si votre code jQuery s'exécute avant que le document ne soit entièrement chargé, cela peut ne pas fonctionner correctement. La syntaxe de ceci est $ (document) .ready (function () {// jQuery Methods Go ici…});

Quel est le but de la signalisation $ en jQuery?

Le signe $ est un alias pour jQuery. Il est utilisé pour définir ou accéder à jQuery. Si vous utilisez une autre bibliothèque JavaScript qui utilise le signe $, vous pouvez utiliser jQuery.NoConflict () pour éviter les conflits.

Comment sélectionnez-vous les éléments de jQuery?

jQuery fournit un moyen puissant de sélectionner les éléments en utilisant la même syntaxe que CSS. Vous pouvez sélectionner des éléments par nom de balise, nom de classe, ID, attributs ou leur position relative dans le HTML. Par exemple, pour sélectionner tous les éléments de paragraphe, vous utiliseriez $ («p»).

Comment effectuez-vous des actions sur des éléments sélectionnés dans jQuery?

Une fois que vous avez sélectionné des éléments, vous pouvez effectuer des actions sur eux en utilisant des méthodes jQuery. Par exemple, vous pouvez utiliser la méthode .hide () pour masquer les éléments sélectionnés, ou la méthode .show () pour les afficher. Ces méthodes sont appelées sur les éléments sélectionnés, comme ainsi: $ («p»). Hide ().

Pouvez-vous chaîner des actions dans jQuery?

Oui, l'une des caractéristiques puissantes de jQuery est la capacité de chaîner des actions ensemble. Cela signifie que vous pouvez effectuer plusieurs actions sur le même ensemble d'éléments, le tout dans une seule instruction. Par exemple, $ («p»). CSS («Color», «Red»). Slideup (2000).

Quelles sont les événements jQuery et comment sont-ils utilisés?

Les événements jQuery sont des actions qui peuvent être détectées par votre application. Ceux-ci incluent des actions utilisateur telles que des clics ou des pressions de touches, ou des choses comme le chargement du document. Vous pouvez répondre à ces événements avec des fonctions, vous permettant de créer des applications Web dynamiques et interactives.

Comment écrivez-vous des commentaires dans jQuery?

Les commentaires dans jQuery sont écrits de la même manière que dans JavaScript. Vous pouvez utiliser // pour un commentaire unique, ou / * * / pour un commentaire multi-ligne. Les commentaires sont ignorés par le navigateur et peuvent être utilisés pour prendre des notes ou expliquer votre code.

Comment incluez-vous la bibliothèque jQuery dans votre HTML?

Pour inclure la bibliothèque jQuery dans votre HTML, vous devez ajouter une balise de script pointant vers le fichier de source jQuery. Il peut s'agir d'une copie locale, ou vous pouvez créer un lien vers une version hébergée sur un CDN. La balise de script doit être placée dans la tête de votre HTML, ou juste avant la balise du corps de clôture.

Quelle est la différence entre jQuery et JavaScript?

jQuery est une bibliothèque construite avec JavaScript. Il fournit une API plus simple et plus conviviale pour travailler avec des documents HTML, gérer les événements, créer des animations et bien plus encore. Bien que vous puissiez faire toutes ces choses avec JavaScript simple, JQuery le rend plus facile et fonctionne sur une multitude de navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Qu'est-ce que jQuery?Article suivant:Qu'est-ce que jQuery?