[TAPEZ LE TITRE DU DOCUMENT] [Sélectionnez la date]
Chapitre3 : Initiation à jQuery
Introduction
JavaScript est un langage de programmation inventé par Brendan Eich en 1995, et jQuery est
une bibliothèque JavaScript open-source inventée par John Resig en 2006.Ce langage vient
compléter le HTML et le CSS, qui déterminent le contenu et l'apparence des pages web, en y
ajoutant une couche d'interactivité.
I. Initiation à jQuery
1) Définition
jQuery (la bibliothèque JavaScript open-source) permet d'exploiter la puissance de JavaScript
pour accomplir une myriade de choses géniales sur une page web.
2) Avantages de jQuery
Cette bibliothèque permet de :
• Ajouter, supprimer ou modifier des éléments HTML au sein d’une page.
• Changer les styles des éléments de la page en modifiant le CSS qui leur est associé.
• Animer des éléments des pages.
N.NAKKAI Page 1
[TAPEZ LE TITRE DU DOCUMENT] [Sélectionnez la date]
• Envoyer et recevoir des données depuis un serveur grâce à AJAX (asynchronous
JavaScript and XML, c'est-à-dire JavaScript et XML asynchrones) pour ne plus avoir
besoin de recharger vos pages après validation d'un formulaire.
• Multiplateforme : évite les problèmes de compatibilité entre navigateurs
• Gratuite et open source
• Facilite la sélection d’éléments d’une page web •
• Facilite l’AJAX •
• S’écrit en dehors du code HTML
3) Principe de jQuery
1. Sélectionner une partie du document.
2. Agir dessus Objet jQuery = ensemble de noeuds du DOM (Document Object Model)
→ ensemble de balises du document
→ les objets jQuery se créent avec la fonction jQuery() abrégée en $() :
- prend en entrée une chaîne de caractères contenant un «sélecteur»
- renvoie en sortie un objet jQuery
4) Inclusion jQuery dans un fichier HTML
En tant que script externe :
<script type="text/javascript" src="jQuery.js"></script>
Depuis le site de jQuery :
src="http://code.jquery.com/jquery-1.8.2.min.js"
Insérer le lien vers la bibliothèque jQuery
<SCRIPT TYPE="text/javascript"
SRC="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
Attendre le chargement de la page :
<SCRIPT TYPE="text/javascript">
$(document).ready(function(){
…
N.NAKKAI Page 2
[TAPEZ LE TITRE DU DOCUMENT] [Sélectionnez la date]
})
</SCRIPT>
II. Sélection d’éléments
jQuery a une syntaxe qui permet de sélectionner très facilement des éléments sur la page. Le
framework fonctionne avec les sélecteurs de CSS :
➢ par type de bloc
➢ par identifiant
➢ par classe
➢ en combinant les critères
➢ en filtrant sur les noms d’attributs
➢ en faisant référence aux positions relatives dans le DOM
➢ en ne récupérant qu’un seul élément parmi les objets sélectionnés
➢ en filtrant parmi les objets sélectionnés
Exemple :
$("*") ; //Pour renvoyer toutes les balises
$("div") ; //Pour renvoyer tous les div de la page
$('p'); // Sélectionner tous les paragraphes
$('.maClasse'); // Sélectionne les éléments ayant .maClasse pour classe
$('#monId'); // Sélectionne l'élément qui possède l'identifiant #monId
1) Sélection restreinte
Possibilité de sélectionner (comme en CSS) :
➢ Par type de bloc.
➢ Par identifiant (attribut id d'une balise).
➢ Par classe (attribut class d'une balise)
Exemple1:
// <div>Test</div>
$("div")
// <span id="test">JL</span>
$("#test")
// <ul class="test">JL</ul>
$(".test")
N.NAKKAI Page 3
[TAPEZ LE TITRE DU DOCUMENT] [Sélectionnez la date]
Possibilité de combiner les sélecteurs.
Exemple2:
// tous les divs de classe main
$("div.main")
// le tableau d'identifiant data
$("table#data")
// objets d'identifiant "content" ou de classe "menu"
// attention à la position des guillemets
$("#content, .menu")
Exemple3:
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<body>
<div id="monDiv">Bonjour</div>
<a href="#" onClick="$('#monDiv').hide();">
disparition</a>
</body>
</html>
Exercice d’application
1) Ecrire une fonction qui permet d’ajouter une classe c1 à tous les div en javascript.
Solution
<script type="text/javascript">
function addClassC1() {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
div.setAttribute("class", "c1");
}
}
</script>
N.NAKKAI Page 4
[TAPEZ LE TITRE DU DOCUMENT] [Sélectionnez la date]
<body onLoad='addClassC1();'>
2) Modifier le code en utilisant jQuery.
Note:
➢ $("div") permet de sélectionner tous les div.
➢ La méthode .addClass() permet d'ajouter une classe à un objet.
Solution
/* Solution avec fonction */
function addClassC1() { $("div").addClass("c1"); }
<body onLoad='addClassC1();'>
/* Solution directe */
<body onLoad='$("div").addClass("c1");'>
2) Sélection dans un contexte
$(recherche, contexte)
Sélectionne d'abord le contexte (une partie du DOM) puis effectue la recherche à l'intérieur.
Exemple:
// comme en CSS :
$("div .header").hide();
// ou chercher tous les div
// chercher des balises de class header à l'intérieur
$(".header", $("div")).hide(); // cacher ces balises
3)Sélecteurs d'ordre
// premier paragraphe
p:first
// dernier élément de liste
li:last
// quatrième lien
a:eq(3)
N.NAKKAI Page 5
[TAPEZ LE TITRE DU DOCUMENT] [Sélectionnez la date]
// paragraphes pairs ou impairs
p:even ou p:odd
// Tous les liens à partir (greater than) du quatrième ou avant
(lower than)
a:gt(3) ou a:lt(4)
4) Sélecteurs d'attributs
// les éléments <div /> ayant un identifiant
$("div[id]")
// les éléments <div /> avec id "test"
$("div[id='test']")
// les éléments <div /> dont l'id commence par test
$("div[id^='test']")
// les éléments <div /> dont l'id termine par test
$("div[id$='test']")
// les éléments <div /> dont l'id contient test
$("a[href*='test']")
5) Sélecteurs de formulaires
// sélectionner les checkbox
$("input:checkbox")
// sélectionner les boutons radio
$("input:radio")
// sélectionner les bouton
$(":button")
// sélectionner les champs texte
$(":text")
Sélecteurs de formulaires
$("input:checked")
N.NAKKAI Page 6
[TAPEZ LE TITRE DU DOCUMENT] [Sélectionnez la date]
$("input:selected")
$("input:enabled")
$("input:disabled")
<select name="valeur">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>
$("select option:selected").val()
6) Sélecteurs de hiérarchie
Possibilité de sélectionner de manière plus précise :
Frère, enfants, parents
Utilisation de fonctions
Exemple:
// frère suivant
.next(expr)
// frère précédent
.prev(expr)
// frères
.siblings(expr)
// enfants
.children(expr)
// père
.parent(expr)
7) Sélecteurs supplémentaires
Utilisation de is()
Exemple:
$("table td") .each(function() {
N.NAKKAI Page 7
[TAPEZ LE TITRE DU DOCUMENT] [Sélectionnez la date]
if ($(this).is(":first-child")) {
$(this).addClass("firstCol");
}
});
III. Fonctions de selection
1) La fonction eq(n)
La fonction eq(n) retourne un objet jQuery enveloppant le nième element.
Exemples :
var paras = $("p"); paras.first(); // retourne le premier <p>
paras.last(); // retourne le dernier <p>
paras.eq(1) // retourne le deuxième <p>
paras.eq(-2) // le 2nd <p>
à partir de la fin paras[1] // le 2nd <p>
2) La fonction slice()
La fonction slice() retourne un sous-ensemble des éléments à partir d'un index donné et jusqu'à
un index de fin (ou la fin de l'ensemble)
Exemples :
$("p").slice(2,5); // 3ème, 4ème et 5ème <p>
$("div").slice(-3); // les 3 derniers <div>
3) La fonction not()
La fonction not()peut être interprétée comme une fonction qui exclut les éléments qui matchent le
paramétre
Exemple :
//tous les div sauf les deux précisés en paramètre
$("div").not("#header,#footer");
4) La fonction add()
La fonction add() ajoute des éléments à un objet jQuery
La fonction add() enlève les éléments dupliqués et ordonne
N.NAKKAI Page 8
[TAPEZ LE TITRE DU DOCUMENT] [Sélectionnez la date]
les éléments sélectionnés selon leur ordre dans le document
Exemples :
// écritures équivalents pour sélectionner tous les div et p
$("div,p") // Utilisation d'un groupe de sélecteurs
$("div").add("p") // Passer un sélecteur à add
$("div").add($("p")) // Passer un objet jQuery
IV. La fonction each
appelle une fonction pour chaque élément :
$(this) = élément courant
i - index de l'élément courant
Possibilité de récupérer l'élément sous forme DOM
Exemple:
$("table tr").each(function(i){
if (i % 2==0)
$(this).addClass("odd");
});
N.NAKKAI Page 9
