<!-- 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">
Publicité
//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é.
$(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 -->
Publicité
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");
$("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:
Publicité
<!-- 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 ?
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) {
Publicité
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 $(\"