Beherrschen Sie die verschiedenen Selektortypen und Verwendungsmöglichkeiten in jQuery

jQuery ist eine beliebte JavaScript-Bibliothek, die den Prozess der Bearbeitung von HTML-Elementen, Ereignisbehandlung, Animationseffekten und Ajax auf Webseiten vereinfacht. Bei der Entwicklung mit jQuery ist es wichtig, mit den verschiedenen Selektortypen und deren Verwendung vertraut zu sein. Selektoren sind in jQuery verwendete Methoden zur Auswahl bestimmter Elemente. Sie können die Elemente, die Sie bedienen möchten, entsprechend Ihren Anforderungen genau auswählen und so eine flexiblere Entwicklung erreichen.

1. Basisselektor

1. Elementselektor: Wählen Sie alle angegebenen Elemente aus, die Syntax ist $("element"). Beispielsweise wählt $("p") alle Absatzelemente aus. $("element")。例如，$("p")选取所有段落元素。

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

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

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

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

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

2. 层级选择器

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

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

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

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

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

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

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

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

   4. 内容选择器

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

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

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

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

   5. 状态选择器

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

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

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

🎜ID-Selektor🎜: Wählen Sie Elemente mit einer bestimmten ID aus. Die Syntax lautet $("#id"). Beispielsweise wählt $("#myId") das Element mit der ID „myId“ aus. 🎜rrreee🎜🎜🎜🎜Klassenselektor🎜: Elemente einer bestimmten Klasse auswählen, die Syntax ist $(".class"). Beispielsweise wählt $(".myClass") Elemente mit der Klasse „myClass“ aus. 🎜rrreee🎜🎜🎜2. Hierarchischer Selektor🎜🎜🎜🎜🎜Abkömmlingsselektor🎜: Wählen Sie die untergeordneten Elemente des angegebenen Elements aus. Die Syntax lautet $("übergeordneter Nachkomme"). Beispielsweise wählt $("div p") alle Absatzelemente innerhalb von div-Elementen aus. 🎜rrreee🎜🎜🎜🎜Wähler für untergeordnete Elemente🎜: Wählen Sie die direkten untergeordneten Elemente des angegebenen Elements aus. Die Syntax lautet $("parent > child"). Beispielsweise wählt $("ul > li") das direkte untergeordnete Element li unter dem ul-Element aus. 🎜rrreee🎜🎜🎜🎜Erstes Element🎜: Wählen Sie das erste passende Element aus. Die Syntax lautet :first. Beispielsweise wählt $("li:first") das erste li-Element aus. 🎜rrreee🎜🎜🎜🎜Letztes Element🎜: Wählen Sie das letzte passende Element aus. Die Syntax lautet :last. Beispielsweise wählt $("li:last") das letzte li-Element aus. 🎜rrreee🎜4. Inhaltsauswahl 🎜🎜🎜🎜🎜Elemente, die bestimmte Textinhalte enthalten🎜: Wählen Sie Elemente aus, die bestimmte Textinhalte enthalten. Die Syntax lautet :contains(text). Beispielsweise wählt $("p:contains('Hello')") das Absatzelement aus, das den Text „Hallo“ enthält. 🎜rrreee🎜🎜🎜🎜Leeres Element🎜: Wählen Sie ein leeres Element ohne untergeordnete Elemente aus. Die Syntax lautet :empty. Beispielsweise wählt $("div:empty") ein leeres div-Element aus. 🎜rrreee🎜5. Statusauswahl🎜🎜🎜🎜🎜Sichtbare Elemente🎜: Sichtbare Elemente auswählen, die Syntax ist :visible. Beispielsweise wählt $("div:visible") sichtbare div-Elemente aus. 🎜rrreee🎜🎜🎜🎜Verstecktes Element🎜: Wählen Sie das ausgeblendete Element aus. Die Syntax lautet :hidden. Beispielsweise wählt $("div:hidden") ausgeblendete div-Elemente aus. 🎜🎜🎜

Das obige ist der detaillierte Inhalt vonBeherrschen Sie die verschiedenen Selektortypen und Verwendungsmöglichkeiten in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!