Maîtriser les différents types et utilisations de sélecteurs dans jQuery

jQuery est une bibliothèque JavaScript populaire qui simplifie le processus de manipulation des éléments HTML, de gestion des événements, d'effets d'animation et d'Ajax sur les pages Web. Lors du développement avec jQuery, il est essentiel de se familiariser avec les différents types de sélecteurs et leurs utilisations. Les sélecteurs sont des méthodes utilisées dans jQuery pour sélectionner des éléments spécifiés. Vous pouvez sélectionner avec précision les éléments que vous souhaitez utiliser en fonction de vos besoins, obtenant ainsi un développement plus flexible.

1. Sélecteur de base

1. Sélecteur d'éléments : Sélectionnez tous les éléments spécifiés, la syntaxe est $("element"). Par exemple, $("p") sélectionne tous les éléments de paragraphe. $("element")。例如，$("p")选取所有段落元素。

   $("p").css("color", "red");

   Copier après la connexion

2. ID选择器：选择特定id的元素，语法为$("#id")。例如，$("#myId")选取id为"myId"的元素。

   $("#myId").hide();

   Copier après la connexion

3. 类选择器：选择指定类的元素，语法为$(".class")。例如，$(".myClass")选取类为"myClass"的元素。

   $(".myClass").fadeIn();

   Copier après la connexion

2. 层级选择器

1. 后代选择器：选择指定元素的后代元素，语法为$("parent descendant")。例如，$("div p")选取所有div元素内的段落元素。

   $("div p").addClass("highlight");

   Copier après la connexion

2. 子元素选择器：选择指定元素的直接子元素，语法为$("parent > child")。例如，$("ul > li")选取ul元素下的直接子元素li。

   $("ul > li").hover(function(){
    $(this).toggleClass("hover");
   });
   
   ### 3. 过滤选择器

   Copier après la connexion

3. 第一个元素：选择第一个匹配的元素，语法为:first。例如，$("li:first")选取第一个li元素。

   $("li:first").css("font-weight", "bold");

   Copier après la connexion

4. 最后一个元素：选择最后一个匹配的元素，语法为:last。例如，$("li:last")选取最后一个li元素。

   $("li:last").css("color", "blue");

   Copier après la connexion

   4. 内容选择器

5. 包含指定文本内容的元素：选择包含指定文本内容的元素，语法为:contains(text)。例如，$("p:contains('Hello')")选取包含文本"Hello"的段落元素。

   $("p:contains('Hello')").addClass("highlight");

   Copier après la connexion

6. 空元素：选择没有子元素的空元素，语法为:empty。例如，$("div:empty")选取空的div元素。

   $("div:empty").text("This div is empty");

   Copier après la connexion

   5. 状态选择器

7. 可见元素：选择可见的元素，语法为:visible。例如，$("div:visible")选取可见的div元素。

   $("div:visible").fadeOut();

   Copier après la connexion

8. 隐藏元素：选择被隐藏的元素，语法为:hidden。例如，$("div:hidden")rrreee

🎜Sélecteur d'ID🎜 : Sélectionnez des éléments avec un identifiant spécifique, la syntaxe est $("#id"). Par exemple, $("#myId") sélectionne l'élément avec l'identifiant "myId". 🎜rrreee🎜🎜🎜🎜Sélecteur de classe🎜 : Sélectionnez les éléments d'une classe spécifiée, la syntaxe est $(".class"). Par exemple, $(".myClass") sélectionne les éléments de classe "myClass". 🎜rrreee🎜🎜🎜2. Sélecteur hiérarchique🎜🎜🎜🎜🎜Sélecteur descendant🎜 : Sélectionnez les éléments descendants de l'élément spécifié, la syntaxe est $("parent descendant"). Par exemple, $("div p") sélectionne tous les éléments de paragraphe au sein des éléments div. 🎜rrreee🎜🎜🎜🎜Sélecteur d'élément enfant🎜 : Sélectionnez les éléments enfants directs de l'élément spécifié, la syntaxe est $("parent > child"). Par exemple, $("ul > li") sélectionne l'élément enfant direct li sous l'élément ul. 🎜rrreee🎜🎜🎜🎜Premier élément🎜 : Sélectionnez le premier élément correspondant, la syntaxe est :first. Par exemple, $("li:first") sélectionne le premier élément li. 🎜rrreee🎜🎜🎜🎜Dernier élément🎜 : Sélectionnez le dernier élément correspondant, la syntaxe est :last. Par exemple, $("li:last") sélectionne le dernier élément li. 🎜rrreee🎜4. Sélecteur de contenu 🎜🎜🎜🎜🎜Éléments contenant du contenu textuel spécifié🎜 : Sélectionnez les éléments qui contiennent du contenu textuel spécifié, la syntaxe est :contains(text). Par exemple, $("p:contains('Hello')") sélectionne l'élément de paragraphe qui contient le texte "Bonjour". 🎜rrreee🎜🎜🎜🎜Empty element🎜 : Sélectionnez un élément vide sans élément enfant, la syntaxe est :empty. Par exemple, $("div:empty") sélectionne un élément div vide. 🎜rrreee🎜5. Sélecteur de statut🎜🎜🎜🎜🎜Éléments visibles🎜 : Sélectionnez les éléments visibles, la syntaxe est :visible. Par exemple, $("div:visible") sélectionne les éléments div visibles. 🎜rrreee🎜🎜🎜🎜Élément caché🎜 : Sélectionnez l'élément caché, la syntaxe est :hidden. Par exemple, $("div:hidden") sélectionne les éléments div masqués. 🎜🎜🎜

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!