Was sind die Filterselektoren von jquery? Was sind die am häufigsten verwendeten Filterselektoren?

Was macht der Filterselektor von jquery? Was sind die am häufigsten verwendeten Filterselektoren? Dieser Artikel stellt Ihnen die Filterselektoren von jquery vor und informiert Sie über die am häufigsten verwendeten Filterselektoren von jquery. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Erstens lernen wir den jquery Filter Selector Selector kennen:

jquery Selector kann auf Gruppen von HTML-Elementen oder einzelnen Elementen angewendet werden. Der Filterselektor ist jedoch der am weitesten verbreitete Typ von JQuery-Selektor. Er kann Elemente gemäß einer bestimmten Art von Filterregeln finden und (ein oder mehrere) Elemente finden. Wenn er geschrieben wird, beginnt er mit:.

jquery-Filterselektoren können in die folgenden Kategorien unterteilt werden:

1. jquery-Basisfilterselektor (wichtige Punkte)

2. JQuery-Inhaltsfilterauswahl

3. JQuery-Sichtbarkeitsfilterauswahl

4. JQuery-Attributfilterauswahl

5. jquery-Statusfilterselektor

6. jquery-Unterelementfilterselektor
   

Im Folgenden werden wir in der obigen Klassifizierung verwenden Sprechen Sie über die gängigen JQuery-Filterselektoren und wie Sie diese JQuery-Filterselektoren verwenden.

jquery Basic Filter Selector (Schlüsselpunkt)

①first() oder: wählt zuerst das erste Element aus

//选择第一个div元素
$('div:first')  
$('div').first()

②last () oder: last wählt das letzte Element aus

//选择最后一个div元素
$('div:last')   
$('div').last()

③: not(selector) wählt andere Elemente außer dem angegebenen Selektor aus

 $('div:not(.one)')  //选择class不为one的 所有div元素

④: wählt sogar Elemente mit einer geraden Zahl aus, Index Beginnend bei 0

 $('div:even')   //选择 索引值为偶数 的div元素

⑤: odd wählt das Element mit einem ungeraden Index aus, beginnend bei 0

$('div:odd')  //选择 索引值为奇数 的div元素

⑥: eq(index) wählt das Element mit dem angegebenen Index aus, beginnend bei 0

$('div:eq(3)')  //选择 索引等于 3 的div元素

⑦: gt(index) wählt Elemente aus, die größer als der angegebene Index sind, beginnend bei 0

$('div:gt(3)')  //选择 索引大于 3 的div元素

⑧: lt(index) wählt Elemente aus, die kleiner als der angegebene Index sind, beginnend bei 0

$('div:lt(3)')  //选择 索引小于 3 的div元素

⑨: Kopfzeile wählt das Titeltypelement aus

$(':header')  //选择 所有的标题元素.比如h1, h2, h3等等...

⑩: animiert wählt das Element aus, das den Animationseffekt ausführt

$(':animated')   //选择 当前正在执行动画的所有元素

⑪: Fokus wählt das aktuell fokussierte Element aus

$(':focus')  //选择 当前选取焦点的所有元素

jquery Content Filter Selector

①: enthält(text) wählt Elemente aus, die den angegebenen Text enthalten

$("div:contains('Runob')")    // 选取包含 Runob文本的元素

②: leer wählt Elemente aus, die kein untergeordnetes Element enthalten Elemente oder Text Leeres Element

$("td:empty")       //选取不包含子元素或者文本的tb空元素

③: has(selector) wählt das Element aus, das das mit dem Selektor übereinstimmende Element enthält

$("div:has('.mini')")  //选取含有class为mini元素 的div元素

④: Parent wählt das leere Element aus, das untergeordnete Elemente oder Text enthält

$("div:parent")                //选取含有子元素或者文本的div元素

jquery Sichtbarkeitsfilterauswahl

①: versteckt wählt unsichtbare Elemente aus

$("li:hidden")       //选取所有不可见元素，或type为hidden的元素,例：<input type="hidden"/>

②: sichtbar wählt sichtbare Elemente aus

$("li:visible")      //选取所有可见 li 元素

jquery Attributfilterauswahl

①[ attribute] Wählen Sie Elemente mit diesem Attribut aus

$('div[title]')  //选取含有 属性title 的div元素

②[attribute=value] Wählen Sie Elemente mit dem Attributwert value

$('div[title=test]')  //选取 属性title值等于 test 的div元素

③[attribute!=value] Wählen Sie Attribute aus, deren Wert nicht gleich dem Element ist of value

$('div[title!=test]')  //选取 属性title值不等于 test 的div元素

④[attribute^=value] wählt das Element aus, dessen Attributwert mit value beginnt

 $('div[title^=te]')  //选取 属性title值 以 te 开始 的div元素

⑤[attribute$=value] wählt das Element aus, dessen Attributwert mit value endet

$("div[title$=est]")  //选取 属性title值 以 est 结束 的div元素

⑥[attribute*=value] Wählen Sie Elemente aus, deren Attributwert einen Wert enthält

$("div[title*=es]")  //选取 属性title值 含有 es  的div元素

⑦[attribute|=value] Wählen Sie Elemente aus, deren Attributwert gleich value ist oder denen ein Wert vorangestellt ist (d. h. „value -xxx") Element

$('div[title|="en"]')  //选取 属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素

⑧[attribute~=value] Wählt Elemente aus, deren Attributwerte durch Leerzeichen getrennt sind und enthält den angegebenen Wert.

$('div[title~="uk"]')//选取 属性title用空格分隔的值中包含字符uk的元素

⑨[attribute1][attribute2] …[attributeN] Kombinierte Attribute Selektor

$("div[id][title*=es]")  //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素

Jquery-Statusfilterselektor

①: aktiviert Verfügbare Elemente auswählen

$("input:enabled")    // 选取可用的 input

② : [Attribut = Wert] Nicht verfügbare Elemente auswählen

$("input:disabled")   // 选取不可用的 input

③: aktiviert Ausgewählte Elemente auswählen

$("input:checked")    // 选取选中的 input

④: ausgewählt Ausgewählte Elemente auswählen

$("option:selected")  // 选取选中的 option

jquery Child Elementfilterauswahl

①: first-child wählt das erste untergeordnete Element unter jedem übergeordneten Element aus und gibt das Sammlungselement zurück

//选取每个父元素下的第一个子元素
$('div.one :first-child')

②: last-child Wählen Sie das letzte untergeordnete Element aus Element unter jedem übergeordneten Element und geben Sie das Sammlungselement

//选取每个父元素下的最后一个子元素
$('div.one :last-child')

③: only-child zurück. Wählen Sie das einzige untergeordnete Element unter jedem übergeordneten Element aus und geben Sie das Sammlungselement

//如果父元素下的仅仅只有一个子元素，那么选中这个子元素
$('div.one :only-child')

④ zurück: nth-child(index ) wählt das index-te untergeordnete Element oder das ungerade-gerade-Element unter jedem übergeordneten Element aus. Der Index beginnt bei 1

//选取每个父元素下的第2个子元素
$('div.one :nth-child(2)')

Zusammenfassung: Das Obige ist eine vollständige Einführung in mehrere gängige JQuery-Filterselektoren Verwenden Sie diese Filterselektoren, um die gewünschten Effekte zu erzielen. Ich hoffe, dass es für das Lernen aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter jQuery-Video-Tutorial, JavaScript-Video-Tutorial, Bootstrap-Video-Tutorial!

Das obige ist der detaillierte Inhalt vonWas sind die Filterselektoren von jquery? Was sind die am häufigsten verwendeten Filterselektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!