1 / 29

Jquery

Jquery. Jquery ou Javascript ?. Javascript Langage très connu, très utilisé Technologie incontournable Evolution du javascript Faciliter l’écriture du code licence MIT et GNU GPL. Jquery, à quoi ça ressemble ?. Code source de Jquery. Bibliothèque ou framework ?. Bibliothèque ?

mabli
Download Presentation

Jquery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Jquery

  2. Jquery ou Javascript ? • Javascript • Langage très connu, très utilisé • Technologie incontournable • Evolution du javascript • Faciliter l’écriture du code • licence MIT et GNU GPL

  3. Jquery, à quoi ça ressemble ? • Code source de Jquery

  4. Bibliothèque ou framework ? • Bibliothèque ? • 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

  5. Avantages • Uniformise les navigateurs • 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 • ...

  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 = « https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js » > </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 • 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 = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <title = "hello!"></title> </head> </html/>

  12. 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>

  13. 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>

  14. 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>

  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);

  17. Les sélecteurs

  18. Sélecteurs basiques • Par Document • $(document); • par Id • $('#monId'); • Par classe css • $('.maClasse'); • …

  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

  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 • http://jquery.developpeur-web2.com/documentation/selecteurs.php

  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.

  26. Exercice 3 • Faire en sorte que lorsqu’on clique sur un paragraphe, il disparaisse en « remontant »

  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

More Related