Comment utiliser les sélecteurs du Framework jQuery

Voici la suite du cours précédent sur jQuery.

Apprenez à utiliser les sélecteurs jQuery pour accéder rapidement à un élément HTML.

Tout est dans le cours vidéo ci-dessous.

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

Comment utiliser les sélecteurs du Framework jQuery

Bonjour à tous et bienvenu sur Développement Facile.

On continue ensemble la série de cours dédiée au Framework jQuery pour vous aider à utiliser ce Framework vraiment génial, qui va énormément simplifier votre développement et vous permettre d’ajouter des effets très sympas. Dans ce cours vous allez découvrir les sélecteurs avec jQuery.

Sélecteurs basiques

Vous avez la possibilité de sélectionner directement des balises dans votre document HTML, des blocs div, des paragraphes, des balises de liens a, image etc. Tout ce que vous souhaitez. Il y a les sélecteurs basiques, donc ça équivaut à, en JavaScript, à getElementById, que vous connaissez, bien tout simplement regardez sur l’écran-là qui se situe à ma gauche, vous faites $#module2, le # c’est l’Id comme en CSS, module2.CSS et vous rajoutez une bordure de 1 pixel solide avec la couleur 2E2EFE, ça va ajouter une bordure, #jQuery, donc jQueyr peut accéder à ces éléments, donc vous pouvez soit restreindre à p#module2, donc ça va d’abord chercher une balise paragraphe et avec un Id module2 ou directement #module2, en principe si vous respectez les normes du W3C vous n’avez qu’un seul Id, donc un seul élément avec un Id, un identifiant unique dans votre page HTML, vous pouvez mettre #module2 directement.CSS vous accédez aux getElementById, l’équivalent JavaScript.

Ensuite vous avez l’équivalent à getElementByTagName, si vous connaissez le JavaScript vous avez déjà dû utiliser cette fonction. Bien là, c’est pareil, $ pour faire appel à jQuery, c’est le raccourci jQuery, p pour paragraphe, là vous allez accéder à tous les paragraphes, donc il y a module1, module2, attention module3 c’est une balise div donc elle ne sera pas modifiée par jQuery, module1 et module2 c’est une balise paragraphe donc elle vont être modifiées par jQuery, regardez sur le code source, vous accédez au CSS border et vous rajoutez une bordure sur tous les paragraphes.

Ensuite qu’est-ce que vous avez ? Avec la classe, la classe c’est .début, vous mettez le nom de la classe. Pareil soit vous mettez div.debut, c’est-à-dire, c’est ici dans cet exemple vous mettez div.debut, ça va d’abord chercher une balise div, donc vous voyez que dans cet exemple il n’y a pas de balise div, aucun élément n’aura de bordure, par contre si vous mettez p.debut, ça va d’abord chercher une balise paragraphe avec une classe début, donc module1 et module3 auront une bordure de rajoutée.

Ensuite vous avez, c’est ce que je vous ai expliqué, vous pouvez écrire p.début pour sélectionner uniquement les balises p avec la classe dzbut, où vous pouvez mettre .classe1 .classe2 ça va sélectionner tous les éléments qui ont comme nom de classe, classe1 et classe2, vous pouvez sélectionner plusieurs classes, plusieurs Id, bien évidemment ça va être #Id1, #id2, d’un seul coup pour modifier le CSS ou faire d’autre chose. Vous pouvez sélectionner tous les éléments avec le sélecteur étoile, là ça va ajouter une bordure $*.css que vous avez ici, ça va ajouter une bordure à tous les éléments carrément, ou alors vous pouvez sélectionner plusieurs sélecteurs directement avec le raccourci dollar et entre parenthèse div, dans cet exemple, dans le dernier exemple vous allez sélectionner toutes les balises div, toutes les balises span, et toutes les balises paragraphe, mais qui ont une classe qui s’appelle nom classe, et vous allez ajouter une bordure à tous ces éléments.

Sélecteurs hiérarchiques

Vous avez également la possibilité de sélectionner les enfants donc #child P, donc ça va sélectionner tous les enfants d’un paragraphe, donc vous avez un paragraphe et des éléments dans ce paragraphe, ça va sélectionner tous les éléments avec un Id child ou si vous mettez .child une classe child.

Voici un exemple de sélection des enfants, donc $ #child* ça va sélectionner tous les enfants de la balise Id child, vous avez à la balise span avec un Id child et on va sélectionner tous les enfants et ajouter une bordure.

Vous avez également la sélection des parents vers les enfants immédiats, donc là vous utiliser #child avec le signe supérieur p, ça va sélectionner tous les enfants directs de le balise p contenue dans l’élément identifié par child, et vous pouvez sélectionner les petits-enfants, et arrière arrière-petits-enfants, il faut savoir qu’ils ne sont pas sélectionnés avec cet exemple, pour les sélectionner il faut utiliser leur Id, enfin $ #id des petits enfants, ou des arrières petits-enfants.

Vous avez, voici un exemple qui va sélectionner tous les enfants de #child, mais pas les petits enfants, donc il n’y aura pas de bordure sur les images, pas de bordure sur la balise span, donc c’est différent de l’exemple de tout à l’heure. Là vous avez les exemples qui s’affichent sur votre écran, je vous invite à les reprendre, à faire des effets, ça vous permettra visuellement de bien comprendre la différence entre, on sélectionne tous les enfants d’un parent, ou uniquement les enfants immédiats, là voyez qu’il y aura une bordure uniquement sur les balises div, trois bordures au lieu, dans l’exemple précédent, des bordures sur les images, span etc.

Vous pouvez sélectionner les éléments frères suivants donc avec #child~div, on sélectionne les blocs div frères après l’élément identifié par #child.

Voici un exemple de code source, donc là ça va sélectionner tous les éléments dans la liste après module1, à vous de faire des essais de code source, de toute façon, comme d’habitude vous retrouverez en téléchargement le code source comme ça vous verrez ce que ça donne visuellement, et vous aurez pourrez essayer de votre côté. Vous pouvez sélectionner les éléments suivants avec le + donc ça va sélectionner le bloc div suivant juste après l’élément identifié par #child, je vous ai mis un exemple de code source que vous n’aurez plus qu’à tester, normalement ça va ajouter une bordure sur module2.

Votre plan d’actions !

Vous avez vraiment de quoi faire dans ce cours sur les sélecteurs avec jQuery, donc l’avantage avec jQuery c’est que vous pouvez accéder très rapidement à un seul ou plusieurs éléments de votre page HTML, là vous avez dans ce cours énormément d’exemples à tester et de votre côté, testez-les, retrouvez un exemple de code source sous ce cours vidéo, si vous avez des questions posez-les directement sous ce cours vidéo et moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Choisissez les prochains cours jQuery

Dites-moi dans les commentaires ce dont vous avez besoin pour utiliser les fonctionnalités du Framework jQuery.