Apprenez à utiliser les filtres de contenu avec le Framework jQuery

Découvrez comment les filtres de contenu jQuery peuvent vous être très utiles pour modifier des éléments de la page à la volée.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Apprenez à utiliser les filtres de contenu avec le Framework jQuery

Bonjour à tous et bienvenu sur Développement Facile.

Dans ce nouveau cours toujours dédié au Framework jQuery, vous allez découvrir les filtres jQuery de contenu. Alors qu’est-ce que c’est que cette chose ?

Les filtres de contenu

Ca va permettre de sélectionner par exemple, des div qui contiennent un certain nom de classe, un certain nom d’identifiant, des textes très précis, de sélectionner plusieurs éléments d’un coup avec des particularités dans leur nom de classe, ou leur nom d’identifiant.

Exemple vous avez le code source sur votre écran, là on fait $div :contains Facile ça va sélectionner tous les blocs div, ça vous connaissez par cœur maintenant, mais qui contiennent le texte « Facile », il faut savoir que c’est sensible à la casse, si vous mettez F majuscule, ça va sélectionner uniquement les blocs div qui contiennent facile avec un F majuscule, si vous mettez un f minuscule ce ne sera pas sélectionné. Dans l’exemple, ça va ajouter une bordure uniquement sur le premier div car il y a facile avec F majuscule, dans le deuxième il n’y a même pas le mot facile, et dans le troisième c’est facile mais avec un F minuscule. La bordure sera uniquement sur le premier élément

Ensuite div :empty là ça va sélectionner tous les blocs div vides, vous avez l’exemple, ça va rajouter une bordure uniquement sur le troisième bloc div, donc le dernier juste en dessous de formation avec suivi individuel, vous avez le code source qui s’affiche sur votre écran, reprenez-le, modifiez-le et voyez par vous-même ce que ça donne.

Ensuite, div :parent ça va sélectionner les blocs div qui ont des éléments enfants, donc sur l’écran là, les blocs div qui ont des éléments enfants vont avoir un background de couleur 2E2EFE, je vous invite vraiment à faire l’exercice, je ne vais pas vous dire ce que ça donne, comme ça vous prenez le code source, vous le mettez dans votre document HTML et vous voyez le résultat par vous-même.

Ensuite div : has p, ça sélectionne les blocs div qui contiennent des paragraphes, dans l’exemple div has p, il n’y a aucun bloc div qui a un paragraphe, aucun n’aura une couleur de background.

Je vous montre un exemple de code source quand même, comme d’habitude, pour vous aider, alors vous avez le résultat qui s’affiche ici, comme d’habitude j’ai commenté les raccourcis jQuery, ce sera à vous de les dé commenter et de voir le résultat affiché à l’écran, là ça va sélectionner les blocs div qui ont un ou plusieurs paragraphes, donc on regarde les blocs div, à celui-là il a un paragraphe, on rajoute une couleur de fond, là paragraphe, on rajoute une couleur de fond, celui-là il est vide donc rien, et celui-là il a un bloc div mais à l’intérieur il contient un bloc div mais ce n’est pas un bloc paragraphe donc on ne met pas de couleur, voyez, il n’y a pas de couleur de fond sur ceux-là et ceux-là ces blocs div ils ont une couleur de fond.
C’est parce qu’il y a une hauteur, si j’enlève la hauteur, voilà, je recharge la page, voyez, tout le bloc div et tout le texte qui est sélectionné.

Votre plan d’actions !

Comme d’habitude, retrouvez le code source disponible sous ce cours vidéo, si vous avez des questions posez-les également sous la vidéo. Je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple jQuery

Retrouvez un exemple de code avec les filtres de contenu jQuery.

Comment utilisez-vous les possibilités de jQuery ?

Dites-moi dans les commentaires, les fonctionnalités que vous avez implémentés dans vos sites avec jQuery.