Zusammenfassung der Wissenspunkte zu Selector in jQuery

Zusammenfassung von JQuery Selector, Freunde in Not können sich darauf beziehen, es handelt sich um einige häufig verwendete Methoden zur Auswahlsteuerung.

//jQuery selector$
//$(expression,[context]) return jQuery
//Unit One
//Der CSS-Definierer von expression dient dazu, das in CSS auszuwählende Element auszudrücken Syntax

// $("*"); // Repräsentiert alle Element-Tags auf der Seite
// $("th, td") // Repräsentiert alle Element-Tags
// $("a") // Stellt alle -Element-Tags dar
// $("p#onlyp" // Stellt Elemente mit id=onlyidv in der CSS-Auswahl dar $( "#ID ") entspricht dem gesamten Dokument
// $("#rating"); // Repräsentiert das Element mit id=rating
// $("#orderedlist > li"); alle Elemente mit id=orderedlist Untergeordnete Elemente, jedoch ohne untergeordnete Elemente unter dem untergeordneten Element
// $("#orderedlist li:last" // Stellt das letzte Element von li in id=orderedlist dar
/ / $("#orderedlist li :first"); //Repräsentiert das erste Element von li in id=orderedlist
// $("#orderedlist li:nth- child(0)" //Repräsentiert das ( N) Element von li in id=orderedlist Das Element n ist der Array-Index
// $("button:only-child"); //Gibt an, dass es das einzige Element des übergeordneten Containers in der CSS-Auswahl ist
// $(".stuff:empty" ); // Stellt leere Elemente in der CSS-Auswahl dar
// $(".buttons:enabled" // Stellt normalerweise aktivierte Elemente in der CSS-Auswahl dar
/ / $(".buttons:disabled" ); // Stellt nicht aktivierte Elemente in der CSS-Auswahl dar
// $("input:checked" // Stellt ausgewählte Elemente in der CSS-Auswahl dar
// $( "button:not(.not)"); // Zeigt das Entfernen von Elementen in not() in der CSS-Auswahl an
// $("button.not" // Zeigt die Elemente mit class=not in CSS an Auswahl $(".CLSS" ) entspricht dem gesamten Dokument
// $("#orderedlist2 li" // Gibt alle untergeordneten Elemente von id=orderedlist an und schließt die untergeordneten Elemente aller untergeordneten Elemente ein
// //alert($("#orderedlist ~ li").length);
// $("#orderedlist,.buttons,li"); //Elemente, die dem CSS-Selektor entsprechen



//Ausdruck von Select basierend auf Elementattributen
// Alert($("button[@class]").length // Zeigt Elemente mit Klassenattributen an
// Alert($( "button[@class=not" ).length); // Zeigt ein Element mit einem Klassenattribut und einem Wert an, der nicht entspricht
// warning($('button[@class^=not').length) ; // Zeigt ein Element mit einem Klassenattribut und einem Wert an, der am Anfang übereinstimmt. Das Element von not
// warning($('button[@class$=not').length); mit Klassenattribut und dem Ende des Werts, der nicht
// entspricht ($('button [@class*=not').length); // Zeigt Elemente mit Klassenattributen und Werten an, die nicht //Ausdruck XPATH
Filter XPATH-Syntax zur Darstellung der Seitenelemente, die ausgewählt werden müssen //$("ol[@id^='orderedlist']").find("li: enthält('First')").each(function(i) {
//// $ (this).html( $(this).html() + " BAM! " + i );
// $(this).mouseover(function(){
// $(this).css ("color","red");
// }); ).mouseout(function(){
// $(this).css("color", "#000");
// }); /Finden Sie alle Elemente mit dem ol-Tag und dem Attribut id=orderedlist. Es gibt zwei Möglichkeiten, es zu schreiben
//ol [@id='orderedlist'] Um das übergeordnete Element zu finden, verwenden Sie jede Iteration direkt
// ol[@id='orderedlist']/* Für alle untergeordneten Elemente unter dem übergeordneten Element verwenden Sie find('child- element').each( )Iterate

//Einheit zwei
/// $( html, [ownerDocument]) return jQuery
//Diese Funktion ermöglicht die Übergabe von
HTML-Element
Text, Konstruktor. Es wird ein durch diesen HTML-Text erstelltes jQuery-Objekt generiert. Dieses Objekt existiert möglicherweise ursprünglich nicht. oder es kann auf der Originalseite vorhanden sein
//$('

hello

').appendTo("h2 "); //Generieren Sie einen Markup-Text und hängen Sie ihn an das h2-Tag an Seite
//Sie können auch das ursprüngliche Seitenelement herausnehmen und anhängen//$("input",this).appendTo("h2"); //Beachten Sie, dass die hier herausgenommenen Seitenelemente sind verschoben! statt kopiert
///$(elements) return jQuery
//Diese Funktion ermöglicht die direkte Übergabe im DOM
//$( document.forms[0].elements). appendTo("h2"); // Sie können auf das DOM-Dokument verweisen
//$(callback) return jQuery



