Heim > Artikel > Web-Frontend > Häufig verwendete Filtermethoden in JQuery
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 = 'green' }
6 .find(): Gibt alle untergeordneten Elemente zurück, einschließlich Kinder und Enkelkinder...
$('ul').find('li').css('color','coral') $('ul').find('a').css('color','cyan')
7.children() gibt alle direkten untergeordneten Elemente zurück
$('ul').children().css('color','deeppink') $('ul').children('p').css('color','deeppink')
8. Für jedes Element ausführen Rückruffunktion
$('li').each(function(){ $(this).css('background-color','wheat') $(this).css('color','black') $(this).css('font-size','1.3em') })
9. Element-Traversal-Methode
//next() nächstes Geschwisterelement
$('li').eq(2).next().css('color','blue')
//alle Geschwisterelemente nach nextAll()
$('li').eq(2).nextAll().css('color','blue')
//siblings(): Gibt alle Geschwisterelemente des ausgewählten Elements zurück, außer sich selbst
$('li').eq(2).siblings().css('color','blue')
Vorwärts durchqueren
//prev(): Vorheriges Geschwisterelement
$('li').removeAttr('style') $('li').eq(6).prev().css('color','coral')
//prevAll(): Sie müssen es erraten haben, ja, es sind alle vorherigen Geschwisterelemente
$('li').eq(6).prevAll().css('color','coral')
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
$('*').removeAttr('style')
//Stellen Sie den gesamten Li-Text auf Rot ein, Sie werden das finden p ist nicht ausgewählt, was normal ist
$('li').css('color','red')
//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
$('li').add('p').css('color','red')
11. filter() gibt die qualifizierten Elemente aus dem Ergebnis zurück
//Gibt nur das 6. Element zurück
$('li').filter(':eq(5)').css('background-color','lightgreen')
12. Die Funktion von not() ist genau das Gegenteil von filter(). Sie entfernt die Elemente, die die Bedingungen erfüllen
$('li').not(':eq(5)').css('background-color','lightgreen')
13, gibt die Elemente im angegebenen Bereich zurück
$('*').removeAttr('style')
//Einschließlich der Startposition, ohne die Endposition, beträgt die Anzahl der zurückgegebenen Ergebnisse 5-2=3
$('li').slice(2,5).css('background-color','lightgreen')
//Die ersten 4 Elemente abrufen
$('li').slice(0,4).css('background-color','lightgreen')
/ /Omitted Der zweite Parameter reicht standardmäßig vom aktuellen Anfang bis zum Ende
$('li').slice(4).css('background-color','lightgreen')
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!