Licence STIC IUT de Marne-la-Valle

12/03/2015
Cours de jQuery

Cours 1
Premiers pas avec jQuery :
slecteurs et modifieurs

Philippe Gambette

Organisation pratique
Contact
- Courriel : philippe.gambette@gmail.com
- Avant ou aprs le cours.
- Posez des questions, demandez des exercices d'entrainement !
Notes et devoirs
Travail personnel :
- refaites les exercices de TP et TD mal compris
- pratiquez en exprimentant sur vos projets web
Pendant les cours :
- petits tests de dbut de cours ou TP
- examen / TP not le 4 juin ou le 11/12 juin

Sources
Cours de Jean-Loup Guillaume
http://jlguillaume.free.fr/www/documents/teaching/ntw1213/LI385_C5_Jquery.pdf

Cours de programmation web avance de Thierry Hamon

https://perso.limsi.fr/hamon/PWA-20122013/Cours/JQuery.pdf

jQuery : crivez moins pour faire plus !, de tit_toinou

http://openclassrooms.com/courses/jquery-ecrivez-moins-pour-faire-plus

jQuery, Le guide complet, de Guillaume Allain et Timothy Stubbs

Javascript & Ajax pour les nuls, dAndy Harris

Introduction
Jquery

bibliothque Javascript
pour simplifier le dveloppement de sites web interactifs

Prsent pour la premire fois en janvier 2006 par son crateur John Resig
Premire version stable en aot 2006
Tlchargeable sur http://jquery.com/download/

Introduction
Jquery

bibliothque Javascript
pour simplifier le dveloppement de sites web interactifs

Prsent pour la premire fois en janvier 2006 par son crateur John Resig
Premire version stable en aot 2006
Tlchargeable sur http://jquery.com/download/

Introduction
Jquery

bibliothque Javascript
pour simplifier le dveloppement de sites web interactifs

Prsent pour la premire fois en janvier 2006 par son crateur John Resig
Premire version stable en aot 2006
Tlchargeable sur http://jquery.com/download/

https://www.airpair.com/angularjs/posts/jquery-angularjs-comparison-migration-walkthrough

Avantages
Puissante
Lgre (94 Ko), avec utilisation possible du fichier sur les serveurs de
Google : https://developers.google.com/speed/libraries/devguide#jquery
Multiplateforme : vite les problmes de compatibilit entre navigateurs
Gratuite et open source
Facilite la slection dlments dune page web
Facilite lAJAX
Scrit en dehors du code HTML

Principe de jQuery
1. Slectionner 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 crent avec la fonction jQuery() abrge en
$() :
- prend en entre une chane de caractres contenant un slecteur
- renvoie en sortie un objet jQuery
Exemple :
1. $("div") renvoie un objet contenant tous les "div" du document.
2. $("div").hide() cache tous les "div" du document.

Q1

En pratique
Insrer le lien vers la bibliothque jQuery

Q2

<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(){

})
</SCRIPT>

Q3
Q4

Les abrviations
jQuery() sabrge en $()
attention aux conflits avec dautres librairies :
http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
$(document).ready(function(){}) sabrge en
$(function(){})

SLECTIONNER
http://api.jquery.com/category/selectors/

Slection dlments
Possibilit de slectionner :
par type de bloc
par identifiant

Similaire slection CSS !

par classe
en combinant les critres
en filtrant sur les noms dattributs
en faisant rfrence aux positions relatives dans le DOM
en ne rcuprant quun seul lment parmi les objets slectionns
en filtrant parmi les objets slectionns

Slection dlments par type de bloc, identifiant, classe

Pour renvoyer toutes les balises :
$("*")
Pour renvoyer tous les <div> de la page :
$("div")

// <span id="test">JL</span>
$("#test")
// <ul class="test">JL</ul>
$(".test")

$("div").length donne le
nombre de div dans la page.

Slection dlments par combinaison de critres

// tous les divs de classe main
$("div.main")
// tous les tableaux d'identifiant data
$("table#data")
// objets d'id "content" ou de classe "menu"
// attention la position des guillemets
$("#content, .menu")

Slection dlments filtre

// Recherche de p contenant des objets avec classe
header
// rendre visible ces objets
$("p").find(".header").show();
// similaire :
// $(selecteur, contexte)
$(".header", $("p")).show();

Slection dlments filtre par numro dlment

// rcupration de tous les lments + extraction
$("div").get(2)
$("div")[2] // quivalent
// rcupration d'un seul lment
$("div").eq(2)
// en partant de la fin
$("div").eq(-2)

