jQueryfacile | Introduction

La librairie (ou bibliothèque) Javascript jQuery facilite la sélection, la manipulation et l'animation des éléments HTML d'une page Web. Afin de se faire rapidement une idée de son fonctionnement de base, nous allons débuter avec un exemple très simple. Imaginons que nous désirions cacher tous les paragraphes (éléments HTML) présents dans une page dès son affichage dans un navigateur.

Lien vers la librairie

Pour se servir de jQuery, il faut d'abord inclure le fichier de la librairie dans l'entête (<head>) du document HTML.
```
<script src="http://code.jquery.com/jquery-latest.js"></script>
```
Dans cet exemple, on établit un lien externe vers la librairie qui est hébergée sur les serveurs de jQuery (elle l'est aussi ailleurs). On peut aussi choisir de télécharger la librairie afin de l'inclure dans les fichiers de son site Web. Le choix vous revient.
Toujours dans l'entête, on place ensuite un gestionnaire d'événements qui veille à ce que le code qui sera écrit soit exécuté seulement quand la page (document) sera entièrement chargée (ready). Ainsi, on évitera des erreurs.
```
<script>
    $(document).ready(function() {
            // -- C'est ici qu'on va programmer...
        });
</script>
```
Remarquez que la fonction qui est appelée par le gestionnaire d'événements n'a pas de nom. Elle est dite anonyme. C'est qu'en utilisant cette syntaxe, on choisit d'exécuter le code directement à cet endroit sans appeler un fonction qui aurait été créée ailleurs. C'est une technique largement utilisée dans jQuery.

Sélecteurs et méthodes

Pour notre exemple, on doit d'abord sélectionner tous les paragraphes de la page. On va y parvenir avec le sélecteur approprié.
```
$('p')
```
Tous les sélecteurs CSS fonctionnent. Ex.: $('.maClasse'), $('#monId'), $('h1 + p'), $('input['type=text']), etc.
Ensuite, on utilise la méthode de la librairie qui va nous permettre de cacher les éléments que nous avons sélectionnés. C'est tout! C'est facile!
```
$('p').hide();
```
Pour simplifier, on peut comparer une méthode à une fonction. C'est pourquoi elle se termine par des parenthèses.

L'ensemble de la page

Un titre et deux paragraphes ont été ajoutés afin de vérifier si ça fonctionne correctement.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery | Exemple 1</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function() {
            $('p').hide();
        });
</script>
</head>
<body>
    <h3>Si vous ne voyez rien en dessous, c'est que ça marche!</h3>
    <p>Je suis un paragraphe timide...</p>
    <p>Moi aussi!</p>
</body>
</html>

Voir sur JSFinddle.