Comment utiliser le sélecteur de base jquery

jQuery est une bibliothèque JavaScript populaire principalement utilisée pour simplifier la manipulation du DOM et la gestion des événements. Lorsque vous utilisez jQuery, les sélecteurs peuvent nous aider à localiser facilement les éléments et les composants. Cet article explique comment utiliser les sélecteurs de base jQuery.

1. Syntaxe de base

Les sélecteurs sont créés via la fonction jQuery $() ou jQuery(). Habituellement, un sélecteur est une chaîne qui décrit l'élément ou le composant que nous souhaitons sélectionner. Par exemple, pour sélectionner tous les éléments de paragraphe, vous pouvez utiliser la syntaxe suivante :

$("p")

Plusieurs sélecteurs peuvent également être séparés par des virgules au sein de la même fonction $(). Par exemple, pour sélectionner tous les éléments de paragraphe et de lien hypertexte, vous pouvez utiliser la syntaxe suivante :

$("p,a")

2. Sélecteurs de base

jQuery fournit quelques sélecteurs de base. Voici quelques sélecteurs de base couramment utilisés.

1. Sélecteur d'élément

Le sélecteur d'élément sélectionne un type spécifique d'élément. Par exemple, pour sélectionner tous les éléments de paragraphe, vous pouvez utiliser la syntaxe suivante :

$("p")

2. Sélecteur d'ID

Le sélecteur d'ID sélectionne les éléments en fonction de leur attribut ID. Par exemple, pour sélectionner un élément avec l'ID "myDiv", vous pouvez utiliser la syntaxe suivante :

$("#myDiv")

3. Sélecteur de classe

Un sélecteur de classe peut sélectionner des éléments avec une classe spécifique. Par exemple, pour sélectionner un élément avec le nom de classe "myClass", vous pouvez utiliser la syntaxe suivante :

$(".myClass")

4. Sélecteur d'attribut

Le sélecteur d'attribut peut sélectionner des éléments avec des valeurs d'attribut spécifiques. Par exemple, pour sélectionner tous les éléments de lien hypertexte avec des attributs href, vous pouvez utiliser la syntaxe suivante :

$("a[href]")

3. Sélecteurs combinés

Les sélecteurs de base ci-dessus peuvent être utilisés en combinaison pour implémenter des sélecteurs plus complexes. Voici quelques sélecteurs de combinaison couramment utilisés.

1. Sélecteur descendant

Le sélecteur descendant peut sélectionner des éléments enfants dans un élément. Par exemple, pour sélectionner tous les éléments de paragraphe avec l'ID "myDiv", vous pouvez utiliser la syntaxe suivante :

$("#myDiv p")

2. Sélecteur d'élément enfant

Le sélecteur d'élément enfant ne peut sélectionner que des éléments enfants. Par exemple, pour sélectionner tous les éléments enfants li avec l'ID "myList", vous pouvez utiliser la syntaxe suivante :

$("#myList > li")

3. Sélecteur d'éléments frères et sœurs

Le sélecteur d'éléments frères et sœurs peut sélectionner des éléments adjacents à l'élément cible. Par exemple, pour sélectionner tous les éléments div avec l'ID "myDiv" adjacents à l'élément cible, vous pouvez utiliser la syntaxe suivante :

$("#myDiv + div")

4. Sélecteur de filtre

En plus des sélecteurs de base et des sélecteurs combinés, jQuery fournit également de nombreuses options de filtrage L'appareil peut être sélectionné en fonction des attributs, du contenu, de la position et d'autres conditions de l'élément.

Voici quelques sélecteurs de filtres couramment utilisés.

1. :premier sélecteur

:premier sélecteur peut sélectionner le premier élément qui correspond au sélecteur. Par exemple, pour sélectionner le premier élément li vous pouvez utiliser la syntaxe suivante :

$("li:first")

2. :dernier sélecteur

: Le dernier sélecteur sélectionne le dernier élément qui correspond au sélecteur. Par exemple, pour sélectionner le dernier élément li, vous pouvez utiliser la syntaxe suivante :

$("li:last")

3.  : sélecteurs pairs et : impairs

 : les sélecteurs pairs et : impairs peuvent sélectionner les éléments pairs et impairs correspondant au sélecteur. Par exemple, pour sélectionner tous les éléments li pairs dans une liste, vous pouvez utiliser la syntaxe suivante :

$("li:even")

4.  : contient un sélecteur

 : contient un sélecteur peut sélectionner des éléments en fonction de leur contenu textuel. Par exemple, pour sélectionner un élément li qui contient le texte "JavaScript", vous pouvez utiliser la syntaxe suivante :

$("li:contains('JavaScript')")

5. :not selector

 : Le not selector peut exclure des éléments avec le sélecteur spécifié. Par exemple, pour sélectionner tous les sous-éléments qui ne sont pas des éléments li sous l'ID "myList", vous pouvez utiliser la syntaxe suivante :

$("#myList *:not(li)")

5. Résumé

Dans jQuery, les sélecteurs sont des outils très puissants qui peuvent être positionnés et actionnés facilement et rapidement les éléments et composants de la page. Cet article explique quelques méthodes courantes de sélecteurs de base, de sélecteurs combinés et de sélecteurs de filtres, dans l'espoir de vous aider à mieux comprendre et utiliser jQuery.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!