Introduction à jQuery

La bibliothèque jQuery peut être ajoutée à une page web avec une simple balise.

Caractéristiques de la bibliothèque jQuery

jQuery est une bibliothèque de fonctions JavaScript.

La bibliothèque jQuery comprend les caractéristiques suivantes :

  • Sélection des éléments HTML
  • Opérations sur les éléments HTML
  • Opérations CSS
  • Fonctions d'événements HTML
  • Effets et animations JavaScript
  • Parcourir et modifier le DOM HTML
  • AJAX
  • Utilitaires

Ajoutez la bibliothèque jQuery à votre page

La bibliothèque jQuery est située dans un fichier JavaScript qui contient toutes les fonctions jQuery.

Vous pouvez ajouter jQuery à votre page à l'aide des balises suivantes :

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

Veuillez noter que les balises <script> doivent se trouver dans la section <head> de la page.

Exemple de base jQuery

L'exemple suivant montre la fonction hide() de jQuery, qui cache tous les éléments <p> du document HTML.

Exemple

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>Ceci est un en-tête</h2>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<button type="button">Cliquez ici</button>
</body>
</html>

Essayer personnellement

Télécharger jQuery

Il existe deux versions de jQuery disponibles pour le téléchargement : l'une est réduite au maximum, l'autre est non compressée (pour le débogage ou la lecture).

Les deux versions sont disponibles jQuery.com Télécharger

Remplacement de la bibliothèque

Google et Microsoft offrent un bon soutien à jQuery.

Si vous ne souhaitez pas stocker la bibliothèque jQuery sur votre ordinateur, vous pouvez télécharger les fichiers de cœur CDN jQuery de Google ou de Microsoft.

Utilisez le CDN de Google

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

Utilisez le CDN de Microsoft

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>