Heim  >  Artikel  >  Web-Frontend  >  Häufig verwendete Filtermethoden in JQuery

Häufig verwendete Filtermethoden in JQuery

无忌哥哥
无忌哥哥Original
2018-06-29 11:42:061514Durchsuche

Filtermethoden, also Funktionen, stimmen größtenteils mit den zuvor eingeführten Filterfunktionen überein

1: get() konvertiert JQuery-Objekte in DOM-Objekte: Setzt die Vordergrundfarbe des zweiten Textes Ist rot

$('li').get(1).style.color = 'red'

2.eq(): Ruft das Element mit der angegebenen Seriennummer ab. Beachten Sie, dass das zurückgegebene Objekt ein jQuery-Objekt ist.

$('li').eq(4).css('color','red')

3.first(): Gibt das erste Element zurück, keine Parameter erforderlich

$('li').first().css('color','red')

4.first(): Gibt das letzte Element zurück, es sind keine Parameter erforderlich

$('li').last().css('color','red')

5.toArray(), gibt ein DOM-Array zurück, beachten Sie, dass es sich nicht um ein JQuery-Objekt handelt

var li = $('li').toArray()
for(var i=0; i<li.length; i++){
li[i].style.color = &#39;green&#39;
}

6 .find(): Gibt alle untergeordneten Elemente zurück, einschließlich Kinder und Enkelkinder...

$(&#39;ul&#39;).find(&#39;li&#39;).css(&#39;color&#39;,&#39;coral&#39;)
$(&#39;ul&#39;).find(&#39;a&#39;).css(&#39;color&#39;,&#39;cyan&#39;)

7.children() gibt alle direkten untergeordneten Elemente zurück

$(&#39;ul&#39;).children().css(&#39;color&#39;,&#39;deeppink&#39;)
$(&#39;ul&#39;).children(&#39;p&#39;).css(&#39;color&#39;,&#39;deeppink&#39;)

8. Für jedes Element ausführen Rückruffunktion

$(&#39;li&#39;).each(function(){
$(this).css(&#39;background-color&#39;,&#39;wheat&#39;)
$(this).css(&#39;color&#39;,&#39;black&#39;)
$(this).css(&#39;font-size&#39;,&#39;1.3em&#39;)
})

9. Element-Traversal-Methode

//next() nächstes Geschwisterelement

$(&#39;li&#39;).eq(2).next().css(&#39;color&#39;,&#39;blue&#39;)

//alle Geschwisterelemente nach nextAll()

$(&#39;li&#39;).eq(2).nextAll().css(&#39;color&#39;,&#39;blue&#39;)

//siblings(): Gibt alle Geschwisterelemente des ausgewählten Elements zurück, außer sich selbst

$(&#39;li&#39;).eq(2).siblings().css(&#39;color&#39;,&#39;blue&#39;)

Vorwärts durchqueren

//prev(): Vorheriges Geschwisterelement

$(&#39;li&#39;).removeAttr(&#39;style&#39;)
$(&#39;li&#39;).eq(6).prev().css(&#39;color&#39;,&#39;coral&#39;)

//prevAll(): Sie müssen es erraten haben, ja, es sind alle vorherigen Geschwisterelemente

$(&#39;li&#39;).eq(6).prevAll().css(&#39;color&#39;,&#39;coral&#39;)


10, fügen Sie Elemente zum hinzu Ausgewählte Sammlung

//Entfernen Sie zuerst die benutzerdefinierten Stile für alle Elemente, setzen Sie die Elemente auf ihre Prototypen zurück und sehen Sie schlicht aus

$(&#39;*&#39;).removeAttr(&#39;style&#39;)

//Stellen Sie den gesamten Li-Text auf Rot ein, Sie werden das finden p ist nicht ausgewählt, was normal ist

$(&#39;li&#39;).css(&#39;color&#39;,&#39;red&#39;)

//Wie kann man also das p-Element auswählen? Man kann nur den Auswahlbereich vergrößern und das p-Element in diese Auswahl einfügen

//. Sie können dies mit der Methode add() tun

$(&#39;li&#39;).add(&#39;p&#39;).css(&#39;color&#39;,&#39;red&#39;)

11. filter() gibt die qualifizierten Elemente aus dem Ergebnis zurück

//Gibt nur das 6. Element zurück

$(&#39;li&#39;).filter(&#39;:eq(5)&#39;).css(&#39;background-color&#39;,&#39;lightgreen&#39;)

12. Die Funktion von not() ist genau das Gegenteil von filter(). Sie entfernt die Elemente, die die Bedingungen erfüllen

$(&#39;li&#39;).not(&#39;:eq(5)&#39;).css(&#39;background-color&#39;,&#39;lightgreen&#39;)

13, gibt die Elemente im angegebenen Bereich zurück

$(&#39;*&#39;).removeAttr(&#39;style&#39;)

//Einschließlich der Startposition, ohne die Endposition, beträgt die Anzahl der zurückgegebenen Ergebnisse 5-2=3

$(&#39;li&#39;).slice(2,5).css(&#39;background-color&#39;,&#39;lightgreen&#39;)

//Die ersten 4 Elemente abrufen

$(&#39;li&#39;).slice(0,4).css(&#39;background-color&#39;,&#39;lightgreen&#39;)

/ /Omitted Der zweite Parameter reicht standardmäßig vom aktuellen Anfang bis zum Ende

$(&#39;li&#39;).slice(4).css(&#39;background-color&#39;,&#39;lightgreen&#39;)

Das obige ist der detaillierte Inhalt vonHäufig verwendete Filtermethoden in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn