Débuter avec jQuery

By 25 janvier 2011Javascript/jQuery, Tutoriels

jQuery ?

jQuery est un framework utilisant JavaScript et permettant de ne pas se prendre la tête avec les problèmes d’incompatibilité entre les différents navigateurs… D’abord, voici les bases pour bien utiliser jQuery avec quelques exercices simples. Pour commencer, créez un fichier HTML basique.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mon premier test jQuery</title>
</head>
<body>

<h1>Premier pas avec jQuery</h1>
<p>Un peu de texte pour ne rien dire</p>
<a href="http://artcompix.com">un lien pour tester</a>
</body>
</html>

Dans le head de votre fichier html, il faut charger une librairie jQuery. Bien sûr, on pourrait télécharger le fichier js et le lier ensuite à notre page html, mais il me semble préférable de pointer vers une version hébergée par Google. Comme ça, on bénéficie de la puissance de leurs serveurs et de la mise en cache. Ici, on pointe vers la version « minifiée », très légère.

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

Petite astuce si vous voulez avoir la version la plus récente, insérez la ligne suivante :

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

Premier test

Tout d’abord, il convient de ne pas invoquer des fonctions et autres méthodes de jQuery avant que le DOM (Document Object Model) ne soit chargé. Donc tout notre code jQuery sera écrit entre les lignes suivantes

<script type="text/javascript">
$(document).ready(function() {
  // le code jQuery va ici
});
</script>

On peut commencer

Commençons nos petits essais. On va d’abord afficher un texte dans le DOM à la suite dans la balise <p> :

<script type="text/javascript">
$(document).ready(function() {
  $("p").text("Le DOM est chargé, le test peut commencer...");
});
</script>

Le texte doit s’afficher dans la balise <p> et il remplace ce qui s’y trouvait auparavant.

Si on veut maintenant ajouter le texte et non plus le remplacer, on fait comme suit :

<script type="text/javascript">
$(document).ready(function() {
  $("p").append("<h3>Le DOM est chargé, le test peut commencer...</h3>");
});
</script>

Si on veut afficher le texte tout à la fin de la page :

<script type="text/javascript">
$(document).ready(function() {
  $("body").append("<h3>Le DOM est chargé, le test peut commencer...</h3>");
});
</script>

Voilà ! Simple non ? Il suffit de bien cibler l’élément de la page.

La prochaine fois, nous essaierons de faire quelque chose de plus intéressant 😉

6 commentaires

Laisser un commentaire