📦 Utilisation de jQuery

Dernière mise à jour : 30 Jun 2024

Code HTML à insérer entre les balises <head> et </head> pour charger jQuery dans une page HTML

Pour utiliser jQuery, vous devez d’abord inclure le fichier JS de jQuery dans votre projet. Vous pouvez les télécharger depuis le site web de jQuery ou les inclure en utilisant un CDN, comme ceci :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Comment utiliser les selecteurs CSS avec jQuery ?

Pour utiliser les sélecteurs CSS avec jQuery, vous pouvez utiliser la méthode $() de jQuery en lui passant en argument une chaîne de caractères contenant le sélecteur CSS que vous souhaitez utiliser. Par exemple, si vous souhaitez sélectionner tous les éléments p de votre page web, vous pouvez utiliser le code suivant :

$('p')

Vous pouvez également utiliser des sélecteurs plus complexes pour cibler des éléments spécifiques. Par exemple, si vous souhaitez sélectionner tous les éléments p qui ont la classe important, vous pouvez utiliser le sélecteur p.important :

$('p.important')

Vous pouvez consulter la documentation de jQuery pour obtenir une liste complète des sélecteurs CSS que vous pouvez utiliser avec jQuery.

Comment faire des requêtes Ajax avec jQuery ?

Pour faire des requêtes Ajax avec jQuery, vous pouvez utiliser la méthode $.ajax() de jQuery en lui passant en argument un objet contenant les options de la requête. Par exemple, si vous souhaitez faire une requête GET vers l’URL https://example.com, vous pouvez utiliser le code suivant :

$.ajax({
  url: 'https://example.com',
  method: 'GET'
}).done((response) => {
  // Handle successful response
}).fail((error) => {
  // Handle error
});

Vous pouvez également ajouter des données à envoyer avec la requête en ajoutant une propriété data à l’objet des options. Par exemple, si vous souhaitez envoyer un objet contenant les propriétés name et age, vous pouvez utiliser le code suivant :

$.ajax({
  url: 'https://example.com',
  method: 'GET',
  data: {
    name: 'John',
    age: 30
  }
}).done((response) => {
  // Handle successful response
}).fail((error) => {
  // Handle error
});

Vous pouvez consulter la documentation de jQuery pour obtenir une liste complète des options que vous pouvez utiliser avec la méthode $.ajax().