Verstehen Sie die Verwendung verschiedener Arten von Selektoren in jQuery

Selector ist ein sehr wichtiges Konzept in jQuery. Es kann uns helfen, Elemente auf der Seite genau zu lokalisieren und zu bedienen. In diesem Artikel wird die Verwendung verschiedener Arten von Selektoren in jQuery vorgestellt, darunter Basisselektoren, hierarchische Selektoren, Filterselektoren und Attributselektoren, und spezifische Codebeispiele bereitgestellt, um den Lesern zu helfen, die Verwendung dieser Selektoren besser zu verstehen und zu beherrschen.

1. Basisselektor

Der Basisselektor ist einer der am häufigsten verwendeten Selektoren. Er kann Elemente nach Elementname, Klassenname oder ID auswählen. Hier sind einige Beispielcodes für einige grundlegende Selektoren:

1. Alle <div>-Elemente auswählen: <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"]')

Elemente mit dem Klassennamen example auswählen:

rrreee

🎜🎜Wählen Sie das Element mit der ID my-element aus: 🎜rrreee🎜🎜🎜 2. Hierarchischer Selektor 🎜🎜Der hierarchische Selektor kann Elemente basierend auf der Beziehung zwischen Elementen auswählen, einschließlich Unterelementen. Nachkommenelemente, angrenzende Elemente und Geschwisterelemente. Hier ist ein Beispielcode für mehrere hierarchische Selektoren: 🎜🎜🎜🎜 Wählen Sie alle untergeordneten Elemente unter dem übergeordneten Element aus: 🎜rrreee🎜🎜🎜selektieren Sie alle Nachkommenselement Wählen Sie alle Geschwisterelemente aus: 🎜rrreee🎜🎜🎜 3. Filterselektor 🎜🎜Der Filterselektor kann Elemente basierend auf ihrem Status oder ihrer Position auswählen, einschließlich sichtbarer Elemente, ausgeblendeter Elemente, erstes Element, letztes Element usw. . Hier sind einige häufig verwendete Beispielcodes für die Filterauswahl: 🎜🎜🎜🎜 Alle sichtbaren Elemente auswählen: 🎜rrreee🎜🎜🎜 Alle ausgeblendeten Elemente auswählen: 🎜rrreee🎜🎜🎜 Das erste Element auswählen: 🎜rrreee🎜🎜🎜 Das letzte Element auswählen: 🎜rrreee🎜🎜🎜 4. Attributselektor 🎜🎜Der Attributselektor kann Elemente basierend auf ihren Attributen auswählen, einschließlich Attributexistenz, Attributwert gleich einem bestimmten Wert, Attributwert, der mit einer bestimmten Zeichenfolge beginnt usw. Hier ist Beispielcode für mehrere Attributselektoren: 🎜🎜🎜🎜Wählen Sie Elemente mit dem Attribut title aus: 🎜rrreee🎜🎜🎜Wählen Sie den Attributwert href mit https Elements aus Beginnend mit : 🎜rrreee🎜🎜🎜 Wählen Sie Elemente aus, deren class-Attributwert example enthält: 🎜rrreee🎜🎜🎜Durch den obigen Beispielcode können Leser es besser verstehen und beherrschen Sie die Verwendung verschiedener Arten von Selektoren in jQuery. Selektoren sind ein sehr wichtiger Bestandteil von jQuery. Die Beherrschung der Verwendung von Selektoren kann uns helfen, Elemente auf der Seite effizienter zu bedienen und verschiedene interaktive Effekte und Funktionen zu erzielen. Ich hoffe, dieser Artikel ist für die Leser hilfreich. Vielen Dank fürs Lesen! 🎜