//Das Folgende sind einige Anweisungen für den Selektor
/*
Grundlagen:

#id: Ruft das Objekt basierend auf seinem ID-Attribut ab.
element: Alle Objekte, die einem bestimmten
HTML-Tag

entsprechen.class: Das Objekt gemäß dem Klassenattribut des Objekts abrufen
*: Alle Objekte abrufen selector1, selector2, selectorN: Holen Sie sich eine Sammlung mehrerer Selektoren, ohne Duplikate zu entfernen
Ebenenselektor:
Nachkomme des Vorfahren: Dieser Selektor ist ein Leerzeichen, was bedeutet, dass alle Objekte des ersten Selektors zuerst gefunden werden und dann gesucht wird alle Objekte, die mit dem zweiten Selektor unter den Nachkommenknoten von übereinstimmen.
übergeordnetes Element > untergeordnetes Element: Dieser Selektor ist das Größer-als-Zeichen. Dies bedeutet, dass zuerst alle Objekte des ersten Selektors und dann alle Objekte gefunden werden, die mit dem zweiten Selektor in seinen untergeordneten Knoten (nicht in großen Knoten) übereinstimmen.
prev + next: Dieser Selektor ist das Pluszeichen. Dies bedeutet, dass zuerst alle Objekte des ersten Selektors und dann die Objekte gefunden werden, die dem nächsten Knoten derselben Ebene folgen und auch mit dem zweiten Selektor übereinstimmen.
prev ~ Geschwister: Dieser Selektor ist das ~-Zeichen. Dies bedeutet, dass zuerst alle Objekte mit dem ersten Selektor gefunden werden und dann in allen nachfolgenden Knoten auf derselben Ebene Objekte gefunden werden, die mit dem zweiten Selektor übereinstimmen.

Grundlegende Filterzeichen:
:first: Übereinstimmung mit dem ersten Objekt unter mehreren Objekten
:last: Übereinstimmung mit dem letzten Objekt unter mehreren Objekten
:not(selector): Übereinstimmung mit Elementen mit dem Inhalt im Selektor nach nicht entfernt
: gerade: Übereinstimmung mit der geraden Zahl unter allen Objekten
: ungerade: Übereinstimmung mit der ungeraden Zahl unter allen Objekten
: eq(index): Übereinstimmung mit einem bestimmten Ein einzelnes Element im Folgenden Tabelle
:gt(index): entspricht allen Elementen, die größer als ein bestimmter Index sind.
:lt(index): entspricht allen Elementen, die kleiner als ein bestimmter Index sind.
:header: entspricht allen Elementen im Header, z. B. h1 , h2, h3, h4, h5, h6
:animated: entspricht allen animierten Elementen

Textfilter:
:contains(text): entspricht dem Textelement, das den internen Inhalt enthält. Objekte, einschließlich indirekte nützliche Situationen
:empty: entspricht allen Objekten ohne untergeordnete Elemente
:has(selector): entspricht allen Objekten, die mindestens einen untergeordneten Selektor enthalten
:parent: entspricht allen übergeordneten Objekten, das übergeordnete Objekt enthält diese Objekte, die nur Text enthalten

Sichtbarkeitsfilter:
:hidden: entspricht allen ausgeblendeten Objekten oder dem ausgeblendeten Typ in der Eingabe
:visible: entspricht allen sichtbaren Objekten

Attributfilter :
[Attribut]: Entspricht allen Objekten mit einem bestimmten Attribut.
[Attribut=Wert]: Entspricht Objekten mit einem bestimmten Attribut und Wert.
[Attribut!=Wert]: Entspricht Objekten, die ein bestimmtes Attribut und einen bestimmten Wert haben sind kein bestimmter Wert
[attribute^=value]: Objekte abgleichen, die ein bestimmtes Attribut haben und mit einem bestimmten Wert beginnen
[attribute$=value]: Objekte abgleichen, die ein bestimmtes Attribut haben und mit einem bestimmten enden Wert
[Attribut*=Wert]: Objekte abgleichen, die ein bestimmtes Attribut haben und einen bestimmten Wert enthalten
[selector1] [selector2][selectorN]: Objekte abgleichen, die mit mehreren Attributselektoren gleichzeitig übereinstimmen

Unterfilter:
:nth- child(index/even/odd/equation): Übereinstimmung mit einem bestimmten Index /even/odd/ im untergeordneten Element. Für das Objekt der Gleichung kann nur :eq(index). Übereinstimmung mit den Unterelementmerkmalen eines einzelnen Objekts, während diese Methode mit den gemeinsamen Merkmalen eines bestimmten Unterelements mehrerer Objekte übereinstimmen kann
: erstes untergeordnetes Element: Übereinstimmung mit dem ersten untergeordneten Element
: last-child: Übereinstimmung mit dem letzten untergeordneten Element
Diese beiden Matcher können auch mit allen untergeordneten Elementen mehrerer übergeordneter Objekte übereinstimmen
: only-child: if Wenn ein übergeordnetes Element nur ein untergeordnetes Element hat, stimmt es mit diesem untergeordneten Element überein element

form filter
Name Type

:input Returns: Array Array
Entspricht Elementen, deren Eingabetyp Text in der Form ist

: Passwort Rückgabe: Array
:radio Gibt zurück: Array
Übereinstimmt Elemente im Formular, deren Eingabetyp radio ist

: checkbox Gibt zurück: Array ;
Übereinstimmen Sie Elemente im Formular, deren Eingabetyp Kontrollkästchen ist

:submit Gibt zurück: Array 🎜>:image Gibt zurück: Array Das Element, das dem Bild im Formular entspricht

:reset Gibt zurück: Array Eingabetyp wird im Formular zurückgesetzt

:button Gibt zurück: Array Elemente, deren Eingabetyp button im Formular ist

:file Gibt zurück: Array< Element(s)>
entspricht Elementen, deren Eingabetyp im Formular

:hidden ist. Gibt zurück: Array Formularelement oder ausgeblendeter Bereich



:enabled Gibt zurück: Array
entspricht allen aktivierten Elementen

:disabled Gibt zurück: Array
trifft alle nicht aktivierten Elemente zu

:checked Gibt zurück: Array
trifft alle geprüften Elemente zu

:selected Gibt zurück: Array< Element(e)>
entspricht allen
Dropdown-Liste
ausgewählten Elementen

*/

Das obige ist der detaillierte Inhalt vonZusammenfassung der Wissenspunkte zu Selector in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!