Sélectionnez un ou plusieurs éléments HTML précisément avec les filtres de base du Framework jQuery.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
La technique pour utiliser les filtres de base du Framework jQuery
Bonjour à tous et bienvenu sur Développement Facile.
Bienvenue dans ce nouveau cours dédié à jQuery, et là vous allez découvrir tous les filtres jQuery de bases, ceux qui sont les plus simples à utiliser pour commencer à faire des trucs vraiment très sympas.
Les filtres de bases
Par exemple vous avez … vous voyez sur votre écran, $li:fisrt ça sélectionne le premier élément de la liste li du document juste en dessous, il y a un exemple de code source ou on va sélectionner module1 et on va rajouter une bordure sur module1 tout simplement. Ensuite vous avez $li :last, la last ça va sélectionner le dernier élément de la liste du document cette fois ce sera module5 qui aura sa bordure, c’est vraiment, vous voyez, très simple, juste $li c’est le nom de la balise, last pour la dernière balise, first pour la première. Vous avez :event, ça va sélectionner tous les éléments pairs, attention avec un index qui commence à zéro, donc enfaite ça va afficher les éléments impairs sur votre exemple, vu que ça part de zéro, ce sera module1, module3, module5 qui auront une bordure, c’est un peu spécial ce filtre, il faut s’y habituer, et odd c’est les éléments impairs mais toujours avec l’index qui commence à zéro, ce sera les éléments impairs qui auront une bordure, module2, et module4, auront une bordure.
Vous avez également li:eq index, ça sélectionne un élément déterminé selon son index qui commence à zéro, donc dans cet exemple de code source, vous avez $li :eq3, ça va sélectionner le troisième élément mais en partant de zéro, donc c’est module4 qui aura une bordure. Ensuite gt index là ça sélectionne les éléments suivant, selon un index qui par de zéro, $li dans l’exemple de code source, gt2, 012, ça va partir du module 3 et ça va sélectionner tous les éléments suivants module4 et 5 auront une bordure. Ensuite, lt index ça sélectionne les éléments précédents, ça fonctionne comme gt, gt c’est les éléments suivants, ls c’est les éléments précédents, $li :lt2 comme dans l’exemple, on va jusqu’à module3 ont part de 0 évidemment l’index, on sélectionne les éléments précédents, donc module1 et module2 auront une bordure de couleurs 2E2EFE.
:header ça sélectionne toutes les balises titres de la page, h1, h2, h3, c’est des filtres très pratique à connaître,
Vous avez des filtres de base comme div:not.not_selected, donc ça va sélectionner toutes les balises div, saufs celles avec une classe qui s’appelle not_selected, dans l’exemple de code source que vous avez sur votre écran, ça va mettre une bordure sur toutes les balises div qui n’ont pas une classe not_selected, module2, module4 vont avoir une bordure.
Je vais vous montrer bien évidemment, un exemple de code source, le temps de le trouver, voilà, l’exemple de code source, je les ai mis en commentaire, j’ai repris tout ce que j’ai repris dans le cours, ce que vous avez vu en exemple de code source, et je les ai mis en commentaire avec des commentaires de ce que fait cette ligne jQuery, donc si vous voulez tester, vous n’avez plus qu’à dé commenter et à sauvegarder, et juste en dessous, vous avez votre liste, les titres, et les divs, avec les différents exemples, donc qu’est-ce que ça donne ?
Ça donne ce résultat, là on sélectionne le module1, module2, si vous regardez le code source ici, lt2 sélectionne les éléments précédents, le deuxième nom, sachant que l’on part de zéro, on arrive ici, et module3, on sélectionne le 1 et le 2, ensuite, qu’est-ce qu’on a ? Toutes les balises header, on rajoute une bordure de trois pixels solides, h1, h2, h3, les types, une bordure de 3 pixels.
Qu’est-ce qu’on a d’autre ? On sélectionne toutes les div qui n’ont pas une classe qui s’appelle not_selected et on rajoute une bordure, on sélectionne module2 et module4 et on leur ajoute une bordure.
Votre plan d’actions !
Vous voyez il y a très peu de code, c’est très facile à utiliser, donc je vous encourage à utiliser le Framework jQuery dans vos sites HTML 5, vous pouvez télécharger le code source sous cette vidéo, si vous avez des questions, posez-les directement sous ce cours, et moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple jQuery
Voici le code source commenté avec les filtres de base jQuery.
Téléchargement du code source Exemple filtres de base jQuery