Slection dlments fonde sur la structure du DOM

Possibilit d'atteindre :
les fils (>) ;
tous les descendants (espace) ;
le (+) ou les (~) frres suivants.
<ul>
<li>item 1</li>
<li>item 2</li>
<li class="trois">item 3
<ol><li>3.1</li></ol></li>
<li>item 4
<ol><li>4.1</li></ol></li>
<li>item 5</li>
</ul>

// cache 4 et 5
$('li.trois ~ li').hide();
// cache 4
$('li.trois + li').hide();
// cache les <ol>
$("ul ol")
// ne cache rien
$("ul > ol")

Slection dlments fonde sur la structure du DOM

Possibilit de slectionner de manire plus prcise :
frre, enfants, parents
utilisation de fonctions

// frre suivant
.next(expr)
// frre prcdent
.prev(expr)
// frres
.siblings(expr)
// enfants
.children(expr)
// pre
.parent(expr)

Autres slecteurs
// premier paragraphe
p:first
// dernier lment de liste
li:last
// quatrime lien
a:nth(3) ou a:eq(3)
// paragraphes pairs ou impairs
p:even or p:odd

every

// Tous les liens partir (greater than) du

quatrime ou avant (lower than)
a:gt(3) or a:lt(4)
// Liens qui contiennent le mot click
a:contains('click')

Slecteurs de visibilit
// si l'lment est visible
$("div:visible")
// sinon
$("div:hidden")

Slecteurs de formulaire
// slectionner les cases cocher
$("input:checkbox")
// slectionner les boutons radio
$("input:radio")
// slectionner les boutons
$(":button")
// slectionner les champs texte
$(":text")
$("input:checked")
$("input:selected")
$("input:enabled")
$("input:disabled")

Slecteurs de formulaire
<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()

Fonction foreach
Appelle une fonction pour chaque lment slectionn :
$(this) : lment courant
i : index de l'lment courant

$("table tr")
.each(function(i){
if (i % 2)
$(this).addClass("odd");
}
);

MODIFIER
http://api.jquery.com/category/manipulation/

Modifier le contenu HTML

.html('[contenu]') : remplacement du contenu dun lment (les
balises sont considres comme des balises)
.text('[contenu]') : remplacement du contenu dun lment en
considrant le tout comme du texte (les caractres < et > des balises sont
remplacs par les entits XML (&gt; et &lt;)
.after('[contenu]') : insertion du contenu aprs llment
slectionn
.before('[contenu]') : insertion du contenu avant llment
slectionn
.append('[contenu]') : insertion du contenu dans llment
slectionn la suite des lments existants
.prepend('[contenu]') : insertion du contenu dans llment
slectionn avant les lments existants

Modifier le contenu HTML

.wrap('<balise></balise>') : insertion des balises passes en
paramtre de part et dautre de llment
.wrapInner('<balise></balise>') : insertion des balises
passes en paramtre de part et dautre des enfants de llment
.unwrap() : suppression de la balise parent
Possibilit de combiner les modifications les unes la suite des autres :
$("div").html("Hello jQuery").wrapInner('<b></b>')
Attention la lisibilit !

Possibilit de rcuprer du contenu dun autre objet pour le passer en

paramtre :
$("div.a").html($("div.c").html());
met le contenu du div.c dans le div.a

Rcuprer ou modifier les proprits CSS

Rcupration de la valeur de l'attribut CSS d'un lment:
.css('color') renvoie la couleur de l'lment
Attribution d'une valeur l'attribut CSS d'un lment:
.css('color','red') attribue la couleur rouge l'lment
Attribution d'une valeur l'attribut CSS des lments de classe CSS id
en fonction de leur valeur actuelle l'aide d'une fonction:
var tailleActuelle =
parseInt($('#id').css("font-size"));
$('#id').css("font-size",function(){
return tailleActuelle+10;
});
augmente de 10 points la taille de police de caractres
des lments de classe id
Attribution d'un ensemble de valeurs un ensemble d'attributs CSS d'un
lment:
.css({'border': '1px solid black', 'color':
'red'}) attribue la couleur rouge l'lment et lui ajoute une bordure
noire.

Rcuprer ou modifier la classe CSS

.addClass('laClasse')
Ajoute la classe CSS laClasse l'lment.
.removeClass('laClasse')
Retire la classe CSS laClasse l'lment.
.toggleClass('laClasse')
Ajoute la classe CSS laClasse l'lment s'il ne l'a pas, la lui retire
sinon.
.hasClass('laClasse')
Renvoie true si l'lment a la classeCSS laClasse, false sinon.