Télécharger ce document sur www.krymo.com/download.htmlJQUERY                                            www.krymo.com
Télécharger ce document sur www.krymo.com/download.htmlTutorieljQuery est une bibliothèque JavaScript.jQuery simplifie gra...
Télécharger ce document sur www.krymo.com/download.htmlPrésentationLe but de jQuery est de rendre plus facile à utiliser J...
Télécharger ce document sur www.krymo.com/download.html       •AJAX       •UtilitairesAstuce: En outre, jQuery a des plugi...
Télécharger ce document sur www.krymo.com/download.htmlInstallationAjout de jQuery pour vos pages WebIl ya plusieurs façon...
Télécharger ce document sur www.krymo.com/download.htmlAlternatives à TéléchargerSi vous ne souhaitez pas télécharger et h...
Télécharger ce document sur www.krymo.com/download.htmlSyntaxeAvec jQuery vous sélectionnez (requête) des éléments HTML et...
Télécharger ce document sur www.krymo.com/download.htmlLévénement du document ReadyVous avez sans doute remarqué que toute...
Télécharger ce document sur www.krymo.com/download.htmlSélecteursles sélecteurs jQuery sont une des parties les plus impor...
Télécharger ce document sur www.krymo.com/download.htmlLe # id sélecteurLe jQuery # id sélecteur utilise lattribut id dune...
Télécharger ce document sur www.krymo.com/download.htmlExemple$(document).ready(function(){  $("button").click(function(){...
Télécharger ce document sur www.krymo.com/download.html                                                                   ...
Télécharger ce document sur www.krymo.com/download.htmlMéthodes pour les évenementsjQuery est fait sur mesure pour répondr...
Télécharger ce document sur www.krymo.com/download.htmlSyntaxePour affecter un événement click à tous les paragraphes dune...
Télécharger ce document sur www.krymo.com/download.htmldblclick ()Le dbclick () accorde une fonction de gestionnaire dévén...
Télécharger ce document sur www.krymo.com/download.htmlmousedown ()Le mousedown () accorde une fonction de gestionnaire dé...
Télécharger ce document sur www.krymo.com/download.htmlfocus ()La méthode focus () attache une fonction de gestionnaire dé...
Télécharger ce document sur www.krymo.com/download.htmlhide () et show ()Avec jQuery, vous pouvez afficher ou masquer des ...
Télécharger ce document sur www.krymo.com/download.htmltoggle ()Avec jQuery, vous pouvez basculer entre les méthodes hide ...
Télécharger ce document sur www.krymo.com/download.htmlMéthode fadeIn ()Le fadeIn () est utilisé à sestomper dans un éléme...
Télécharger ce document sur www.krymo.com/download.htmlExemple$("button").click(function(){  $("#div1").fadeOut();  $("#di...
Télécharger ce document sur www.krymo.com/download.htmlMéthode fadeTo ()Le fadeTo () permet la décoloration à une opacité ...
Télécharger ce document sur www.krymo.com/download.htmlMéthode slideDown ()Le slideDown () est utilisé pour glisser un élé...
Télécharger ce document sur www.krymo.com/download.htmlExemple$("#flip").click(function(){  $("#panel").slideUp();});Métho...
Télécharger ce document sur www.krymo.com/download.htmlAnimationsLa méthode animate () vous permet de créer des animations...
Télécharger ce document sur www.krymo.com/download.htmlManipuler plusieurs propriétésNotez que plusieurs propriétés peuven...
Télécharger ce document sur www.krymo.com/download.htmlExemple$("button").click(function(){  $("div").animate({    left:25...
Télécharger ce document sur www.krymo.com/download.htmlUtilisation de la fonctionnalité file dattentePar défaut, jQuery es...
Télécharger ce document sur www.krymo.com/download.htmlAnimations darrêtstop () est utilisé pour arrêter les animations av...
Télécharger ce document sur www.krymo.com/download.htmlFonctions rappelUne fonction de rappel est exécutée après que leffe...
Télécharger ce document sur www.krymo.com/download.htmlChaînageAvec jQuery, vous pouvez enchaîner des actions / méthodes.L...
Télécharger ce document sur www.krymo.com/download.htmlObtenir du contenu et des attributsjQuery contient des méthodes pui...
Télécharger ce document sur www.krymo.com/download.htmlExemple$("#btn1").click(function(){  alert("Text: " + $("#test").te...
Télécharger ce document sur www.krymo.com/download.html Contenu et Attributs Text (), html () et val ()Nous allons utilise...
Télécharger ce document sur www.krymo.com/download.htmlUne fonction de rappelTous les trois méthodes ci-dessus: text (), h...
Télécharger ce document sur www.krymo.com/download.htmlExemple$("button").click(function(){  $("#kry").attr("href","http:/...
Télécharger ce document sur www.krymo.com/download.htmlAjouter des élémentsAvec jQuery, il est facile dajouter de nouveaux...
Télécharger ce document sur www.krymo.com/download.htmlAjouter plusieurs nouveaux éléments avec append () et prepend ()Dan...
Télécharger ce document sur www.krymo.com/download.htmlAjouter plusieurs nouveaux éléments Avec after () et before ()En ou...
Télécharger ce document sur www.krymo.com/download.htmlÉléments à supprimerAvec jQuery, il est facile de retirer les éléme...
Télécharger ce document sur www.krymo.com/download.htmlFiltrer les éléments à enleverLe remove () accepte aussi un paramèt...
Télécharger ce document sur www.krymo.com/download.htmlClasses CSS Get et SetAvec jQuery, il est facile de manipuler le CS...
Télécharger ce document sur www.krymo.com/download.htmlMéthode addClass ()Lexemple suivant montre comment ajouter des attr...
Télécharger ce document sur www.krymo.com/download.htmlMéthode toggleClass ()Lexemple suivant montre comment utiliser la m...
Télécharger ce document sur www.krymo.com/download.htmlExemple$("p").css("background-color");Définir une propriété CSSPour...
Télécharger ce document sur www.krymo.com/download.htmlcss({"propertyname":"value","propertyname":"value",...});Lexemple s...
Télécharger ce document sur www.krymo.com/download.htmlDimensions jQuerywidth () et height ()width () définit ou renvoie l...
Télécharger ce document sur www.krymo.com/download.htmlExemple$("button").click(function(){  var txt="";  txt+="Width: " +...
Télécharger ce document sur www.krymo.com/download.htmlMéthodes outerWidth () et outerHeight ()Le outerWidth () retourne l...
Télécharger ce document sur www.krymo.com/download.html width () plus height ()Lexemple suivant retourne la largeur et la ...
Prochain SlideShare
Chargement dans…5
×

Jquery

3 047 vues

Publié le

personalisation site web avec jquery

0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 047
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 084
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Jquery

  1. 1. Télécharger ce document sur www.krymo.com/download.htmlJQUERY www.krymo.com
  2. 2. Télécharger ce document sur www.krymo.com/download.htmlTutorieljQuery est une bibliothèque JavaScript.jQuery simplifie grandement la programmation JavaScript.jQuery est facile à apprendre.Exemple$(document).ready(function(){ $("p").click(function(){ $(this).hide(); });});Essayer ce code ! www.krymo.com
  3. 3. Télécharger ce document sur www.krymo.com/download.htmlPrésentationLe but de jQuery est de rendre plus facile à utiliser JavaScript sur votre site web.Ce que vous devriez déjà savoirAvant de commencer à étudier jQuery, vous devriez avoir une connaissance de base de: •HTML •CSS •JavaScriptSi vous voulez étudier ces sujets dabord, nos autres tutoriels .Quest-ce que jQuery?jQuery est un poids léger , « écrire moins, faire plus », de la bibliothèque JavaScript.Le but de jQuery est de rendre JavaScript plus facile à utiliser sur votre site web.jQuery prend en charge beaucoup de tâches courantes qui nécessitent de nombreuses lignes de code JavaScript à accomplir, et il senroule dans les méthodesque vous pouvez appeler avec une seule ligne de code.jQuery simplifie aussi beaucoup de choses compliquées à partir de JavaScript, telles que les appels AJAX et la manipulation du DOM.La bibliothèque jQuery possède les fonctions suivantes: •HTML / DOM manipulation •CSS manipulation •Méthodes dévénements HTML •Effets et animations www.krymo.com
  4. 4. Télécharger ce document sur www.krymo.com/download.html •AJAX •UtilitairesAstuce: En outre, jQuery a des plugins pour presque nimporte quelle de ces tâches.Pourquoi jQuery?Il ya beaucoup dautres frameworks JavaScript, mais jQuery semble être la plus populaire, et aussi la plus extensible.Bon nombre des plus grandes entreprises utilisent du jQuery , comme: •Google •Microsoft •IBM •Netflix Est-ce que jQuery fonctionne dans tous les navigateurs? Léquipe de jQuery sait tout de cross-browser problèmes, et ils ont écrit ces connaissances dans la bibliothèque jQuery. jQuery fonctionnera pareil dans tous les principaux navigateurs. www.krymo.com
  5. 5. Télécharger ce document sur www.krymo.com/download.htmlInstallationAjout de jQuery pour vos pages WebIl ya plusieurs façons de commencer à utiliser jQuery sur votre site web. Vous pouvez: •Téléchargez la bibliothèque jQuery à partir jQuery.com •Inclure jQuery à partir dun CDN, comme GoogleTéléchargement jQueryIl existe deux versions de jQuery disponiblent pour le téléchargement: •Version de production - cest pour votre site Web en direct car il a été minifié et comprimé. •La version de développement - cest pour les tests et le développement (code non compressé et lisible)Les deux versions peuvent être téléchargées à partir jQuery.com .La bibliothèque jQuery est un fichier unique JavaScript, et vous y faites référence à la balise HTML <script> (notez que la balise <script> doit être à lintérieurde la section <head>):<head><script src="jquery-1.8.3.min.js"></script></head>Astuce: Placez le fichier téléchargé dans le même répertoire que les pages où vous souhaitez lutiliser. Vous vous demandez pourquoi nous navons pas de type = "text / javascript" dans la balise <script>? Ceci nest pas nécessaire en HTML5. JavaScript est le langage de script par défaut en HTML5 et dans tous les navigateurs modernes! www.krymo.com
  6. 6. Télécharger ce document sur www.krymo.com/download.htmlAlternatives à TéléchargerSi vous ne souhaitez pas télécharger et héberger jQuery vous-même, vous pouvez linclure à partir dun CDN (Content Delivery Network).Google et Microsoft jQuery hôte.Pour utiliser jQuery depuis Google ou Microsoft, utilisez lune des méthodes suivantes:Google CDN:<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script></head> Téléchargez la dernière version disponible avec Google CDN: Si vous regardez lURL de Google ci-dessus - la version de jQuery est spécifié dans lURL (1.8.3). Si vous souhaitez utiliser la dernière version de jQuery, vous pouvez supprimer un numéro de la fin de la chaîne de version (par exemple 1.8), puis Google renvoie la dernière version disponible dans la série 1.8 (1.8.0, 1.8. 1, etc), ou vous pouvez le prendre jusquau nombre entier (1), et Google renvoie la dernière version disponible de la série 1 (de 1.1.0 à 1.9.9).Microsoft CDN:<head><script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script></head> Un grand avantage de lutilisation de jQuery hébergé par Google ou Microsoft: De nombreux utilisateurs ont déjà téléchargé jQuery de Google ou de Microsoft lors de la visite un autre site. En conséquence, il sera chargé à partir du cache quand ils visitent votre site, ce qui conduit à temps de chargement plus rapide. En outre, la plupart CDN sera sassurer quune fois quun utilisateur demande un fichier delle, elle sera servie par le serveur le plus proche deux, ce qui entraîne également le temps de chargement plus rapide. www.krymo.com
  7. 7. Télécharger ce document sur www.krymo.com/download.htmlSyntaxeAvec jQuery vous sélectionnez (requête) des éléments HTML et effectuez des «actions» sur eux.Syntaxe jQueryLa syntaxe jQuery est faite sur mesure pour la sélection des éléments HTML et leffectuation de certaines actions sur lélément (s).La syntaxe de base est la suivante: $ ( sélecteur ). laction () •Un signe $ pour définir / accès jQuery •A ( sélecteur ) à "requête (ou trouver)" éléments HTML •Un jQuery action de () à effectuer sur lélément (s)Exemples:. $ (This) hide () - se cache lélément courant.. $ ("P") hide () - masque tous les éléments <p>.. $ (". Test") hide () - cache tous les éléments avec class = "test".$ ("# Test") hide () -. Cache lélément avec id = "test". Êtes-vous familiarisé avec les sélecteurs CSS? jQuery utilise la syntaxe CSS pour sélectionner des éléments. Vous en apprendrez plus sur la syntaxe de sélection dans le prochain chapitre de ce tutoriel. www.krymo.com
  8. 8. Télécharger ce document sur www.krymo.com/download.htmlLévénement du document ReadyVous avez sans doute remarqué que toutes les méthodes jQuery dans nos exemples, sont à lintérieur dun document prêt à lévénement:$(document).ready(function(){ // les méthodes jQuery se placent ici...});Ceci, pour éviter que tout code jQuery sexécute avant que le document est fini de charger (prêt).Il est de bonne pratique dattendre que le document soit entièrement chargé et prêt, avant de travailler avec jQ.Cela vous permet également davoir votre codeJavaScript avant que le corps de votre document, dans la section head.Voici quelques exemples dactions qui peuvent échouer si les méthodes sont exécutées avant que le document soit totalement chargé: •Essayer de cacher un élément qui nest pas encore créé •Essayer dobtenir la taille dune image qui nest pas encore chargéAstuce: Léquipe de jQuery a également créé une méthode encore plus courte pour lévénement document prêt:$(function(){ // appeler les méthodes jQuery ici...});Utilisez la syntaxe que vous préférez. Nous pensons que lévénement du document prêt est plus facile à comprendre à la lecture du code. www.krymo.com
  9. 9. Télécharger ce document sur www.krymo.com/download.htmlSélecteursles sélecteurs jQuery sont une des parties les plus importantes de la bibliothèque jQuery.Ces sélecteurs vous permettent de sélectionner et de manipuler du HTML .Avec les sélecteurs jQuery, vous pouvez trouver des éléments en fonction de leur id, classes, types, les attributs, les valeurs dattributs et bien plus encore. Ilest basé sur des existants(sélecteurs CSS) , et en plus, il a quelques sélecteurs propres personnalisés.Tous les types de sélecteurs dans jQuery, commencent par le signe dollar et les parenthèses: $ ().Le sélecteur élémentLe sélecteur délément jQuery sélectionne les éléments en fonction de leurs noms de balises.Vous pouvez sélectionner tous les éléments <p> sur une page comme ceci:$("p")ExempleLorsquun utilisateur clique sur un bouton, tous les éléments <p> sera cachée:Exemple$(document).ready(function(){ $("button").click(function(){ $("p").hide(); });}); www.krymo.com
  10. 10. Télécharger ce document sur www.krymo.com/download.htmlLe # id sélecteurLe jQuery # id sélecteur utilise lattribut id dune balise HTML pour trouver lélément spécifique.Un id doit être unique dans une page, vous devez donc utiliser le sélecteur # id si vous souhaitez trouver un seul élément unique.Pour trouver un élément avec un id spécifique, écrivez un caractère dièse, suivi par lid de lélément:$("#test")ExempleQuand un utilisateur clique sur un bouton, lélément avec id = "test" sera cachée:Exemple$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); });});Le sélecteur. ClassLe sélecteur de classe jQuery retrouve des éléments avec une classe spécifique.Pour trouver des éléments avec une classe spécifique, écrivez un personnage dépoque, suivi du nom de la classe:$(".test")ExempleQuand un utilisateur clique sur un bouton, les éléments avec class = "test" seront cachés: www.krymo.com
  11. 11. Télécharger ce document sur www.krymo.com/download.htmlExemple$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); });});Exemples de sélecteurs jQuerySyntaxe Description$ ("*") Sélectionne tous les éléments$ (this) Sélectionne lélément HTML en cours$ ("p.intro") Sélectionne tous les éléments <p> avec class = "intro"$ ("p: first") Sélectionne lélément <p> premier$ ("ul li: first") Sélectionne lélément <li> premier de la première liste <ul>$ ("ul li: first-child") Sélectionne lélément <li> premier de chaque <ul>$ ("[href]") Sélectionne tous les éléments avec un attribut href$ ("a [target = _blank]") Sélectionne tous les éléments <a> avec une valeur dattribut cible égal à "_blank" Sélectionne tous les éléments <a> avec une valeur dattribut cible est-il égal à$ ("a [target! = _blank]") "_blank" www.krymo.com
  12. 12. Télécharger ce document sur www.krymo.com/download.html Es sa $ (": button") Sélectionne tous les éléments et les éléments <button> <input> de type = "button" ye z- le Es sa $ ("tr: même») Sélectionne tous les éléments, même <tr> ye z- le Es sa $ ("tr: impair") Sélectionne tous les éléments impairs <tr> ye z- leFonctions dans un fichier séparéSi votre site contient un grand nombre de pages, et vous voulez que vos fonctions jQuery soient faciles à entretenir, vous pouvez mettre vos fonctions jQuerydans un fichier séparé. Js.Lorsque nous démontrons dans ce tutoriel jQuery, les fonctions sont directement ajoutés dans la section <head>.Cependant, il est parfois préférable de lesplacer dans un fichier séparé, comme ceci (utiliser lattribut src pour désigner le fichier js.):Exemple<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="mes_fonctions_jquery.js"></script></head> www.krymo.com
  13. 13. Télécharger ce document sur www.krymo.com/download.htmlMéthodes pour les évenementsjQuery est fait sur mesure pour répondre aux événements dans une page HTML.Quels sont les événements?Toutes les différentes actions des visiteurs dune page Web qui peuvent répondre aux événements sont appelés ainsi.Un événement représente le moment précis où quelque chose se passe.Exemples: •le déplacement dun curseur sur un élément •la sélection dun bouton radio •cliquant sur un élémentLe terme "feux" est souvent utilisé avec les événements. Exemple: «Lévénement keypress se déclenche au moment où vous appuyez sur une touche".Voici quelques événements communs DOM:Événements de la souris Événements Clavier Evénements formulaire Document / Fenêtre événements cliquez sur Appuyer sur une touche soumettre charger Double cliquer Aller en bas changer redimensionner Entrée du pointeur Aller en haut concentrer faire défiler Sortie du pointeur brouiller décharger www.krymo.com
  14. 14. Télécharger ce document sur www.krymo.com/download.htmlSyntaxePour affecter un événement click à tous les paragraphes dune page, vous pouvez faire ceci:$("p").click();Létape suivante consiste à définir ce qui doit se passer lorsque lévénement se déclenche. Vous devez passer une fonction à lévénement:$("p").click(function(){ // les actions se placent ici!!});Méthodes couramment utilisées dans les événements jQuery$ (Document). Ready ()L$ (document). Ready () nous permet dexécuter une fonction lorsque le document est entièrement chargée. Cet événement est déjà expliqué dans la syntaxejQuery .cliquez sur ()La méthode click () attache une fonction de gestionnaire dévénements à un élément HTML.La fonction est exécutée lorsque lutilisateur clique sur lélément HTML.Lexemple suivant explique: Quand un événement se déclenche clic sur un élément <p>; masquer lélément <p> actuelle:Exemple$("p").click(function(){ $(this).hide();}); www.krymo.com
  15. 15. Télécharger ce document sur www.krymo.com/download.htmldblclick ()Le dbclick () accorde une fonction de gestionnaire dévénements à un élément HTML.La fonction est exécutée lorsque lutilisateur double-clique sur lélément HTML:Exemple$("p").dblclick(function(){ $(this).hide();});mouseenter ()Le mouseenter () accorde une fonction de gestionnaire dévénements à un élément HTML.La fonction est exécutée lorsque le pointeur de la souris entre dans lélément HTML:Exemple$("#p1").mouseenter(function(){ alert("vous entrez dans le paragraphe 1!");});mouseleave ()Le mouseleave () accorde une fonction de gestionnaire dévénements à un élément HTML.La fonction est exécutée lorsque le pointeur de la souris quitte lélément HTML:Exemple$("#p1").mouseleave(function(){ alert("Bye! Vous quittez le paragraphe 1!");}); www.krymo.com
  16. 16. Télécharger ce document sur www.krymo.com/download.htmlmousedown ()Le mousedown () accorde une fonction de gestionnaire dévénements à un élément HTML.La fonction est exécutée lorsque le bouton gauche de la souris est enfoncé, tandis que la souris est sur lélément HTML:Exemple$("#p1").mousedown(function(){ alert("le pointeur est enfoncé sur le paragraphe 1!");});mouseup ()Le mouseup () méthode accorde une fonction de gestionnaire dévénements à un élément HTML.La fonction est exécutée lorsque le bouton gauche de la souris est relâché, tandis que la souris est sur lélément HTML:Exemple$("#p1").mouseup(function(){ alert("le pointeur est rélaché...!");});hover ()Le hover () prend deux fonctions et est une combinaison des méthodes mouseenter () et mouseleave () .La première fonction est exécutée lorsque la souris entre dans lélément HTML, et la deuxième fonction est exécutée lorsque la souris quitte lélément HTML:Exemple$("#p1").hover(function(){ alert("vous entrez dans le paragraphe 1!"); }, function(){ alert("Bye! vous entes entrain de quitter le paragraphe 1!");}); www.krymo.com
  17. 17. Télécharger ce document sur www.krymo.com/download.htmlfocus ()La méthode focus () attache une fonction de gestionnaire dévénements à un champ de formulaire HTML.La fonction est exécutée lorsque le champ de formulaire reçoit le focus:Exemple$("input").focus(function(){ $(this).css("background-color","#cccccc");});blur ()La méthode blur () accorde une fonction de gestionnaire dévénements à un champ de formulaire HTML.La fonction est exécutée lorsque le champ de formulaire perd le focus:Exemple$("input").blur(function(){ $(this).css("background-color","#ffffff");});Masquer et AfficherComment cacher des parties de texte ? www.krymo.com
  18. 18. Télécharger ce document sur www.krymo.com/download.htmlhide () et show ()Avec jQuery, vous pouvez afficher ou masquer des éléments HTML avec les méthodes hide () et show ():Exemple$("#hide").click(function(){ $("p").hide();});$("#show").click(function(){ $("p").show();});Syntaxe:$(selector).hide(speed,callback);$(selector).show(speed,callback);Le paramètre de vitesse optionnel spécifie la vitesse de masquer / afficher, et peut prendre les valeurs suivantes: "slow", "fast", ou milliseconds.Le paramètre callback optionnel est le nom dune fonction à exécuter après la fin du « spectacle ».Lexemple suivant montre le paramètre de vitesse avec hide ():Exemple$("button").click(function(){ $("p").hide(1000);}); www.krymo.com
  19. 19. Télécharger ce document sur www.krymo.com/download.htmltoggle ()Avec jQuery, vous pouvez basculer entre les méthodes hide () et show () avec la méthode toggle ().le éléments représentés sont cachés et les éléments cachés sont affichés:Exemple$("button").click(function(){ $("p").toggle();});Syntaxe:$(selector).toggle(speed,callback);Le paramètre de vitesse en option peut prendre les valeurs suivantes: "slow", "fast", ou milliseconds.Le paramètre de rappel optionnel est le nom dune fonction devant être exécutée après que la méthode toggle () soit terminée.Effets jQuery - fadingAvec jQuery, vous pouvez faire disparaître des éléments à lintérieur et les mettre en hors-visibilité.Méthodes fading •fadeIn () •fadeOut () •fadeToggle () •fadeTo () www.krymo.com
  20. 20. Télécharger ce document sur www.krymo.com/download.htmlMéthode fadeIn ()Le fadeIn () est utilisé à sestomper dans un élément caché.Syntaxe:$(selector).fadeIn(speed,callback);Le paramètre de vitesse en option spécifie la durée de leffet. Il peut prendre les valeurs suivantes: "slow", "fast", ou milliseconds.Le paramètre callback option est le nom dune fonction qui doit être exécutée après la disparition complète.Lexemple suivant illustre la méthode fadeIn () avec des paramètres différents:Exemple$("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000);});Méthode fadeOut ()Le fadeOut () est utilisé pour faire disparaître un élément visible.Syntaxe:$(selector).fadeOut(speed,callback);Le paramètre de vitesse en option spécifie la durée de leffet. Il peut prendre les valeurs suivantes: "slow", "fast", ou milliseconds.Le paramètre callback option est le nom dune fonction qui doit être exécutée après la disparition complète.Lexemple suivant illustre lfadeOut () avec des paramètres différents: www.krymo.com
  21. 21. Télécharger ce document sur www.krymo.com/download.htmlExemple$("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000);});Méthode fadeToggle()Le fadeToggle () permet de basculer entre le fadeIn () et le fadeOut () .Si les éléments sont affichés, fadeToggle () va les rendre invisible,Si les éléments sont masqués, fadeToggle () va les rendre visible.Syntaxe:$(selector).fadeToggle(speed,callback);Le paramètre de vitesse en option spécifie la durée de leffet. Il peut prendre les valeurs suivantes: "slow", "fast", ou milliseconds.Le paramètre callback option est le nom dune fonction qui doit être exécutée après la disparition complète.Lexemple suivant illustre la méthode fadeToggle () avec des paramètres différents:Exemple$("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000);}); www.krymo.com
  22. 22. Télécharger ce document sur www.krymo.com/download.htmlMéthode fadeTo ()Le fadeTo () permet la décoloration à une opacité donnée (valeur comprise entre 0 et 1).Syntaxe:$(selector).fadeTo(speed,opacity,callback);Le paramètre de vitesse requise spécifie la durée de leffet. Il peut prendre les valeurs suivantes: "slow", "fast", ou milliseconds.Le paramètre dopacité requise dans le fadeTo () indique le procédé pour la décoloration dune opacité donnée (valeur entre 0 et 1).Le paramètre callback option est le nom dune fonction qui doit être exécutée après que la fonction se termine.Lexemple suivant illustre lfadeTo () avec des paramètres différents:Exemple$("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7);});Méthodes CoulissantesLes méthodes de diapositives jQuery glissent des éléments vers le haut et vers le bas.Avec jQuery, vous pouvez créer un effet de glissement sur les éléments.jQuery a les méthodes suivantes de diapositives: •slideDown () •slideUp () •slideToggle () www.krymo.com
  23. 23. Télécharger ce document sur www.krymo.com/download.htmlMéthode slideDown ()Le slideDown () est utilisé pour glisser un élément.Syntaxe:$(selector).slideDown(speed,callback);Le paramètre de vitesse en option spécifie la durée de leffet. Il peut prendre les valeurs suivantes: "slow", "fast", ou milliseconds.Le paramètre de rappel optionnel est le nom dune fonction à exécuter après le glissement se termine.Lexemple suivant illustre le slideDown () :Exemple$("#flip").click(function(){ $("#panel").slideDown();});Méthode slideUp ()Le slideUp () est utilisé pour glisser un élément.Syntaxe:$(selector).slideUp(speed,callback);Le paramètre de vitesse en option spécifie la durée de leffet. Il peut prendre les valeurs suivantes: "slow", "fast", ou milliseconds.Le paramètre de rappel optionnel est le nom dune fonction à exécuter après que le glissement se termine.Lexemple suivant illustre le slideUp (): www.krymo.com
  24. 24. Télécharger ce document sur www.krymo.com/download.htmlExemple$("#flip").click(function(){ $("#panel").slideUp();});Méthode toggle ()La méthode slideToggle () permet de basculer entre le slideDown () et le slideUp ().Si les éléments sont glissés vers le bas, slideToggle () va les faire glisser vers le haut.Si les éléments sont glissés vers le haut, slideToggle () va les faire glisser vers le bas.$(selector).slideToggle(speed,callback);Le paramètre de vitesse en option peut prendre les valeurs suivantes: "slow", "fast", milliseconds.Le paramètre de rappel optionnel est le nom dune fonction à exécuter après que le glissement se termine.Lexemple suivant illustre la méthode slideToggle ():Exemple$("#flip").click(function(){ $("#panel").slideToggle();}); www.krymo.com
  25. 25. Télécharger ce document sur www.krymo.com/download.htmlAnimationsLa méthode animate () vous permet de créer des animations personnalisées.Méthode animate()animate () est utilisé pour créer des animations personnalisées.Syntaxe:$(selector).animate({params},speed,callback);Le paramètre requis params définit les propriétées CSS à animer.Le paramètre de vitesse en option spécifie la durée de leffet. Il peut prendre les valeurs suivantes: "slow", "fast", ou milliseconds.Le paramètre callback option est le nom dune fonction qui doit être exécutée après que lanimation soit terminée.Lexemple suivant illustre une utilisation simple de la méthode animate (), il déplace un élément div vers la gauche, jusquà ce quil ait atteint une propriétégauche de 250px:Exemple$("button").click(function(){ $("div").animate({left:250px});}); Par défaut, tous les éléments HTML ont une position statique, et ne peuvent pas être déplacés. Pour manipuler la position, noubliez pas dabord définir la propriété CSS position de lélément de rapport, fixe ou absolue! www.krymo.com
  26. 26. Télécharger ce document sur www.krymo.com/download.htmlManipuler plusieurs propriétésNotez que plusieurs propriétés peuvent être animées en même temps:Exemple$("button").click(function(){ $("div").animate({ left:250px, opacity:0.5, height:150px, width:150px });}); Est-il possible de manipuler toutes les propriétés CSS avec la méthode animate ()? Oui, presque! Cependant, il ya une chose importante à retenir: tous les noms de propriétés doivent être en camelCase lorsquils sont utilisés avec la méthode animate (): Vous aurez besoin décrire au lieu de paddingLeft ...padding-left, margin-right au lieu de marginRight , et ainsi de suite. En outre, lanimation couleur nest pas inclus dans la bibliothèque jQuery de base. Si vous souhaitez animer la couleur, vous devez télécharger le plug-in Coulors Animations à partir jQuery.com.Utilisation des valeurs relativesIl est également possible de définir des valeurs relatives (la valeur est alors par rapport à la valeur actuelle de lélément). Ceci est fait en plaçant + = ou - =avant de la valeur: www.krymo.com
  27. 27. Télécharger ce document sur www.krymo.com/download.htmlExemple$("button").click(function(){ $("div").animate({ left:250px, height:+=150px, width:+=150px });});A laide des valeurs prédéfiniesVous pouvez même spécifier la valeur dune propriété danimation:Exemple$("button").click(function(){ $("div").animate({ height:toggle });}); www.krymo.com
  28. 28. Télécharger ce document sur www.krymo.com/download.htmlUtilisation de la fonctionnalité file dattentePar défaut, jQuery est livré avec des fonctionnalités file dattente pour les animations.Donc, si vous voulez effectuer différentes animations uns après les autres, nous profitons de la fonctionnalité file dattente:Exemple 1$("button").click(function(){ var div=$("div"); div.animate({height:300px,opacity:0.4},"slow"); div.animate({width:300px,opacity:0.8},"slow"); div.animate({height:100px,opacity:0.4},"slow"); div.animate({width:100px,opacity:0.8},"slow");});Lexemple ci-dessous déplace dabord lélément <div> vers la droite, puis augmente la taille de la police du texte:Exemple 2$("button").click(function(){ var div=$("div"); div.animate({left:100px},"slow"); div.animate({fontSize:3em},"slow");}); www.krymo.com
  29. 29. Télécharger ce document sur www.krymo.com/download.htmlAnimations darrêtstop () est utilisé pour arrêter les animations avant quelles ne soit terminées.Méthode stop ()La méthode stop () fonctionne pour toutes les fonctions deffets jQuery, y compris coulissantes, animations décoloration et personnalisé.Syntaxe:$(selector).stop(stopAll,goToEnd);Le paramètre optionnel spécifie si stopAll aussi la file dattente danimation doit être effacé ou non. Par défaut est false, ce qui signifie que seul lanimationactive sera arrêté, ce qui permet aux animations en attente dêtre exécutées par la suite.Le paramètre optionnel spécifie goToEnd ou non pour compléter lanimation en cours immédiatement. Par défaut est false.Donc, par défaut, la méthode stop () tue lanimation actuelle en cours dexécution sur lélément sélectionné.Lexemple suivant illustre la méthode stop () sans paramètres:Exemple$("#stop").click(function(){ $("#panel").stop();}); www.krymo.com
  30. 30. Télécharger ce document sur www.krymo.com/download.htmlFonctions rappelUne fonction de rappel est exécutée après que leffet courant soit à 100% terminée.Les instructions JavaScript sont exécutées ligne par ligne. Cependant, avec des effets, la prochaine ligne de code peut être exécuté même si leffet nest pasfini. Cela peut créer des erreurs.Pour éviter cela, vous pouvez créer une fonction de rappel.Syntaxe typique: $ ( sélecteur ) cacher (. vitesse, rappel );ExemplesLexemple ci-dessous présente un paramètre de rappel qui est une fonction qui sera exécutée après que leffet soit terminé:Exemple avec rappel$("button").click(function(){ $("p").hide("slow",function(){ alert("The paragraph is now hidden"); });});Lexemple ci-dessous na pas de paramètre de rappel, et la fenêtre dalerte sera affichée avant leffet peau est terminé:Exemple sans rappel$("button").click(function(){ $("p").hide(1000); alert("The paragraph is now hidden");}); www.krymo.com
  31. 31. Télécharger ce document sur www.krymo.com/download.htmlChaînageAvec jQuery, vous pouvez enchaîner des actions / méthodes.La méthode de chaînage nous permet dexécuter plusieurs méthodes jQuery (sur le même élément) dans une seule instruction.Jusquà maintenant, nous avons rédigés les instructions une à la fois .Cependant, il existe une technique appelée chaînage, qui nous permet dexécuter des commandes multiples, lune après lautre, sur le même élément (s).Astuce: De cette façon, les navigateurs nont pas à trouver le même élément (s) plus dune fois.Pour la chaîne dune action, il vous suffit de joindre laction à laction précédente.Les chaînes de lexemple suivant ainsi le css (), slideUp (), et slideDown () méthodes. Le "p1" élément premiers changements au rouge, puis glisse vers lehaut, puis glisse vers le bas:Exemple$("#p1").css("color","red").slideUp(2000).slideDown(2000);Nous pouvons aussi ajouter des appels de méthodes et plus si nécessaire.Astuce : Avec le chaînage, la ligne de code pourrait être très long. Cependant, jQuery nest pas très strict sur la syntaxe, vous pouvez le formater comme vousvoulez, y compris les sauts de ligne et les indentations.Cela fonctionne aussi très bien:Exemple$("#p1").css("color","red") .slideUp(2000) .slideDown(2000);jQuery jette des espaces supplémentaires et exécute les lignes ci-dessus comme une longue ligne de code. www.krymo.com
  32. 32. Télécharger ce document sur www.krymo.com/download.htmlObtenir du contenu et des attributsjQuery contient des méthodes puissantes pour changer et manipuler les éléments et attributs HTML.jQuery DOM manipulationUne partie très importante de jQuery, est la possibilité de manipuler le DOM.jQuery est livré avec un tas de méthodes DOM connexes, qui le rend facile à accéder et manipuler les éléments et attributs. DOM = Document Object Model Le DOM définit une norme pour laccès aux documents HTML et XML: «Le modèle du W3C DOM (Document Object) est une plate-forme indépendante de la langue et linterface qui permet aux programmes et aux scripts daccéder dynamiquement et mettre à jour le contenu, la structure et style dun document. "Obtenez du contenu - text (), html () et val ()simples, mais utiles, les méthodes jQuery pour la manipulation du DOM : •text () - Définit ou retourne le contenu textuel des éléments sélectionnés •html () - Définit ou retourne le contenu des éléments sélectionnés (y compris les balises HTML) •val () - Définit ou renvoie la valeur des champs de formulaireLexemple suivant montre comment obtenir le contenu avec le text () et le html () : www.krymo.com
  33. 33. Télécharger ce document sur www.krymo.com/download.htmlExemple$("#btn1").click(function(){ alert("Text: " + $("#test").text());});$("#btn2").click(function(){ alert("HTML: " + $("#test").html());});Lexemple suivant montre comment obtenir la valeur dun champ de saisie avec le val () :Exemple$("#btn1").click(function(){ alert("Value: " + $("#test").val());});Attributs attr ()Le attr () est utilisé pour obtenir les valeurs dattribut.Lexemple suivant montre comment obtenir la valeur de lattribut href dans un lien:Exemple$("button").click(function(){ alert($("#kry").attr("href"));}); www.krymo.com
  34. 34. Télécharger ce document sur www.krymo.com/download.html Contenu et Attributs Text (), html () et val ()Nous allons utiliser les trois mêmes méthodes de la page précédente pour définir le contenu : •text () - Définit ou retourne le contenu textuel des éléments sélectionnés •html () - Définit ou retourne le contenu des éléments sélectionnés (y compris les balises HTML) •val () - Définit ou renvoie la valeur des champs de formulaireLexemple suivant montre comment définir le contenu avec le text (), le html () et val () méthodes:Exemple$("#btn1").click(function(){ $("#test1").text("Hello world!");});$("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){ $("#test3").val("Dolly Duck");}); www.krymo.com
  35. 35. Télécharger ce document sur www.krymo.com/download.htmlUne fonction de rappelTous les trois méthodes ci-dessus: text (), html () et val (), viennent également avec une fonction de rappel. La fonction de rappel a deux paramètres: lindicede lélément courant dans la liste des éléments sélectionnés et loriginal (ancien) de valeur. Vous retournez ensuite la chaîne que vous souhaitez utiliser commenouvelle valeur de la fonction.Lexemple suivant montre text () et html () avec une fonction de rappel:Exemple$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; });});$("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; });});Attributs attr ()Le attr () est également utilisé pour définir / modifier les valeurs dattribut.Lexemple suivant montre comment modifier la valeur de lattribut href dans un lien: www.krymo.com
  36. 36. Télécharger ce document sur www.krymo.com/download.htmlExemple$("button").click(function(){ $("#kry").attr("href","http://www.krymo.com/jquery.html");});La méthode attr () vous permet également de définir des attributs multiples en même temps.Lexemple suivant montre comment définir à la fois le href et les attributs de titre en même temps:Exemple$("button").click(function(){ $("#w3s").attr({ "href" : "http://www.krymo.com/jquery", "title" : "krymo Tutoriel jQuery" });});Une fonction de rappel pour les attr ()La méthode attr (), vient également avec une fonction de rappel. La fonction de rappel a deux paramètres: lindice de lélément courant dans la liste deséléments sélectionnés et la valeur de lattribut originel (lancien). Vous retournez ensuite la chaîne que vous souhaitez utiliser comme nouvelle valeur dattributde la fonction.Lexemple suivant montre attr () avec une fonction de rappel:Exemple$("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; });}); www.krymo.com
  37. 37. Télécharger ce document sur www.krymo.com/download.htmlAjouter des élémentsAvec jQuery, il est facile dajouter de nouveaux éléments / contenu.Ajouter un contenu HTMLNous allons examiner quatre méthodes jQuery qui sont utilisés pour ajouter du nouveau contenu: •append () - Insère le contenu à la fin des éléments sélectionnés •préfixer () - Insère le contenu au début des éléments choisis •after () - Insère le contenu après les éléments sélectionnés •avant () - Insère le contenu avant que les éléments sélectionnésMéthode append ()Le append () insère contenu à la fin des éléments sélectionnés HTML.Exemple$("p").append("texte ajouté à la fin.");Méthode prepend ()Le prepend () insère le contenu AU DÉBUT des éléments sélectionnés HTML.Exemple$("p").prepend("texte ajouté au début."); www.krymo.com
  38. 38. Télécharger ce document sur www.krymo.com/download.htmlAjouter plusieurs nouveaux éléments avec append () et prepend ()Dans les deux exemples ci-dessus, nous navons inséré un texte / HTML au début / à la fin des éléments sélectionnés HTML.Cependant, le append () et le prepend () peuvent prendre un nombre infini de nouveaux éléments comme paramètres. Les nouveaux éléments peuvent êtregénérés avec le texte / HTML (comme nous lavons fait dans les exemples ci-dessus), avec jQuery, ou avec du code JavaScript et les éléments DOM.Dans lexemple suivant, nous créons plusieurs éléments nouveaux. Les éléments sont créés avec le texte / HTML, jQuery et JavaScript / DOM. Puis nousajoutons de nouveaux éléments au texte avec la méthode append () (ce qui serait valable pour le prepend () aussi):Exemplefunction appendText(){var txt1="<p>Text.</p>"; // Créer un élément avec HTMLvar txt2=$("<p></p>").text("Text."); // Créer avec jQueryvar txt3=document.createElement("p"); // Créer avec DOMtxt3.innerHTML="Text.";$("p").append(txt1,txt2,txt3); // Ajouter de nouveaux éléments} Méthodes after () et before ()Le after () méthode insère le contenu APRÈS les éléments sélectionnés HTML.Le before () méthode insère le contenu AVANT les éléments sélectionnés HTML.Exemple$("img").after("du texte après");$("img").before("Du texte après"); www.krymo.com
  39. 39. Télécharger ce document sur www.krymo.com/download.htmlAjouter plusieurs nouveaux éléments Avec after () et before ()En outre, les deux méthodes peuvent prendre un nombre infini de nouveaux éléments comme paramètres. Les nouveaux éléments peuvent être générés avecle texte / HTML (comme nous lavons fait dans lexemple ci-dessus), avec jQuery, ou avec du code JavaScript et les éléments DOM.Dans lexemple suivant, nous créons plusieurs éléments nouveaux. Les éléments sont créés avec le texte / HTML, jQuery et JavaScript / DOM. Puis nousinsérons les nouveaux éléments au texte avec la méthode after () (ce qui serait valable pour le before () aussi):Exemplefunction afterText(){var txt1="<b>I </b>"; // Créer avec HTMLvar txt2=$("<i></i>").text("love "); // avec jQueryvar txt3=document.createElement("big"); // avec DOMtxt3.innerHTML="jQuery!";$("img").after(txt1,txt2,txt3); // Inserrer de nouveaux éléments img} www.krymo.com
  40. 40. Télécharger ce document sur www.krymo.com/download.htmlÉléments à supprimerAvec jQuery, il est facile de retirer les éléments HTML existants.Supprimer du contenu /Pour supprimer du contenu, il ya principalement deux méthodes jQuery: •remove () - Supprime lélément sélectionné (et ses éléments enfants) •empty () - Supprime les éléments enfants de lélément sélectionnéMéthode remove ()Le remove () supprime lélément sélectionné (s) et ses éléments enfants.Exemple$("#div1").remove();Méthode empty ()La méthode jQuery empty () supprime les éléments enfants de lélément sélectionné (s).Exemple$("#div1").empty(); www.krymo.com
  41. 41. Télécharger ce document sur www.krymo.com/download.htmlFiltrer les éléments à enleverLe remove () accepte aussi un paramètre qui vous permet de filtrer les éléments à supprimer.Le paramètre peut être lune des sélecteurs jQuery .Lexemple suivant supprime tous les éléments <p> avec class = "italic":Exemple$("p").remove(".italic"); www.krymo.com
  42. 42. Télécharger ce document sur www.krymo.com/download.htmlClasses CSS Get et SetAvec jQuery, il est facile de manipuler le CSS des éléments.Manipulation CSSjQuery dispose de plusieurs méthodes pour la manipulation CSS. Nous allons examiner les méthodes suivantes: •addClass () - Ajoute une ou plusieurs classes aux éléments sélectionnés •removeClass () - Supprime une ou plusieurs classes à partir des éléments sélectionnés •toggleClass () - Bascule entre lajout / suppression des classes à partir des éléments sélectionnés •css () - Définit ou retourne lattribut de styleExempleLa feuille de style suivante sera utilisée pour tous les exemples sur cette page:.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;} www.krymo.com
  43. 43. Télécharger ce document sur www.krymo.com/download.htmlMéthode addClass ()Lexemple suivant montre comment ajouter des attributs de classe pour les différents éléments. Bien sûr, vous pouvez sélectionner plusieurs éléments, lors delajout des classes:Exemple$("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important");});Vous pouvez également spécifier plusieurs classes au sein de la méthode addClass ():Exemple$("button").click(function(){ $("#div1").addClass("important blue");});Méthode removeClass ()Lexemple suivant montre comment supprimer un attribut de classe spécifique de différents éléments:Exemple$("button").click(function(){ $("h1,h2,p").removeClass("blue");}); www.krymo.com
  44. 44. Télécharger ce document sur www.krymo.com/download.htmlMéthode toggleClass ()Lexemple suivant montre comment utiliser la méthode. toggleClass () Cette méthode permet de basculer entre lajout / suppression des classes à partir deséléments sélectionnés:Exemple$("button").click(function(){ $("h1,h2,p").toggleClass("blue");});Méthode css ()Le css () ou la méthode des ensembles retourne une ou plusieurs propriétés de style pour les éléments sélectionnés.Retour dune propriété CSSPour renvoyer la valeur dune propriété CSS spécifiée, utilisez la syntaxe suivante:css("propertyname");Lexemple suivant renvoie la valeur de background-color de lélément PREMIER correspondance: www.krymo.com
  45. 45. Télécharger ce document sur www.krymo.com/download.htmlExemple$("p").css("background-color");Définir une propriété CSSPour définir une propriété CSS spécifiée, utilisez la syntaxe suivante:css("propertyname","value");Lexemple suivant définit la valeur background-color pour TOUS les éléments correspondants:Exemple$("p").css("background-color","yellow");Réglez multiples propriétés CSSPour définir plusieurs propriétés CSS, utilisez la syntaxe suivante: www.krymo.com
  46. 46. Télécharger ce document sur www.krymo.com/download.htmlcss({"propertyname":"value","propertyname":"value",...});Lexemple suivant créera un background-color et une taille de police de tous les éléments correspondants:Exemple$("p").css({"background-color":"yellow","font-size":"200%"});DimensionsAvec jQuery, il est facile de travailler avec les dimensions des éléments et la fenêtre du navigateur.Méthodes Dimension jQueryjQuery possède plusieurs méthodes importantes pour travailler avec les dimensions: •width () •height () •innerWidth () •innerHeight () •outerWidth () •outerHeight () www.krymo.com
  47. 47. Télécharger ce document sur www.krymo.com/download.htmlDimensions jQuerywidth () et height ()width () définit ou renvoie la largeur dun élément (ne comprend padding, border, ou marge).height () méthode définit ou retourne la hauteur dun élément (ne comprend pas padding, border, ou marge).Lexemple suivant retourne la largeur et la hauteur dun élément div spécifié: www.krymo.com
  48. 48. Télécharger ce document sur www.krymo.com/download.htmlExemple$("button").click(function(){ var txt=""; txt+="Width: " + $("#div1").width() + "</br>"; txt+="Height: " + $("#div1").height(); $("#div1").html(txt);});Méthodes innerWidth () et innerHeight ()Le innerWidth () retourne la largeur dun élément (y compris les protections).Le innerHeight () retourne la hauteur dun élément (y compris les protections).Lexemple suivant retourne le inner-width/height dun élément div spécifié:Exemple$("button").click(function(){ var txt=""; txt+="Inner width: " + $("#div1").innerWidth() + "</br>"; txt+="Inner height: " + $("#div1").innerHeight(); $("#div1").html(txt);}); www.krymo.com
  49. 49. Télécharger ce document sur www.krymo.com/download.htmlMéthodes outerWidth () et outerHeight ()Le outerWidth () retourne la largeur dun élément (y compris rembourrage et la frontière).Le outerHeight () retourne la hauteur dun élément (y compris rembourrage et la frontière).Lexemple suivant retourne le outer-width/height dun élément div spécifié:Exemple$("button").click(function(){ var txt=""; txt+="Outer width: " + $("#div1").outerWidth() + "</br>"; txt+="Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt);});Le outerWidth (true) retourne la largeur dun élément (y compris les padding, border, et la marge).Le outerHeight (true) retourne la hauteur dun élément (y compris les padding, border, et la marge).Exemple$("button").click(function(){ var txt=""; txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>"; txt+="Outer height (+margin): " + $("#div1").outerHeight(true); $("#div1").html(txt);}); www.krymo.com
  50. 50. Télécharger ce document sur www.krymo.com/download.html width () plus height ()Lexemple suivant retourne la largeur et la hauteur du document (le document HTML) et de la fenêtre (la fenêtre du navigateur):Exemple$("button").click(function(){ var txt=""; txt+="Document width/height: " + $(document).width(); txt+="x" + $(document).height() + "n"; txt+="Window width/height: " + $(window).width(); txt+="x" + $(window).height(); alert(txt);});Lexemple suivant définit la largeur et la hauteur dun élément div spécifié:Exemple$("button").click(function(){ $("#div1").width(500).height(500);}); www.krymo.com

×