In Webanwendungen basieren die meisten clientseitigen Vorgänge auf Objektoperationen. Um ein Objekt zu betreiben, müssen Sie zunächst einen leistungsstarken Selektor bereitstellen, der es uns ermöglicht, das Objekt abzurufen. Der jQuery-Selektor ist in zwei Teile unterteilt: Auswahlobjekte und Filterbedingungen. Durch Auswählen eines Objekts wird angegeben, welches Objekt erhalten werden soll. Die Filterbedingung besteht darin, die erhaltenen Objekte zu filtern und schließlich Objekte zurückzulassen, die bestimmte Eigenschaften erfüllen.
1. Objekt auswählen
1). Beispiel: $("#id")
·element stimmt mit allen Elementen überein, die auf dem angegebenen Elementnamen basieren. Beispiel: $("p")
·.class gleicht Elemente basierend auf der angegebenen Klasse ab. Beispiel: $(".style1");
·* stimmt mit allen Elementen überein. Beispiel: $("*")
·selector1,selector2,selectorN kombiniert die von jedem Selektor übereinstimmenden Elemente und gibt sie zusammen zurück. Zum Beispiel: $("#id,p,.style1")
2).Form
·:button entspricht allen Schaltflächen. Beispiel: $(":button")
·:checkbox entspricht allen
Kontrollkästchen
. Beispiel: $(":checkbox")·:file stimmt mit allen Dateifeldern überein. Beispiel: $(":file")·:hidden stimmt mit allen unsichtbaren Elementen oder Elementen mit dem Typ „hidden“ überein. Beispiel: $("input:hidden")
·:image entspricht allen Bildfeldern. Beispiel: $(":image")
·:input entspricht allen Eingabe-, Textbereichs-, Auswahl- und Schaltflächenelementen. Beispiel: $(":input")
·:password entspricht allen
Passwortfeldern
. Beispiel: $(":password")·:radio entspricht allen Radio-Buttons
. Beispiel: $(":radio")·:reset entspricht allen Reset-Schaltflächen. Beispiel: $(":reset")·:submit entspricht allen Senden-Schaltflächen. Beispiel: $(":submit")
·:text entspricht allen einzeiligen Textfeldern. Beispiel: $(":text")
·:header stimmt mit Header-Elementen wie h1, h2, h3 überein. Zum Beispiel: $(":header").css("
background
", "#EEE");2. Filterbedingungen
1).
Attribut
Filter ·[Attribut*=Wert] Ordnet das angegebene Attribut Elementen zu, die bestimmte Werte enthalten. Beispiel: $("input[name*='man'")
·[attribute!=value] stimmt mit allen Elementen überein, die das angegebene Attribut enthalten, aber das Attribut ist nicht gleich dem spezifischen Wert. Beispiel: $(input[name!='man');
·[attribute$=value] sucht nach Elementen, bei denen das angegebene Attribut mit einem Wert endet. Beispiel: $("input[name$='man']")
·[attribute=value] stimmt mit Elementen überein, deren gegebenes Attribut einen bestimmten Wert hat. Beispiel: $("input[name='man']");
·[attribute] stimmt mit Elementen überein, die das angegebene Attribut enthalten. Beispiel: $("p[id]")
·[attribute^=value] sucht nach Elementen, bei denen das angegebene Attribut mit einem bestimmten Wert beginnt. Beispiel: $("input[name^='man']")
·[selector1][selector2][selectorN] erfüllt mehrere Bedingungen gleichzeitig. Beispiel: $("input[id][name$='man']")
·:hidden stimmt mit allen unsichtbaren Elementen überein. Beispiel: $("tr:hidden")
·:visible entspricht allen sichtbaren Elementen. Zum Beispiel: $("tr:visible")
·:checked stimmt mit allen ausgewählten ausgewählten Elementen überein (Kontrollkästchen, Optionsfelder usw., mit Ausnahme der Optionen in „select“). Beispiel: $("input:checked")
·:disabled stimmt mit allen deaktivierten Elementen überein. Beispiel: $("input:disabled")
·:enabled stimmt mit allen verfügbaren Elementen überein. Beispiel: $("input:enabled")
·:selected stimmt mit allen ausgewählten Optionselementen überein. Beispiel: $("select option:selected")
2). Inhaltsfilterung
·:contains(text) sucht nach Elementen, die den angegebenen Text enthalten. Beispiel: $("p:contains('John')")
·:empty stimmt mit allen leeren Elementen überein, die keine untergeordneten Elemente oder Text enthalten. Beispiel: $("td:empty")
·:has(selector) sucht nach Elementen, die das vom Selektor gefundene Element enthalten. Beispiel: $("p:has(p)");
·:parent sucht nach Elementen, die untergeordnete Elemente oder Text enthalten. Beispiel: $("td:parent")
3). Beispiel: $("form input")
·parent > stimmt mit allen untergeordneten Elementen unter dem angegebenen übergeordneten Element überein. Beispiel: $("form > input")
·prev + next stimmt mit allen nächsten Elementen überein, die unmittelbar auf das vorherige Element folgen. Beispiel: $("label + input")
·prev ~ siblings stimmt mit allen siblings-Elementen nach dem prev-Element überein. Beispiel: $("form ~ input")
·
:first-child
entspricht dem ersten untergeordneten Element. Beispiel: $("ul li:first-child")
·:last-child entspricht dem letzten untergeordneten Element. Zum Beispiel: $("ul li:last-child")
·:nth-child(index/even/odd/equation) entspricht dem N-ten untergeordneten oder ungerade-gerade-Element unter seinem übergeordneten Element. Zum Beispiel: $("ul li:nth-child(2)")·:only-child Wenn ein Element das einzige untergeordnete Element des übergeordneten Elements ist, wird es abgeglichen. Beispiel: $("ul li:only-child")
4). Methodenfilter
·:animated stimmt mit allen Elementen überein, die Animationseffekte ausführen. Beispiel: $("p:animated");
·:eq(index) stimmt mit einem Element mit einem bestimmten Indexwert überein. Beispiel: $("tr:eq(1)")
·:even entspricht allen Elementen mit geraden Indexwerten, beginnend bei 0. Beispiel: $("tr:even")
·:first entspricht dem ersten gefundenen Element. Beispiel: $("tr:first")
·:gt(index) stimmt mit allen Elementen überein, die größer als der angegebene Indexwert sind, beginnend bei 0. Beispiel: $("tr:gt(0)")
·:last entspricht dem zuletzt gefundenen Element. Beispiel: $("tr:last")
·:lt(index) stimmt mit allen Elementen überein, die kleiner als der angegebene Indexwert sind. Zum Beispiel: $("tr:lt(2)")
·:not(selector) Entfernt alle Elemente, die dem angegebenen Selektor entsprechen. Beispiel: $("input:not(:checked)")
·:odd entspricht allen Elementen mit ungeraden Indexwerten, beginnend bei 0. Zum Beispiel: $("tr:odd")
Zusammenfassung der Methoden zum Filtern in jQuery
1.add()
Wird verwendet, um Ergebnismengen von Elementen zu verknüpfen, die jeweils zwei Ausdrücken entsprechen.
[JavaScript] Klartext anzeigen
1. $("p").add("div"); Das heißt, finden Sie alle p und div und fügen Sie sie in passende Elemente ein.
[javascript] view plaincopy
1. $("p div");
erreicht die gleiche Funktion.
2.andself()
Für gefilterte oder gesuchte Elemente fügen Sie zuvor ausgewählte Elemente hinzu.
[javascript] Klartext anzeigen
1. $("div").find("span").andself().addClass("test"); 3.end()
Gehen Sie zurück zur letzten „zerstörerischen“ Operation, dh ändern Sie die Liste der übereinstimmenden Elemente in den vorherigen Übereinstimmungsstatus.
Die sogenannte „destruktive“ Operation bezieht sich auf den weiteren Abgleich der erhaltenen jQuery-Elemente, wie etwa „find“, „add“, „child“, „not“, „prev“ usw.
4.filter()
Wenn der Parameter ein oder mehrere Ausdrücke ist, wird er zum Filtern verwendet.
Wenn der Parameter eine Funktion ist, wird das als falsch zurückgegebene Element gelöscht, andernfalls bleibt es erhalten.
[javascript] Klartext anzeigen
1. $("p").filter(function(){
2. return $("ol",this). length==0;
3.
ruft die Elemente ab, die kein ol in
enthalten.
5.map()
Konvertieren Sie eine Reihe von Elementen in andere Arrays.
1. $("p").append($("input").map(function(){
2. return $(this).value();
3. }).get().join(","));
Kombinieren Sie die Werte aller
Eingabe-Tagszu einem
, der durch „ ,“ Stringund an das
-Element angehängt. 6.children()Rufen Sie einen Elementsatz ab, der alle untergeordneten Elemente jedes Elements im übereinstimmenden Elementsatz enthält, unabhängig von den untergeordneten Elementen des untergeordneten Elements.
7.closest() und parent()
🎜>
Abgleich des Elements beginnen Aktuelles Element beginnt mit dem Abgleich Übergeordnetes Element beginnt mit dem Abgleich
Matching des Endelementsbis zur Entdeckung des passenden Elements mit dem Wurzelelement Back Result 8.next (), nextAll() und nextUntil()
Der erste erhält einen Elementsatz, der die unmittelbar folgenden Geschwisterelemente jedes Elements im übereinstimmenden Elementsatz enthält. Zweitens: Holen Sie sich alle Geschwisterelemente hinter dem aktuell passenden Element. Die dritte Möglichkeit besteht darin, nach dem aktuellen Element nach allen Geschwisterelementen zu suchen, bis es auf den übergebenen Parameter stößt. 9.parent()Ruft einen Satz von Elementen ab, der das eindeutige übergeordnete Element aller übereinstimmenden Elemente enthält. 10.prev(), prevAll() und prevUntil()
Dasselbe wie next, nur das vorherige Element wird abgerufen.
11.siblings()
Erhalten Sie die Menge aller Geschwisterelemente des ausgewählten Elements, außer sich selbst.
Aber durch das Hinzufügen der andself()-Methode können Sie sich selbst und Ihre Kollegen erreichen.
Das obige ist der detaillierte Inhalt vonZusammenfassung der Nutzung der JQuery-Filterinstanz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
