Introduction au sélecteur jQuery et à l'analyse de classification

Introduction et analyse de classification du sélecteur jQuery

jQuery est une bibliothèque JavaScript extrêmement populaire et largement utilisée dans le développement Web. Parmi eux, les sélecteurs constituent une partie très importante de jQuery, qui permettent aux développeurs de sélectionner des éléments à partir de documents HTML et de les utiliser via une syntaxe concise. Cet article présentera brièvement les concepts de base des sélecteurs jQuery, analysera leur classification en détail et fournira des exemples de code spécifiques pour aider les lecteurs à mieux comprendre.

1. Introduction aux sélecteurs jQuery

Lors de l'utilisation de jQuery, les sélecteurs sont utilisés pour spécifier les éléments HTML qui doivent être exploités, et leur syntaxe est similaire aux sélecteurs CSS. Grâce aux sélecteurs, vous pouvez sélectionner un seul élément, un groupe d'éléments ou tous les éléments de la page entière pour les utiliser facilement, modifier les styles ou lier des événements.

2. Analyse de la classification des sélecteurs jQuery

1. Sélecteur de base

Le sélecteur de base est utilisé pour sélectionner un seul élément ou un groupe d'éléments dans un document HTML. Les sélecteurs de base couramment utilisés incluent :

• Sélecteur d'élément : Sélectionnez les éléments par leurs noms de balises, la syntaxe est $("element"). Par exemple, pour sélectionner tous les éléments <p></p> : $("p"). $("element")。例如，选择所有的<p></p>元素：$("p")。
• ID选择器：通过元素的id属性选择元素，语法为$("#id")。例如，选择id为"demo"的元素：$("#demo")。
• 类选择器：通过元素的class属性选择元素，语法为$(".class")。例如，选择class为"info"的元素：$(".info")。
• 属性选择器：通过元素的属性选择元素，语法为$("[attribute='value']")。例如，选择属性data-id值为"123"的元素：$("[data-id='123']")。

2. 层级选择器

层级选择器用于选择元素的层级关系，常用的层级选择器包括：

• 后代选择器：选择指定元素的后代元素，语法为$("parent descendant")。例如，选择
  内部所有的<p></p>元素：$("div p")。
• 子元素选择器：选择指定元素的子元素，语法为$("parent > child")。例如，选择<div>下直接的所有<code><span></span>元素：$("div > span")。
• 相邻兄弟选择器：选择指定元素的相邻兄弟元素，语法为$("prev + next")。例如，选择<p></p>元素后紧接着的一个<span></span>元素：$("p + span")
Sélecteur d'ID

 : Sélectionnez les éléments par leur attribut id, la syntaxe est $("#id"). Par exemple, pour sélectionner l'élément avec l'identifiant "demo" : $("#demo").

<p></p>Sélecteur de classe
 : Sélectionnez les éléments via leur attribut de classe, la syntaxe est $(".class"). Par exemple, sélectionnez un élément avec la classe "info" : $(".info").
• Sélecteur d'attribut
 : Sélectionnez les éléments via leurs attributs, la syntaxe est $("[attribute='value']"). Par exemple, pour sélectionner un élément dont l'attribut data-id a une valeur de "123" : $("[data-id='123']" ) .
• 2. Sélecteur hiérarchique
• Le sélecteur hiérarchique est utilisé pour sélectionner la relation hiérarchique des éléments. Les sélecteurs hiérarchiques couramment utilisés incluent :
• Sélecteur descendant : Sélectionnez les éléments descendants de l'élément spécifié, la syntaxe est $( "parent descendant"). Par exemple, pour sélectionner tous les éléments <p></p> à l'intérieur de
   : $("div p").
• Sélecteur d'élément enfant : Sélectionnez les éléments enfants de l'élément spécifié, la syntaxe est $("parent > child"). Par exemple, pour sélectionner tous les éléments <span></span> directement sous
   : $("div > span"). Sélecteur de frères et sœurs adjacents

   : Sélectionnez les éléments frères adjacents de l'élément spécifié, la syntaxe est $("prev + next"). Par exemple, pour sélectionner un élément <span></span> immédiatement après l'élément <p></p> : $("p + span").

  <p></p>3. Sélecteur de filtre <p></p>Le sélecteur de filtre est utilisé pour sélectionner les éléments qui répondent aux conditions spécifiées. Les sélecteurs de filtre couramment utilisés incluent :

  <p></p> :premier🎜 : sélectionnez le premier élément qui correspond au sélecteur. 🎜🎜🎜:last🎜 : Sélectionne le dernier élément correspondant au sélecteur. 🎜🎜🎜:even🎜 : Sélectionne les éléments correspondant aux positions paires du sélecteur. 🎜🎜🎜:odd🎜 : Sélectionne les éléments correspondant à la position impaire du sélecteur. 🎜🎜🎜:eq(index)🎜 : Sélectionne les éléments correspondant à la position d'index spécifiée dans le sélecteur. 🎜🎜🎜3. Exemples de code🎜🎜Ce qui suit utilise des exemples de code spécifiques pour démontrer l'utilisation de différents types de sélecteurs jQuery : 🎜

  <!DOCTYPE html>
  <html>
  <head>
    <title>jQuery选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div>
      <p>Hello, jQuery!</p>
    </div>
    <div id="example">
      <p class="info">This is a paragraph.</p>
      <p>This is another paragraph.</p>
    </div>
  
    <script>
      // 基础选择器示例
      $("p").css("color", "blue"); // 改变所有<p>元素的颜色为蓝色
      $("#example .info").html("Updated content"); // 修改id为example内class为info的元素的内容
  
      // 层级选择器示例
      $("div > p").css("font-weight", "bold"); // 选取div下的直接子元素p并设置字体加粗
  
      // 过滤选择器示例
      $("p:first").css("background-color", "yellow"); // 选取第一个<p>元素并设置背景色为黄色
    </script>
  </body>
  </html>

  Copier après la connexion

  🎜Grâce aux exemples de code ci-dessus, les lecteurs peuvent avoir une compréhension intuitive des différents types de sélecteurs jQuery, et Utilisez-les de manière flexible dans le développement réel pour exploiter les éléments HTML. 🎜🎜Conclusion🎜🎜En tant que partie importante de la bibliothèque jQuery, le sélecteur jQuery apporte commodité et efficacité au développement Web. Grâce à l'introduction et aux exemples de cet article, j'espère que les lecteurs pourront avoir une compréhension et une maîtrise plus approfondies des différents types de sélecteurs jQuery, afin de développer plus efficacement d'excellentes applications Web. 🎜