close

Syntaxe de base de jQuery- Sélection, manipulation et effets

La syntaxe de base de jQuery consiste à utiliser un sélecteur(sélecteur de style CSS) et des méthodes pour manipuler les éléments sélectionnés. Voici quelques exemples de syntaxe de base de jQuery :

 

Sélection d'éléments

  • Sélectionner les éléments par nom de balise HTML: $("tagname") Exemple: $("p") sélectionne tous <p> les éléments de la page.

  • Sélectionner les éléments par classe CSS: $(".classname") Exemple: $(".myClass") sélectionne tous les éléments avec la classe "myClass".

  • Sélectionner les éléments par ID: $("#idname") Exemple: $("#myElement") sélectionne l'élément avec l'ID "myElement".

  • Sélectionner les éléments par attribut : $("[attribute='value']") Exemple : $("[data-type='button']") sélectionne les éléments dont l'attribut data-type est défini sur "bouton".

  • Combinaison des sélections: $("tagname.classname"), $("#idname .classname"), ...

 

Manipulation des éléments sélectionnés

  • Modification du contenu d'un élément: .html(), .text() Exemple: $("#myElement").html("New content") définit le contenu HTML de l'élément avec l'ID "myElement".

  • Modification des attributs d'un élément: .attr(), .prop() Exemple: $("img").attr("src", "newimage.jpg") modifie l' src attribut de tous <img> les éléments.

  • Manipulation des classes CSS d'un élément: .addClass(), .removeClass(), .toggleClass() Exemple: $("#myElement").addClass("highlight") ajoute la classe "highlight" à l'élément d'ID "myElement".

  • Cacher/montrer des éléments: .hide(), .show(), .toggle() Exemple: $(".myClass").hide() cache tous les éléments avec la classe "myClass".

  • Gestion des événements sur les éléments: .click(), .hover(), .submit(), ... Exemple: $("button").click(function() { ... }) enregistre un gestionnaire d'événement click

 

Travailler avec des collections d'éléments

  • Itération dans une collection: .each() Exemple: $("li").each(function() { ... }) itération sur chaque <li> élément de la page.

  • Filtrage d'une collection: .filter(), .not() Exemple: $("div").filter(".myClass") filtre les <div> éléments et sélectionne ceux de la classe "myClass".

  • Insertion d'éléments dans une collection: .append(), .prepend(), .after(), .before() Exemple: $("#myElement").append("<p>New paragraph</p>") ajoute un nouvel <p> élément à l'élément avec l'ID "myElement".

 

Effets et animations

  • Exécution d'effets de fondu à l'entrée/de sortie: .fadeIn(), .fadeOut() Exemple: $("#myElement").fadeIn(1000) s'estompe dans l'élément avec l'identifiant "myElement" sur une durée de 1 seconde.

  • Réalisation d'effets slideUp/slideDown: .slideUp(), .slideDown() Exemple: $(".myClass").slideUp(500) fait glisser vers le haut tous les éléments de la classe "myClass" sur une durée de 0,5 secondes.

  • Réalisation d'animations personnalisées : .animate() Exemple : $("#myElement").animate({ left: '250px', opacity: '0.5' }) anime l'élément avec l'ID "myElement" en modifiant sa position à gauche et son opacité.

 

Ces exemples montrent comment utiliser différents aspects de la syntaxe de base de jQuery pour sélectionner des éléments, manipuler leurs propriétés et appliquer des effets ou des animations. jQuery offre un riche ensemble de méthodes et de fonctionnalités pour simplifier et améliorer les tâches de développement Web.