Académique Documents
Professionnel Documents
Culture Documents
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
N.NAKKAI Page 1
[TAPEZ LE TITRE DU DOCUMENT] [Sélectionnez la date]
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 :
src="http://code.jquery.com/jquery-1.8.2.min.js"
<SCRIPT TYPE="text/javascript"
SRC="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<SCRIPT TYPE="text/javascript">
$(document).ready(function(){
…
N.NAKKAI Page 2
[TAPEZ LE TITRE DU DOCUMENT] [Sélectionnez la date]
})
</SCRIPT>
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
N.NAKKAI Page 3
[TAPEZ LE TITRE DU DOCUMENT] [Sélectionnez la date]
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();'>
Solution
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]
4) Sélecteurs d'attributs
5) Sélecteurs de formulaires
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");
}
});
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]
N.NAKKAI Page 9