Sélectionner un élément avec jQuery

Bonjour,

jQuery utilise la syntaxe XPath pour sélectionner les éléments du DOM.

Donc, si vous utilisez CSS ou si vous avez déjà utilisé XPath pour sélectionner des nœuds dans XML, vous savez déjà comment sélectionner des éléments avec jQuery !

Utilisons-les avec jQuery 🚀

Sélecteur de classe

L’élément appartenant à la classe souhaitée est sélectionné à l’aide de l’opérateur point (.).

Dans l’exemple ci-dessous, tous les éléments possédant la classe title seront sélectionnés et leur couleur sera modifiée. 

<p class="title">Hello</p>
<p class="title">CoddyKit</p>
<p class="title">Learning</p>
<p class="title">jQuery</p>

<script>
$('.title').css('color','pink')
</script>

Nous présenterons la méthode css() dans les leçons suivantes. 

Pour l’instant, retenez simplement que la méthode css() sert à définir le style de l’élément

Sélecteur d’identifiant

L’élément possédant l’identifiant souhaité peut être sélectionné à l’aide de l’opérateur # (dièse). Comme nous le savons, une même valeur d’identifiant ne peut être attribuée qu’à un seul élément dans la page HTML.

Dans l’exemple ci-dessous, l’élément possédant l’identifiant title sera sélectionné et sa couleur sera modifiée.

<p id="title">Hello</p>
<p id="title1">CoddyKit</p>
<p id="title2">Learning</p>
<p id="title3">jQuery</p>

<script>
$('#title').css('color','pink')
</script>

Sélecteur de balise

L’élément possédant la balise souhaitée peut être sélectionné en utilisant simplement le nom de la balise

Dans l’exemple ci-dessous, l’élément possédant la balise span sera sélectionné et sa couleur sera modifiée.

<p>Hello</p>
<span>Hello</span>
<span>CoddyKit</span>

<script>
$('span').css('color','pink')
</script>

Sélecteur d’enfant

Si nous voulons sélectionner les enfants d’un élément, nous utilisons l’opérateur supérieur à (>).

Dans l’exemple ci-dessous, tous les enfants de l’élément souhaité seront sélectionnés.

<p>
  <span>Hello</span>
  <span>CoddyKit</span>
</p>

<script>
$('p>span').css('color','pink')
</script>

Sélecteur d’attribut

Nous pouvons sélectionner l’élément souhaité en vérifiant si l’attribut d’un élément possède une valeur.

Dans l’exemple ci-dessous, les éléments possédant la balise <a> et l’attribut target avec la valeur _blank sont sélectionnés.

<a target="_blank" 
     href="http://coddykit.com">
   CoddyKit
 </a>

<script>
$ ('a[target = "_blank"]').css('color','pink')
</script>

jQuery facilite la sélection dans le DOM en fournissant certaines méthodes ainsi que des sélecteurs XPath.

Découvrons-les.

Méthode parent()

Nous pouvons sélectionner le parent de l’élément souhaité à l’aide de la méthode parent() fournie par jQuery.

Dans l’exemple ci-dessous, le parent de l’élément est sélectionné et la couleur du texte de l’élément parent est modifiée.

<div>
Parent Element Text
<a target="_blank"  href="http://coddykit.com">
   CoddyKit
 </a>
</div>

<script>
$ ('a').parent().css('color','pink')
</script>

Méthode children()

Nous pouvons sélectionner tous les enfants de l’élément souhaité à l’aide de la méthode children() fournie par jQuery.

Dans l’exemple ci-dessous, tous les enfants de l’élément sont sélectionnés et la couleur de leur texte est modifiée.

<div>
<a target="_blank"  href="http://coddykit.com">
   CoddyKit
 </a>
<span>Children Element Text</span>
</div>

<script>
$ ('div').children().css('color','pink')
</script>

Méthode parents()

Nous pouvons sélectionner l’ancêtre de l’élément souhaité à l’aide de la méthode parents() fournie par jQuery.

Dans l’exemple ci-dessous, l’ancêtre de l’élément est sélectionné et la couleur du texte de l’élément parent est modifiée.

La différence entre cette méthode et les autres méthodes que nous avons étudiées est qu’elle peut recevoir un paramètre.

Nous transmettons donc un sélecteur XPath en tant que paramètre afin de définir quel ancêtre doit être sélectionné.

<div class="wrapper">
Hello
<p>
<span>CoddyKit</span>
<p>
</div>

<script>
$ ('span').parents('.wrapper').css('color','pink')
</script>

Méthode next()

La méthode next() sélectionne le frère suivant de l’élément souhaité.

Dans l’exemple ci-dessous, le premier frère suivant de l’élément possédant la balise a est sélectionné.

<a href="http://coddykit.com">CoddyKit</a>
<span>I am first sibling of a element</span>

<script>
$ ('a').next().css('color','pink')
</script>

Méthode nextAll()

La méthode nextAll() sert à sélectionner les frères suivants de l’élément souhaité.

Dans l’exemple ci-dessous, tous les frères situés après l’élément possédant la balise div sont sélectionnés.

<span>I'm previous sibling<span>
<div></div>
<span>I'm next sibling<span>
<span>I'm next sibling too<span>


<script>
$ ('div').nextAll().css('color','pink')
</script>

Méthode siblings()

Vous pouvez sélectionner tous les frères de l’élément souhaité à l’aide de la méthode siblings().

Dans l’exemple ci-dessous, tous les frères des éléments possédant la balise p sont sélectionnés.

<p>Hello</p>
<div>jQuery</div>
<div>Methods</div>

<script>
$ ('p'). siblings().css('color','pink')
</script>

Méthode prev()

La méthode prev() sert à sélectionner le frère précédent d’un élément.

Sélectionne le premier frère précédent de l’élément possédant la balise a.

<span>Hello Coddy</span>
<div class="test"></div>

<script>
$ ('.test').prev().css('color','pink')
</script>

Méthode prevAll()

La méthode prevAll() sert à sélectionner les frères précédents de l’élément souhaité.

Dans l’exemple ci-dessous, tous les frères situés avant l’élément possédant la balise div sont sélectionnés.

<span>I'm previous sibling</span>
<span>I'm previous sibling too</span>
<div></div>
<span>I'm next sibling</span>

<script>
$('div').prevAll().css('color','pink')
</script>

Félicitations 🎉

Cette section nous a appris à sélectionner les éléments du DOM.

Dans la prochaine section, nous continuerons à apprendre les manipulations du DOM.