Comment ajouter et supprimer des attributs avec le Framework jQuery - partie 2

Post on 10-Nov-2015

10 views 4 download

Transcript of Comment ajouter et supprimer des attributs avec le Framework jQuery - partie 2

  • Et voici la suite de la formation consacre aux attributs jQuery. Apprenez lire, modifier etsupprimer les attributs d'un lment HTML avec le Framework jQuery. Tout est dans le cours ci-dessous.

    jQLeadBrite("#leadplayer_video_element_536B291C0D65C").leadplayer(false, "eyJnYSI6dHJ1ZSwib3ZlcmxheSI6ZmFsc2UsInBvd2VyZWRfYnkiOmZhbHNlLCJwb3dlcmVkX2J5X2xpbmsiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC8iLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiUkVDRVZPSVIgISIsInR4dF9wbGF5IjoiTGVjdHVyZSIsInR4dF9lbWwiOiJSZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X25hbWUiOiJSZW5zZWlnbmV6IHZvdHJlIFByXHUwMGU5bm9tLi4uIiwidHh0X2ludmFsaWRfZW1sIjoiU1ZQLCByZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X2ludmFsaWRfbmFtZSI6IlNWUCwgcmVuc2VpZ25leiB2b3RyZSBQclx1MDBlOW5vbS4uLiIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMi4xIFVubGltaXRlZCIsImlkIjoiNTM2QjI5MUMwRDY1QyIsIndpZHRoIjo5NDAsImhlaWdodCI6NTI5LCJ0aHVtYm5haWwiOiIiLCJ0aXRsZSI6IkNvbW1lbnQgYWpvdXRlciBzdXBwcmltZXIgZGVzIGF0dHJpYnV0cyBhdmVjIGxlIEZyYW1ld29yayBqUXVlcnkgLSBwYXJ0aWUgMiIsImRlc2NyaXB0aW9uIjoiQ29tbWVudCBham91dGVyIHN1cHByaW1lciBkZXMgYXR0cmlidXRzIGF2ZWMgbGUgRnJhbWV3b3JrIGpRdWVyeSAtIHBhcnRpZSAyIiwiYXV0b3BsYXkiOmZhbHNlLCJzaG93X3RpbWVsaW5lIjp0cnVlLCJlbmFibGVfaGQiOnRydWUsIm9wdCI6ZmFsc2UsImN0YSI6eyJ0aW1lIjoiZW5kIiwiYnRleHQiOiJDbGlxdWV6IGljaSBwb3VyIFByb2ZpdGVyIGRlIGxhIFB1aXNzYW5jZSBkZXMgRnJhbWV3b3JrcyBqUXVlcnkgZXQgRG9qbyBkYW5zIHZvdHJlIERcdTAwZTl2ZWxvcHBlbWVudCAhIiwidXJsIjoiaHR0cDpcL1wvd3d3LnByb2dyYW1tYXRpb24tZmFjaWxlLmNvbVwvZm9ybWF0aW9uLWpxdWVyeS1kb2pvXC8iLCJhdXRvX2ZvbGxvdyI6ZmFsc2UsIm5ld193aW5kb3ciOmZhbHNlfSwieW0iOiIwbFBFWVVrbkVwcyJ9");

    Afficher le texte de la vidoComment ajouter et supprimer des attributs avec le Framework jQuery - partie 2 Bonjour tous et bienvenu sur Dveloppement Facile. On continue la suite des cours consacrs auFramework JavaScript jQuery, et celui-l c'est la deuxime partie pour manipuler les attributsdirectement avec les raccourcis jQuery. Dans le cours prcdent, je vous ai montr, vous avezcommenc dcouvrir la manipulation et la modification via les attributs jQuery, les attributsdes balises div, paragraphes, etc. L on continu, on va aller encore beaucoup plusloin.Connaitre la valeur d'un attribut Il est possible de connatre la valeur d'un attribut, vousfaites $a, pour la balise a, et attr('title'), vous rcuprez la valeur de l'attribut title, du premier lienrencontr, donc attr, nom de l'attribut, a va accder la valeur de l'attribut mentionn, estensuite, libre vous de le modifier, de faire ce dont vous avez besoin pour votre application,votre site Internet. C'est une mthode trs utile, justement, pour retrouver la valeur de l'attributslectionn, ou du premier lment slectionn s'il y en a plusieurs, s'il n'y a pas d'lment quicorrespond l'attribut que vous recherchez, la valeur undefined est retourne. Cette mthoderetourne galement un objet jQuery, on verra la fin de ce cours, les exemples de code source,comme a ce sera beaucoup plus simple, je vous explique un peu la thorie en premier, et

    1 / 3

  • aprs on passe rapidement la pratique.Ajouter un attribut et sa valeur Vous pouvez ajouterun attribut avec une valeur, c'est trs intressant, $#logo a va chercher getElementById Id logoattribut alt, avec la valeur dev facile. Comme je vous l'ai dit, a recherche dans votre documentHTML l'lment identifi par logo, et a va lui donner l'attribut alt avec la valeur dev facile, doncc'est trs utilis, pour modifier alt dans le cas d'une balise image, img. Cette mthode retournegalement un objet jQuery, trs intressante, pour assigner un attribut avec une valeur unobjet HTML ou une balise div, p, etc. Vous pouvez ajouter plusieurs attributs et plusieursvaleurs toujours avec attr, $ image a va rechercher la premire balise image trouve, src, vousaller changer l'image affiche l'cran, SRC c'est la source, l'URL de l'image, si l'image nes'affiche pas, vous afficherez le logo dev facile. Trs intressant pour ajouter plusieurs attributs,plusieurs valeurs d'un seul coup un lment, il suffit de sparer les diffrentes proprits parune virgule, cette mthode retourne galement un objet jQuery. Supprimer un attribut Vouspouvez supprimer un attribut c'est avec remove attr, $#div1 a va rechercher l'lment avec unId qui s'appelle div1 et a va enlever l'attribut disabled. Cette mthode retourne galement unobjet jQuery.Connaitre l'attribut value Ensuite vous pouvez connatre l'attribut value, voussavez, dans les formulaires checkbox, les champs de textes, tout a, on utilise value pourrcuprer la valeur que l'utilisateur a choisi ou qu'il a coch sur une checkbox. $input.val, a varcuprer le contenu de l'attribut value du premier champ de formulaire de type input, et donc lamthode val a rcupre sous forme de chane de caractres le contenu de l'attribut value dupremier lment de la slection. Cette mthode retourne cette fois une chane decaractres.Modifier l'attribut value Vous pouvez, justement, modifier l'attribut value, toutsimplement, $div#input, a va chercher une balise div avec un Id input.val user, a va attribuerla valeur user cette balise div. Cette mthode retourne un objet jQuery.Exempled'application L on a vu ensemble la solution pour ajouter des attributs une balise, modifierles attributs, les supprimer. Je vous montre un exemple de code source comme a vous verrezexactement ce que a donne, donc l, tout le code source jQuery est comment, si vousappuyez sur le bouton search, l on cherche une balise button, il y en a plusieurs, par contre,avec l'Id search, il n'y en a qu'une. Ds que l'utilisateur appui sur chercher, a va rcuprer lestyle de la balise spam et l'afficher. Balise spam, il y en a une ici, et son style ici, pareil il y a desboutons grow, le bouton grow c'est agrandir le tableau donc a va rcuprer la balise table etmodifier sa largeur, tout simplement. Picture, le clic sur le lien, qu'est-ce qu'on fait quand onclique sur le lien ? Image suivante, plusieurs attributs d'un seul coup, la source, donc l'URL del'image, le alt, le titre de l'image, tout simplement. Ensuite vous avez d'autres options, je vousmontre en direct, chercher, agrandir le tableau, image suivante, vous pouvez dsactiver le style,donc tout a en direct grce jQuery, slectionner une valeur, votre choix est JavaScript, autrechoix est ActionScript 3 et une commande voil, vous avez dj fait une commande, donc touta c'est ici avec les clics, vous avez dj fait une commande, rcuprer.val, rcuprer la valeur,modifier la valeur, tout a grce jQuery.Votre plan d'actions ! J'ai t trs vite pour vousprsenter le code source, parce que pour progresser vous devez l'utiliser, donc tlchargez lecode source sous cette vido, utilisez-le, mettez-le en pratique dans votre site HTML 5, si vousavez des questions, posez-les directement sous ce cours vido, moi je vous dis trs bienttsur Dveloppement Facile.

    2 / 3

  • Tlchargez l'exemple jQueryEt voici le code source avec la manipulation des attributs HTML via jQuery.

    Downloads

    Manipuler des attributs d'un lment HTML

    Code source JavaScript comment pour lire, modifier et supprimer des attributs HTMLavec jQuery. Il y a galement la version jquery-1.11.0.min.js.

    Posez vos questions iciSi vous avez des questions sur le cours, posez-les directement dans la zonecommentaires.Comment ajouter et supprimer des attributs avec le Framework jQuery - partie 2

    Powered by TCPDF (www.tcpdf.org)

    3 / 3