Comprendre l'utilisation de différents types de sélecteurs dans jQuery

Selector est un concept très important dans jQuery, il peut nous aider à localiser et à exploiter avec précision les éléments de la page. Cet article présentera l'utilisation de différents types de sélecteurs dans jQuery, notamment les sélecteurs de base, les sélecteurs hiérarchiques, les sélecteurs de filtre et les sélecteurs d'attributs, et fournira des exemples de code spécifiques pour aider les lecteurs à mieux comprendre et maîtriser l'utilisation de ces sélecteurs.

1. Sélecteur de base

Le sélecteur de base est l'un des sélecteurs les plus couramment utilisés. Il peut sélectionner des éléments par nom d'élément, nom de classe ou ID. Voici un exemple de code pour quelques sélecteurs de base :

1. Sélectionnez tous les éléments <div> : <code><div>元素：<pre class='brush:javascript;toolbar:false;'>$('div')</pre><li> <p>选择类名为<code>example的元素：

   $('.example')

2. 选择ID为my-element的元素：

   $('#my-element')

二、层次选择器

层次选择器可以根据元素之间的关系来选择元素，包括子元素、后代元素、相邻元素和兄弟元素。以下是几个层次选择器的示例代码：

1. 选择父元素下的所有子元素：

   $('parent > child')

2. 选择祖先元素下的所有后代元素：

   $('ancestor descendant')

3. 选择相邻元素：

   $('element + next')

4. 选择所有兄弟元素：

   $('element ~ siblings')

三、过滤选择器

过滤选择器可以根据元素的状态或位置来选择元素，包括可见元素、隐藏元素、第一个元素、最后一个元素等。以下是几个常用的过滤选择器示例代码：

1. 选择所有可见元素：

   $(':visible')

2. 选择所有隐藏元素：

   $(':hidden')

3. 选择第一个元素：

   $('element:first')

4. 选择最后一个元素：

   $('element:last')

四、属性选择器

属性选择器可以根据元素的属性来选择元素，包括属性存在、属性值等于某个值、属性值以某个字符串开头等。以下是几个属性选择器的示例代码：

1. 选择具有title属性的元素：

   $('[title]')

2. 选择href属性值以https开头的元素：

   $('[href^="https"]')

3. 选择class属性值包含example

   $('[class*="example"]')

Sélectionnez les éléments avec le nom de classe exemple :

rrreee

🎜🎜Sélectionnez l'élément avec l'ID my-element : 🎜rrreee🎜🎜🎜 2. Sélecteur hiérarchique 🎜🎜Le sélecteur hiérarchique peut sélectionner des éléments en fonction de la relation entre les éléments, y compris les sous-éléments, les descendants éléments, éléments adjacents et éléments frères. Voici un exemple de code pour plusieurs sélecteurs hiérarchiques : 🎜🎜🎜🎜 Sélectionnez tous les éléments enfants sous l'élément parent : 🎜rrreee 🎜🎜🎜 Sélectionnez tous les éléments descendants sous l'élément ancêtre : 🎜rrreee🎜🎜🎜 Sélectionnez les éléments adjacents : 🎜rrreee 🎜🎜🎜 Sélectionnez tous les éléments frères : 🎜rrreee🎜🎜🎜 3. Sélecteur de filtre 🎜🎜Le sélecteur de filtre peut sélectionner des éléments en fonction de leur statut ou de leur position, y compris les éléments visibles, les éléments masqués, le premier élément, le dernier élément, etc. Voici plusieurs exemples de codes de sélection de filtre couramment utilisés : 🎜🎜🎜🎜 Sélectionnez tous les éléments visibles : 🎜rrreee🎜🎜🎜 Sélectionnez tous les éléments masqués : 🎜rrreee🎜🎜🎜 Sélectionnez le premier élément : 🎜rrreee🎜🎜🎜 Sélectionnez le dernier élément : 🎜rrreee🎜🎜🎜 4. Sélecteur d'attribut 🎜🎜Le sélecteur d'attribut peut sélectionner des éléments en fonction de leurs attributs, y compris l'existence d'un attribut, une valeur d'attribut égale à une certaine valeur, une valeur d'attribut commençant par une certaine chaîne, etc. Voici un exemple de code pour plusieurs sélecteurs d'attribut : 🎜🎜🎜🎜Sélectionnez les éléments avec l'attribut title : 🎜rrreee🎜🎜🎜Sélectionnez la valeur de l'attribut href avec les éléments https commençant par  : 🎜rrreee🎜🎜🎜 Sélectionnez les éléments dont la valeur d'attribut class contient exemple : 🎜rrreee🎜🎜🎜Grâce à l'exemple de code ci-dessus, les lecteurs peuvent mieux comprendre et maîtriser l'utilisation de différents types de sélecteurs dans jQuery. Les sélecteurs sont une partie très importante de jQuery. Maîtriser l'utilisation des sélecteurs peut nous aider à exploiter les éléments de la page plus efficacement et à obtenir divers effets et fonctions interactifs. J'espère que cet article sera utile aux lecteurs, merci d'avoir lu ! 🎜