Jquery
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
Jquery, à quoi ça ressemble ? Code source de Jquery
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
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é
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)
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 = « https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js » > </script>
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
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…)
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
Inclusion de jquery <html> <head> <!--code pour développer sans internet <script src = "../Jquery.js"></script> --> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <title = "hello!"></title> </head> </html/>
Fonction de base de Jquery <head> <title>Test jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </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>
réduction <head> <title>Test jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </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>
Encore réduit – le plus utilisé <head> <title>Test jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </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>
Exercice 1 Importer Jquery et afficher une alerte (ou une console) lorsque Jquery et la page sont chargés
Si plusieurs bibliothèques $(function(){ // Du code en jQuery va pouvoir être tapé ici ! })(jQuery); Beaucoup de bibliothèques utilise $
Les sélecteurs
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
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
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
Cas des formulaires $('input[type=button]'); // un input de type button $('input:button'); //un input de type button plus rapide
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');
Tous les sélecteurs http://jquery.developpeur-web2.com/documentation/selecteurs.php
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()
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
Exercice 3 Faire en sorte que lorsqu’on clique sur un paragraphe, il disparaisse en « remontant » Arrivée de la fonction slideUp()
Exercice 4 Faites un document où lorsqu’on appuie sur la touche entrée, il y a une alerte
Liste des clés clavier Code touche
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