jQuery

Bienvenue dans la documentation jQuery, un puissant framework JavaScript qui simplifie la manipulation du DOM (Document Object Model) et permet d'ajouter de l'interactivité à vos pages web. Cette documentation vous guidera à travers diverses méthodes et fonctions de jQuery pour vous aider à accomplir diverses tâches courantes lors du développement web. Pour des détails plus approfondis et des exemples supplémentaires, veuillez consulter la documentation officielle de jQuery.

1. Ajoute une nouvelle CLASS à un élément

La méthode .addClass() permet d'ajouter une ou plusieurs classes CSS à un élément sélectionné.

Exemple :

$("#monElement").addClass("maNouvelleClasse");

2. Supprime une/des CLASS à un élément

La méthode .removeClass() permet de supprimer une ou plusieurs classes CSS d'un élément sélectionné.

Exemple :

$("#monElement").removeClass("maClasseASupprimer");

3. Ajouter et supprimer une CLASS par bascule

La méthode .toggleClass() ajoute une classe si elle n'est pas présente, ou la supprime si elle est déjà présente.

Exemple :

$("#monElement").toggleClass("maClasse");

4. Effectuer une requête ajax

Pour effectuer des requêtes AJAX, vous pouvez utiliser $.ajax() pour récupérer des données depuis un serveur.

Exemple :

$.ajax({
  url: "monFichier.php",
  success: function(data) {
    // Traitement des données reçues
  }
});

5. Sélecteurs

Les sélecteurs jQuery permettent de cibler des éléments dans le DOM. Vous pouvez les utiliser pour sélectionner un ou plusieurs éléments.

Exemple :

$("p") // Sélectionne tous les paragraphes
$("#monId") // Sélectionne un élément par son ID

6. Créer une animation

La méthode .animate() permet de créer des animations personnalisées sur des éléments.

Exemple :

$("#monElement").animate({ left: "250px" });

7. Créer un élément après un autre

La méthode .after() insère du contenu après les éléments sélectionnés.

Exemple :

$("#monElement").after("<p>Contenu après l'élément</p>");

8. Créer un élément avant un autre

La méthode .before() insère du contenu avant les éléments sélectionnés.

Exemple :

$("#monElement").before("<p>Contenu avant l'élément</p>");

9. Créer un élément dans un autre

La méthode .append() ajoute du contenu à la fin de l'élément sélectionné.

Exemple :

$("#monElementParent").append("<p>Contenu à la fin</p>");

La méthode .appendTo() ajoute du contenu à la fin de chaque élément sélectionné.

Exemple :

$("<p>Contenu à la fin</p>").appendTo(".mesElementsParent");

10. Obtenir ou changer un attribut

La méthode .attr() permet d'obtenir ou de changer la valeur d'un attribut d'un élément sélectionné.

Exemple :

var valeur = $("#monElement").attr("monAttribut");
$("#monElement").attr("monAttribut", "nouvelleValeur");

11. Sélecteur par attributs

Vous pouvez sélectionner des éléments en fonction de leurs attributs.

Exemple :

$("[name='valeur']") // Sélectionne les éléments avec l'attribut name égal à 'valeur'

12. Se déclenche à chaque changement

L'événement .change() se déclenche lorsque la valeur d'un élément de formulaire change.

Exemple :

$("#monInput").change(function() {
  // Code à exécuter lors du changement
});

13. Se déclenche à chaque clic

L'événement .click() se déclenche lorsqu'un élément est cliqué.

Exemple :

$("#monBouton").click(function() {
  // Code à exécuter lors du clic
});

14. Sélectionner les éléments enfants

La méthode .children() sélectionne les éléments enfants de l'élément sélectionné.

Exemple :

$("#monElementParent").children();

15. Créer un élément dans un autre

La méthode .clone() crée une copie d'un élément, y compris tous les événements associés.

Exemple :

$("#monElement").clone().appendTo("#autreElement");

16. Sélectionne tous les contenus enfants

La méthode .contents() sélectionne tous les contenus enfants (y compris les nœuds texte) de l'élément sélectionné.

Exemple :

$("#monElement").contents();

17. Changer ou obtenir le CSS d’un élément

La méthode .css() permet de changer ou d'obtenir les propriétés CSS d'un élément sélectionné.

Exemple :

$("#monElement").css("propriete", "valeur");
var valeur = $("#monElement").css("propriete");

