<!-- Slide number: 1 -->
jQueryIntroduction
OUALI Mohamed
<!-- Slide number: 2 -->
Présentation de jQuery
Bibliothèque JavaScript libre
Permet de traverser et de manipuler facilement l'arbre DOM des pages web
Permet par exemple de changer/ajouter une classe CSS, créer des animations, modifier des attributs, etc.
Gère les événements JavaScript
Fait des requêtes AJAX plus simplement
<!-- Slide number: 3 -->
Présentation de jQuery
jQuery a été créée par John Resig en 2006
La version la plus récente est : 1.11.3
<!-- Slide number: 4 -->
Pourquoi utiliser jQuery
Facile à apprendre (utilise la syntaxe CSS pour la sélection)
De petite taille
Documentation fournie et support disponible
Compatibilité multi-navigateurs (cross-browser)
Très utilisé
<!-- Slide number: 5 -->
Principe de base
Principe de base de jQuery
Sélectionner des éléments
Et en faire quelque chose
<!-- Slide number: 6 -->
Installation
jQuery est tout simplement un fichier JavaScript
Il vous suffit donc de le télécharger sur le site officiel : http://jquery.com
Intégration dans la page Web
Ou directement en ligne
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Notes:
<!-- Slide number: 7 -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery</title>
<script type="text/javascript" src="jquery-1.11.3.min.js" >
</script>
<script type="text/javascript">
//Code javascript
</script>
</head>
<body>
</body>
</html>
Notes:
<!-- Slide number: 8 -->
Démarrage
Pour être sûr que jQuery puisse fonctionner et trouver les éléments qu’on lui demande, le DOM (les éléments) doit être prêt.
Pour cela on utilise la fonction ready() : elle se lance à l’instant où le DOM est totalement chargé.
Publicité
$(document).ready(function(){
// Votre code jQuery ici
});
Notes:
<!-- Slide number: 9 -->
Exemple
$("div").addClass("special");
$ est l’objet jQuery (nomé aussi jQuery).
"div" recherche les éléments div du document
$("div") retourne un ensemble jQuery (contenant 0 ou plusieurs nœuds DOM).
addClass(…) une fonction qui permet de modifier tous les div (dans ce cas ajouter une classe special)
Notes:
<!-- Slide number: 10 -->
Les sélecteurs
jQuery utilise les sélecteurs CSS
Le sélecteur d’éléments : $("p"), $("a"), $("div"), …
Le sélecteur d’identifiant #id : $("#test")
Le sélecteur de classes .class : $(".test")
En plus de quelques sélecteurs spécifiques :
(:first, :last, :has(), :visible, :hidden, etc)
Notes:
<!-- Slide number: 11 -->
Exemple
$(”div").css(”border", ”3px solid red");
<div id="body">
<h2>Some Header</h2>
</div>
<div class="contents">
<p>Paragraph 1</p>
</div>
<p>Paragraph 2</p>
Notes:
<!-- Slide number: 12 -->
Traversing (parcourir le DOM)
Parfois les sélecteurs CSS ne suffisent pas
jQuery fournit un ensemble de fonctions qui permettent de parcourir l’arborescence du DOM
(parent(), next(), prev(), children(), etc)
Notes:
<!-- Slide number: 13 -->
Exemple
$(”h2").parent().css(”border", ”3px solid red");
<div id="body">
<h2>un titre</h2>
</div>
<div class="contents">
<p>Paragraphe 1</p>
</div>
<p>Paragraphe 2</p>
Notes:
<!-- Slide number: 14 -->
Chaining (Chainage)
Vous pouvez effectuer plusieurs actions sur un même ensemble d’éléments
$("div").hide();
$("div").hide().css("color","blue");
Publicité
$("div").hide().css("color","blue").remove();
Notes:
<!-- Slide number: 15 -->
Exemple
$(”.para")
.parent().css(”border", ”3px solid red")
.siblings().css(”border", ”3px solid green");
<div id="body">
<h2>Some Header</h2>
</div>
<div class="contents">
<p class=“para”>Paragraphe 1</p>
</div>
<p>Paragraphe 2</p>
Notes:
<!-- Slide number: 16 -->
Actions possibles
Après la sélection des éléments on peut leurs appliquer plusieurs actions :
Manipuler les attributs (addClass, att, …)
Manipuler les feuilles de styles CSS (css)
Manipulation du DOM (append, prepend, remove, clone, …)
Notes:
<!-- Slide number: 17 -->
Manipulation (.after)
$("a[target=_blank]")
.after("<img src='open.png'/>");
Notes:
<!-- Slide number: 18 -->
Manipulation (.append)
$("a[target=_blank]")
.append(“ (S’ouvre dans autre fenêtre)");
Notes:
<!-- Slide number: 19 -->
Manipulation (.css())
$("a[target=_blank]")
.css({
color : “red“,
fontWeight : “bold"
});
Notes:
<!-- Slide number: 20 -->
Le sélecteur HTML
$("<li><a></a></li>")
.find("a")
.attr("href", "http://www.google.fr")
.html("Google")
.end()
.appendTo("ul");
Que fait ce code ?
Publicité
Notes:
<!-- Slide number: 21 -->
Evènement (.click())
$("a.menu").click(function(e) {
$(this).next().toggle();
return (false);
});
Que fait ce code ?
Notes:
<!-- Slide number: 22 -->
Evènement (.submit())
$("form").submit(function(e) {
if ($('#name').val() === "") {
$('span.help').show();
return false;
}
});
Que fait ce code ?
Notes:
<!-- Slide number: 23 -->
Evènement (.hover())
$("li").hover(function(e) {
$(this).animate({marginLeft:38, marginRight:0});
},function() {
$(this).animate({marginLeft:18, marginRight:18});
});
Que fait ce code ?
Notes:
<!-- Slide number: 24 -->
Effet (.slideToggle())
$("a.menu").click(function(e) {
$(this).next().slideToggle("slow");
return false;
});
Que fait ce code ?
Notes:
<!-- Slide number: 25 -->
Effet (.animate())
$("div.block").animate({
fontSize: "2em",
width: "+=20%",
backgroundColor: "green"
});
Que fait ce code ?
Notes:
<!-- Slide number: 26 -->
Effet (.hide()/.show())
$("div.block").hide("slow", function(){
$(this).show("slow");
});
Que fait ce code ?
\");   Notes: Manipulation (.append) $(\"a[target=_blank]\") .append(“ (S’ouvre dans autre fenêtre)\");   Notes: Manipulation (.css()) $(\"a[target=_blank]\") .css({ color : “red“, fontWeight : “bold\" });   Notes: Le sélecteur HTML $(\"