1-Introduction JQuery.pptx

1. Introduction
2. Les sélecteurs
3. Les événements
4. Manipulation des attributs
5. Manipuler et traverser le DOM

Introduction
a) Qu'est-ce que jQuery ?
 jQuery est un framework qui a pour vocation de simplifier l'utilisation du
langage JavaScript.
 Créé par John Resig, les premières expérimentations virent le jour en 2005
autour d'un concept de base : offrir à JavaScript un moyen simple de
sélectionner des éléments au delà du traditionnel getElementById().
 Par la suite de nombreuses fonctionnalités ont été ajoutées afin de gérer
les événements JavaScript, les attributs, manipuler le DOM, créer des
effets, …
 jQuery une bibliothèque JavaScript
3

Introduction
 jQuery se présente sous forme d'une fonction :
jQuery(selector, context)
 Afin de réduire au maximum la taille des instructions, un alias de cette
fonction est fourni :
$(selector, context)
4

Introduction
a) jQuery et les autres framework
 jQuery n’est pas le seul framework JavaScript open source disponible sur
Internet.
 les plus connus sont AngularJS, Node.js, RéactJS,…
b) Quels sont les avantages à utiliser un Framework
Javascript ?
 Efficacité : Les projets sont plus court à développer, au lieu de coder
des centaines de lignes, de nombreux pré-build et fonction intégrée
permettent un gain de temps énorme.
 Cout : La plupart des framework sont gratuit et openSource.
5

Introduction
c) Utiliser jQuery :
 jQuery est très facile à utiliser. Il est disponible sous forme d'un script «.js»
à charger
 Télécharger jQuery :
sur le site officiel : http://jquery.com/
 Vous y trouverez sur la droite un bloc où sont disponibles deux
compressions possibles :
 Production : le code est compressé au maximum et optimisé pour
l'utilisation en production (Lien direct de téléchargement
: http://code.jquery.com/jquery.min.js)
 Développement : le code n'est pas compressé et est prévu pour être
lu et/ou pour développer avec pour contribuer au projet notamment
(Lien direct de téléchargement :http://code.jquery.com/jquery.js)
6

Introduction
 Ajouter jQuery à nos code html :
<script src="<URL_DU_SCRIPT>"></script>
 Il est préférable de placer la balise script juste avant la fermeture
du body, après tout votre contenu. Ainsi, vous ne bloquerez pas le
chargement de votre page en attente de votre script.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title></title>
</head>
<body>
<script src="/js/libs/jquery.min.js"></script>
</body>
</html>
7

Introduction
jQuery CDN (Content Delivery Network) :
 Si vous ne voulez pas télécharger jQuery, vous pouvez
l’inclure directement dans votre page html par le CDN.
 Google et Microsoft permet de le faire :
Google :
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min
.js"></script>
Microsoft :
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
3.3.1.min.js">
8

Syntaxe de jQuery
Syntaxe de base :
$(selector).action()
 $ : c’est le signe de la fonction principale jQuery
 (selector): pour trouver ou accéder à l’élément HTML
 action() : c’est l’action ou le traitement à exécuter sur cet
éléments
Exemple :
$("p").hide()  Cacher tout les éléments p
9

Les sélecteurs de base
Les selecteur jQuery :
 Les selecteurs jQuery sont utilisés pour selectionner l’élément
HTML par name, id, type, attribut,…
 Afin de simplifier la prise en main du framework, les
développeurs de jQuery ont choisi d'utiliser la méthode de
sélection de CSS3.
 Autrement dit, sélectionner un élément ou une liste
d'élément avec jQuery se fait de la même manière que dans
une feuille de style :
10

Les sélecteurs
jQuery vs CSS
jQuery vs Javascript :
11

Les sélecteurs
 Le selecteur nom de la balise : $("nom_balise")
 Exemples :
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.2.0.min.js"></script>
<script>
$(document).ready(function () { //specify a fct to execute whe the DOM is
//fully loaded
$("button").click(function () {
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me to hide paragraphs</button>
</body>
</html>
12

Les sélecteurs
 Le selecteur #id : Pour retrouver un élément par son id
Exemple :
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function () {
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
13

Les sélecteurs
 Le selecteur .classe : Pour retrouver un élément par sa classe
Exemple :
<!DOCTYPE html>
<html>
<head>
<script>
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
14

Les événements
 jQuery fourni un jeu de méthodes permettant de lier des actions à des
événements particuliers : par exemple au survol de la souris, lors d'un
click ou la pression d'une touche.
 On pourra facilement faire le parallèle avec les attributs HTML onclick,
onmouseover, onkeypress etc.
 Ces fonctions s'utilisent en association avec les sélecteurs sous la forme :
$("#MyElement").click();
Cet exemple place un événement onclick sur l'élément dont l'id est
‘MyElement’
Noter bien, il faut associer la fonction à exécuter lorsque l’événement se
déclenche : $("p").click(function(){
// action goes here!!
});
16

Les événements
 Exemple : événement click
<!DOCTYPE html>
<html>
<head>
<script>
$("p").click(function () {
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
17

Les événements
 Exemple : événement dblclick()
<!DOCTYPE html>
<html>
<head>
<script>
$("p").dblclick(function () {
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
18

Les événements
 Exemple : événement hover()
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").hover(function () {
alert("You entered p1!");
},
function () {
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html> 19

Les événements
 Exemple : événement focus() et blur()
<!DOCTYPE html>
<html>
<head>
<script>
$("input").focus(function () {
$(this).css("background-color", "#cccccc");
});
$("input").blur(function () {
$(this).css("background-color", "#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
20

Les événements
 Exemple : événement mouseenter()
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").mouseenter(function () {
alert("You entered p1!");
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
21

Les événements
 Exemple : événement mouseleave()
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").mouseleave(function () {
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
</body>
</html>
22

Les événements
 Exemple : événement mousedown()
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").mousedown(function () {
alert("Mouse down over p1!");
});
});
</script>
</head>
<body>
</body>
</html>
23

Les événements
 Exemple : événement mouseup()
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").mouseup(function () {
alert("Mouse up over p1!");
});
});
</script>
</head>
<body>
</body>
</html>
24

Les événements
La Methode on() : permet d’attacher un ou plusieurs événement en même temps :
<!DOCTYPE html>
<html>
<head>
<script>
$("p").on({
mouseenter: function () {
$(this).css("background-color", "lightgray");
},
mouseleave: function () {
$(this).css("background-color", "lightblue");
},
click: function () {
$(this).css("background-color", "yellow");
}
});
});
</script>
</head>
<body>
<p>Click or move the mouse pointer over this paragraph.</p>
25

Les événements
 De la même façon, vous avez aussi les événements liés au
clavier : keypress, keydown et keyup
26

1-Introduction JQuery.pptx

Recomendados

Recomendados

Más contenido relacionado

Similar a 1-Introduction JQuery.pptx

Similar a 1-Introduction JQuery.pptx (20)

Último

Último (20)

1-Introduction JQuery.pptx