18. Ajouter du délai

La méthode .delay() ajoute un délai avant l'exécution des méthodes suivantes dans la file d'effets de l'élément.

Exemple :

$("#monElement").fadeOut().delay(1000).fadeIn();

19. Se déclenche pour chaque élément

La méthode .each() permet d'itérer sur chaque élément d'une sélection et d'appliquer une fonction.

Exemple :

$("div").each(function() {
  // Code à exécuter pour chaque élément div
});

20. Vide l’élément sélectionné

La méthode .empty() supprime tous les enfants d'un élément sélectionné.

Exemple :

$("#monElement").empty();

21. Sélectionner des éléments avec l’index

La méthode .eq() permet de sélectionner un élément spécifique dans un ensemble d'éléments sélectionnés.

Exemple :

$("li").eq(2).css("color", "red"); // Sélectionne le troisième élément li et change sa couleur en rouge

22. Transition par transparence (entrer)

La méthode .fadeIn() effectue une transition en fondu pour afficher un élément en le rendant progressivement visible.

Exemple :

$("#monElement").fadeIn();

23. Transition par transparence (sortie)

La méthode .fadeOut() effectue une transition en fondu pour masquer un élément en le rendant progressivement invisible.

Exemple :

$("#monElement").fadeOut();

24. Transition par transparence

La méthode .fadeTo() ajuste l'opacité d'un élément à un niveau spécifié.

Exemple :

$("#monElement").fadeTo("slow", 0.5); // Réduit l'opacité de l'élément à 50% en 1 seconde

25. Transition par transparence à bascule

La méthode .fadeToggle() bascule entre les méthodes .fadeIn() et .fadeOut() pour afficher ou masquer un élément.

Exemple :

$("#monElement").fadeToggle();

26. Chercher et sélectionner un élément

La méthode .find() recherche les descendants correspondant à un sélecteur spécifié.

Exemple :

$("#monElementParent").find("span");

27. Sélectionner le premier élément

La méthode .first() sélectionne le premier élément correspondant au sélecteur spécifié.

Exemple :

$("div").first();

28. Se déclenche sur l’élément focus

L'événement .focus() se déclenche lorsque l'élément reçoit le focus.

Exemple :

$("#monInput").focus(function() {
  // Code à exécuter lorsque l'élément reçoit le focus
});

29. Regarde s’il y a la CLASS sélectionné

La méthode .hasClass() vérifie si l'élément sélectionné a la classe spécifiée.

Exemple :

$("#monElement").hasClass("maClasse");

30. Obtenir la hauteur

La méthode .height() permet d'obtenir la hauteur de l'élément sélectionné.

Exemple :

var hauteur = $("#monElement").height();

31. Masquer des éléments

La méthode .hide() masque l'élément sélectionné.

Exemple :

$("#monElement").hide();

32. Se déclenche à chaque passage de souris

L'événement .hover() se déclenche lorsque la souris passe sur l'élément sélectionné.

Exemple :

$("#monElement").hover(
  function() {
    // Code à exécuter lorsque la souris passe sur l'élément
  },
  function() {
    // Code à exécuter lorsque la souris quitte l'élément
  }
);

33. Implanter ou obtenir du HTML

La méthode .html() permet d'obtenir ou de définir le contenu HTML d'un élément sélectionné.

Exemple :

var contenu = $("#monElement").html();
$("#monElement").html("<p>Nouveau contenu HTML</p>");

34. Se déclenche à chaque touche de clavier

L'événement .keydown() se déclenche lorsque l'utilisateur presse une touche du clavier.

Exemple :

$("#monInput").keydown(function(event) {
  // Code à exécuter lorsqu'une touche est enfoncée
});

35. Se déclenche quand la page à charger

L'événement $(document).ready() se déclenche lorsque le DOM est entièrement chargé.

Exemple :

$(document).ready(function() {
  // Code à exécuter lorsque le DOM est prêt
});

36. Sélectionne le texte d’un élément

La méthode .text() permet d'obtenir le texte contenu dans un élément ou de le remplacer.

Exemple :

var texte = $("#monElement").text();
$("#monElement").text("Nouveau texte");

37. Obtenir ou remplacer la valeur d’un élément

La méthode .val() permet d'obtenir la valeur d'un élément de formulaire ou de la remplacer.

Exemple :

var valeur = $("#monInput").val();
$("#monInput").val("Nouvelle valeur");