jquery ou javascript ? javascript langage très connu, très utilisé technologie incontournable...
TRANSCRIPT
Jquery
Jquery ou Javascript ?Javascript
Langage très connu, très utiliséÞ Technologie incontournable
Evolution du javascriptFaciliter l’écriture du code
licence MIT et GNU GPL
Jquery, à quoi ça ressemble ?Code source de Jquery
Bibliothèque ou framework ?Bibliothèque ?
Ensemble de fonctions qui peuvent être insérées dans le code
FrameworkPareil sauf qu’il y a tellement de fonctions que
ça influence la structure même de notre codeConstitue la base d’une application
AvantagesUniformise les navigateurs
Interprétation du JavaScript propre à chaque navigateur
les animationsPoint fort de Jquery
Les formulairesPlus facile qu’avec du javascript seul
Ajax simplifié
Sites/CMS utilisant JquerySite du ZéroGoogle et ses différents servicesMozillaAmazonWordPress...
Inclure Jquery dans votre code2 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 serveurAvantages
Développement Vous pouvez développer sans internet (train,
coupure réseau…)
InconvénientDéploiement
Surcharge du serveur, il travaille beaucoup plus
Chercher Jquery sur googleAvantages
Déploiement Ce n’est pas votre serveur qui travaille
InconvénientDéveloppement
Vous ne pouvez pas développer sans internet (train, coupure réseau…)
2 JqueryUncompress
Plus facile à lire (indentation propre)Plus utiliser pour développer
MinifiedSans espace, sans retour à la ligneIllisibleMais 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);
Les sélecteurs
Sélecteurs basiquesPar Document
$(document);par Id
$('#monId');Par classe css
$('.maClasse');…
Sélecteur et hiérarchieSé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 selecteursEfficacité 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électeurshttp://jquery.developpeur-web2.com/documen
tation/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 2Faire une image qui crée une alerte lorsqu’on
clique dessus.
Exercice 3 Faire en sorte que lorsqu’on clique sur un
paragraphe, il disparaisse en « remontant »
Exercice 4
Faites un document où lorsqu’on appuie sur la touche entrée, il y a une alerte
Liste des clés clavierCode touche
Exercice 5Créer un script qui permet de faire une alerte
quand on click sur un image et une autre alerte quand on passe simplement dessus