Le Framework jQuery offre de nombreuses possibilités pour sélectionner un ou plusieurs éléments de la page HTML.
C’est très pratique pour modifier le contenu de la page HTML directement depuis JavaScript.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
La méthode pour manipuler les attributs HTML avec le Framework jQuery
Bonjour à tous et bienvenu sur Développement Facile.
Vous allez apprendre à utiliser les filtres d’attributs jQuery dans ce nouveau cours, c’est partit pour que ce soit beaucoup plus facile pour votre apprentissage je fais toujours en sorte que les vidéos dur moins de 10 minutes, comme ça vous pouvez toujours trouver 10 minutes le soir, ou 10 minutes le matin, pour consulter le cours, télécharger le code source, le mettre en pratique, et après assimiler petit à petit l’utilisation de jQuery.
Les filtres d’attribut
C’est partit, filtres d’attribut, $div entre crochets Id, ça va sélectionner tous les éléments qui ont un attribut Id, c’est très simple, dans l’exemple de code source j’ai mis $li entre crochet classe, ça va sélectionner tous les éléments li qui ont une classe. La classe peut avoir des noms différents, il faut juste qu’ils aient l’attribut classe, module 1, module 2, et module 4, vont avoir une couleur de fond différente de module 3 et module 5.
Ensuite, $input name action= user, ça va sélectionner déjà tous les éléments de formulaire sur une balise input, ensuite sur une balise avec un attribut name, et un attribut name qui fait appel action user, vous voyez, vous prenez les éléments petit à petit dans jQuery dans le raccourcis et vous savez ce que ça fait.
Là on va sélectionner dans l’exemple de code source que vous avez sur votre écran, toutes les balises li qui ont une classe s’appellent gras. Module 1, module 2, et module 4, vont avoir une couleur de fond de 2E2EFE tout simplement.
Ensuite vous avez $input name not = action user, on part de là, raccourcis jQuery, sélectionne toutes les balises input, de formulaire input, sans attribut name, ou ceux qui ont un attribut name avec une valeur différente de action user, dans l’exemple $li classe = gras, ça va sélectionner toutes les balises li sans attribut classe, ou qui ont un attribut classe mais qui ne s’appelle pas gras.
Module 3 et module 5, auront une couleur de background qui sera égale à 2E2EFE comme d’habitude.
Alors là on complique un peu le filtre d’attribut, donc on va sélectionner tous les éléments input avec l’attribut name dont la valeur, accent circonflexe, commence par action. Même chose dans l’exemple de code source qui s’affiche à votre écran on va sélectionner toutes les balises li avec une classe avec un attribut dont l’attribut classe commence par OK, donc module 1 et module 5 auront une couleur de background 2E2EFE.
Ensuite alors là on sélectionne toutes les balises input, avec l’attribut name, donc $ = ça veut dire que leur nom, leur valeur de name se termine par _user. Dans l’exemple ça donne, on sélectionne toutes les balises li avec l’attribut classe qui se termine par _user, module 2 et module 5, auront couleur de background tout simplement. C’est vraiment, une fois que vous avez compris le truc des filtres jQuery c’est vraiment très simple à utiliser, il suffit de connaître les filtres jQuery pour ceux qui s’inscrivent à la formation expert jQuery, ils auront, bien évidemment, un document PDF récapitulatif avec tous les raccourcis, ce sera très pratique pour vous, qui vous inscrivez à cette formation, pour mieux utiliser jQuery.
Input name * = dev, ça va sélectionner tous les éléments de formulaire input, toutes les balises input, avec l’attribut name dont la valeur contient dev. Juste en dessous dans l’exemple on va sélectionner toutes les balises li avec l’attribut classe qui contient comme nom dev, module 5, module 4 auront une couleur de background différente qui sera égale à 2E2EFE, ensuite, à là on complique un peu les choses dans le filtre, ça va sélectionner toutes les balises input qui ont un identifiant Id et un identifiant name qui se termine par _ OK. Alors dans l’exemple de code source on va sélectionner déjà, li toutes les balises li Id qui ont un identifiant Id, et classe qui ont un attribut classe qui se termine par user. Excusez-moi, pardon, désolé, je me suis enrhumé, donc dans l’exemple de la liste il n’y aura aucun élément de sélectionner parce que tout simplement, il n’y a aucune balise Id d’identifiant Id. Voilà prenez le code source, faites le test c’était un petit truc.
Je vous montre un exemple de code source comme d’habitude, le résultat, le code source, à vous de dé commenter tous ces raccourcis jQuery pour voir le résultat, donc là on sélectionne tous les élément li, voilà ils sont tous sélectionner, vous avez une balise id, qui ont une balise id, voilà par contre la classe doit se terminer par user, module 1, oui, module 3 ça ne se termine pas par user pas sélectionné, module 4 il n’a pas de balise id, module 5 se termine par user, regardez il est sélectionné et module 5, on va l’appeler module bonus pour mieux voir, lui il a une balise id mais pas de classe, donc il ne sera pas sélectionné, voyez, après à vous de les dé commenter, vous verrez les résultats visuels par vous-même.
Votre plan d’actions !
Votre plan d’action, c’est toujours le même, passez à l’action ! Téléchargez le code source sous ce cours vidéo, testez-le de votre côté après implémentez jQuery dans votre site HTML 5, si vous avez des questions posez-les directement sous ce cours vidéo, moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple jQuery
Retrouvez le code source commenté pour manipuler les attributs HTML.
Téléchargement du code source Sélectionner des attributs HTML avec jQuery
