Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
Jquery
2
Jquery ou Javascript ? Javascript Evolution du javascript
Langage très connu, très utilisé Technologie incontournable Evolution du javascript Faciliter l’écriture du code licence MIT et GNU GPL GNU GPL : on peu l’utiliser, mais pas le modifier MIT : permettant d'inclure des modifications sous d'autres licences, y compris non libres
3
Jquery, à quoi ça ressemble ?
Code source de Jquery
4
Bibliothèque ou framework ?
Ensemble de fonctions qui peuvent être insérées dans le code Framework Pareil sauf qu’il y a tellement de fonctions que ça influence la structure même de notre code Constitue la base d’une application Pour info, c’est seulement pour les développeur curieux
5
Avantages Uniformise les navigateurs les animations Les formulaires
Interprétation du JavaScript propre à chaque navigateur les animations Point fort de Jquery Les formulaires Plus facile qu’avec du javascript seul Ajax simplifié
6
Sites/CMS utilisant Jquery
Site du Zéro Google et ses différents services Mozilla Amazon WordPress ... CMS : système de gestion de contenu ou SGC (Content Management System)
7
Inclure Jquery dans votre code
2 possibilités À partir de votre serveur Jquerry.com / Download <script src = « cheminVersleFichier/ jquery.js »></script> À partir de Google <script src = « > </script>
8
Inclure Jquery sur votre serveur
Avantages Développement Vous pouvez développer sans internet (train, coupure réseau…) Inconvénient Déploiement Surcharge du serveur, il travaille beaucoup plus
9
Chercher Jquery sur google
Avantages Déploiement Ce n’est pas votre serveur qui travaille Inconvénient Développement Vous ne pouvez pas développer sans internet (train, coupure réseau…)
10
2 Jquery Uncompress Minified Plus facile à lire (indentation propre)
Plus utiliser pour développer Minified Sans espace, sans retour à la ligne Illisible Mais plus léger, accélère le temps de chargement de votre page Déploiement
11
Inclusion de jquery <html> <head> <!--code pour développer sans internet <script src = "../Jquery.js"></script> --> <script src = " <title = "hello!"></title> </head> </html/>
12
Fonction de base de Jquery
<head> <title>Test jQuery</title> <script src=" </script> <script> jQuery(document).ready(function(){ // Du code en jQuery va pouvoir être tapé ici ! }); </script> </head> <body> <p>On va bosser avec jQuery, c'est super !</p> </body>
13
réduction <head> <title>Test jQuery</title>
<script src=" </script> <script> jQuery(function(){ // Du code en jQuery va pouvoir être tapé ici ! }); </script> </head> <body> <p>On va bosser avec jQuery, c'est super !</p> </body>
14
Encore réduit – le plus utilisé
<head> <title>Test jQuery</title> <script src=" </script> <script> $(function(){ // Du code en jQuery va pouvoir être tapé ici ! }); </script> </head> <body> <p>On va bosser avec jQuery, c'est super !</p> </body>
15
Exercice 1 Importer Jquery et afficher une alerte (ou une console) lorsque Jquery et la page sont chargés
16
Si plusieurs bibliothèques
$(function(){ // Du code en jQuery va pouvoir être tapé ici ! })(jQuery); Beaucoup de bibliothèques utilise $
17
Les sélecteurs
18
Sélecteurs basiques Par Document par Id Par classe css … $(document);
$('#monId'); Par classe css $('.maClasse'); … Par classe : on modifie tous les éléments de la classe CSS
19
Sélecteur et hiérarchie
Sélecteur Parent $('p .lien'); Sélection tous les éléments ayant la classe .lien, contenus dans un paragraphe qui joue le rôle de parent Sélecteur frère $('.lien + .visite'); éléments ayant pour classe .visite, immédiatement précédés d'un élément ayant pour classe .lien $('.lien ~ .visite'); éléments .visite, précédés immédiatement ou non par un élément .lien
20
Sélecteurs particuliers
$('p:first'); // le premier paragraphe trouvé $('a:last'); // le dernier lien de la page $('p[id]'); // les paragraphes ayant un identifiant $('p:eq(2)'); // le troisième paragraphe $('input[name!=pseudo]'); // les éléments n'ayant pas « pseudo » pour nom $('p:not(.rouge)'); // tous les paragraphes, sauf ceux ayant .rouge comme classe $('input:not(.bleu, .vert)'); // tous les éléments de formulaire sauf ceux ayant .bleu et/ou .vert comme classe
21
Cas des formulaires $('input[type=button]'); // un input de type button $('input:button'); //un input de type button plus rapide
![Cas des formulaires $( input[type=button] ); // un input de type button.](http://slideplayer.fr/slide/2441665/8/images/21/Cas+des+formulaires+%24%28+input%5Btype%3Dbutton%5D+%29%3B+%2F%2F+un+input+de+type+button..jpg "$( input:button ); //un input de type button plus rapide.")
22
Performance des selecteurs
Efficacité décroissante : Par ID (5 fois plus rapide que le suivant) Par classe Raccourcir les chaines ! $('div p a'); 15 x plus lent que $('#lien');
23
Tous les sélecteurs
24
Les événements $("#uneDiv").click(function(){ // Le code a exécuter !
}); Clic :click() Double-clic : dblclick() Passage de la souris : hover() Rentrer dans un élément : mouseenter() Quitter un élément : mouseleave() Presser un bouton de la souris : mousedown() Relâcher un bouton de la souris : mouseup() Scroller (utiliser la roulette) : scroll()
25
Exercice 2 Faire une image qui crée une alerte lorsqu’on clique dessus. Maitrise de la fonction click et positionnement des fonctions dans la grande fonction
26
Exercice 3 Faire en sorte que lorsqu’on clique sur un paragraphe, il disparaisse en « remontant » Arrivée de la fonction slideUp()
27
Exercice 4 Faites un document où lorsqu’on appuie sur la touche entrée, il y a une alerte
28
Liste des clés clavier Code touche
29
Exercice 5 Créer un script qui permet de faire une alerte quand on click sur un image et une autre alerte quand on passe simplement dessus Gestion de plusieurs événements sur un même objet
Présentations similaires
