La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Jquery.

Présentations similaires


Présentation au sujet: "Jquery."— Transcription de la présentation:

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 = « https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js » > </script> À partir de Google. ", "width": "800" }

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

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>

On va bosser avec jQuery, c est super !

", "width": "800" }

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>

On va bosser avec jQuery, c est super !

", "width": "800" }

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>

On va bosser avec jQuery, c est super !

", "width": "800" }

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

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


Télécharger ppt "Jquery."

Présentations similaires


Annonces Google