Zusammenfassung der Verwendung des jQuery Selector-Selektors

Eine Zusammenfassung der Verwendung von jQuery Selector. Freunde, die es benötigen, können darauf verweisen. Dies sind einige häufig verwendete Methoden zur Auswahlsteuerung.

//jQuery selector$
//$(expression,[context]) return jQuery
//Unit One
//Der CSS-Definierer von expression dient dazu, den gewünschten Inhalt auszudrücken CSS-Syntax Das ausgewählte Element

// $("*"); // 表示页面所有元素标签 
// $("th, td") // 表示所有<th><td>元素标签 
// $("a") // 表示所有<a>元素标签 
// $("p#onlyp"); // 表示CSS选择中id=onlyidv的元素 $("#ID")为全文档匹配 
// $("#rating"); // 表示id=rating的元素 
// $("#orderedlist > li"); // 表示id=orderedlist 所有子元素,但不包括子元素下的子元素 
// $("#orderedlist li:last"); // 表示id=orderedlist 中li最后一个元素 
// $("#orderedlist li:first"); // 表示id=orderedlist 中li第一个元素 
// $("#orderedlist li:nth- child(0)"); //表示id=orderedlist 中li第(N)个元素 n为数组下标 
// $("button:only-child"); //表示 css选择中的它为父容器唯一的元素 
// $(".stuff:empty"); // 表示css选择中的空元素 
// $(".buttons:enabled"); // 表示css选择中的正常启用的元素 
// $(".buttons:disabled"); // 表示css选择中的非启用元素 
// $("input:checked"); // 表示css选择中的选中的元素 
// $("button:not(.not)"); // 表示css选择中的去除not()中的元素 
// $("button.not"); // 表示css选择中的class=not的元素 $(".CLSS")为全文档匹配 
// $("#orderedlist2 li"); // 表示id=orderedlist 所有子元素且包括所有子元素的子元素 
// //alert($("#orderedlist ~ li").length); 
// $("#orderedlist,.buttons,li"); //匹配 css选择符的元素

//Wählen Sie den Ausdruck basierend auf den Elementattributen aus

// alert($("button[@class]").length); // 表示有class属性的元素 
// alert($("button[@class=not").length); // 表示有class属性且值等于not的元素 
// alert($('button[@class^=not').length); // 表示有class属性且值开头匹配not的元素 
// alert($('button[@class$=not').length); // 表示有class属性且值结尾匹配not的元素 
// alert($('button[@class*=not').length); // 表示有class属性且值中匹配not的元素 
//expression 之 XPATH 
过滤器
 XPATH语法来表示需要选择的页面元素 
//$("ol[@id^='orderedlist']").find("li:contains('First')").each(function(i) { 
//// $(this).html( $(this).html() + " BAM! " + i ); 
// $(this).mouseover(function(){ 
// $(this).css("color","red"); 
// }); 
// $(this).mouseout(function(){ 
// $(this).css("color","#000"); 
// }); 
// });

//Finden Sie das ol tag und Attribut id= Alle Elemente der geordneten Liste, es gibt zwei Schreibweisen

//ol[@id='orderedlist'] 定位父元素 直接用each 迭代 
//ol[@id='orderedlist']/* 所有父元素下的子元素 使用find('child- element').each()迭代

//Einheit zwei
///$( html, [BesitzerDokument]) return jQuery
// Mit dieser Funktion kann der Text des HTML-Elements übergeben werden, und der Konstruktor generiert ein durch diesen HTML-Text erstelltes jQuery-Objekt. Dieses Objekt existiert möglicherweise ursprünglich nicht es kann auf der Originalseite vorhanden sein
//$('e388a4556c0f65e1904146cc1a846beehello94b3e26ee717c64999d7867364b1b4a3').appendTo("h2"); //Generieren Sie einen Markup-Text und hängen Sie ihn an das h2-Tag der Seite an
//Sie können auch die ursprünglichen Seitenelemente herausnehmen und anhängen

//$("input",this).appendTo("h2"); //注意,这里取出的页面元素,是移动!而不是复制 
///$(elements) return jQuery 
//这个函数允许直接传入DOM 
//$(document.forms[0].elements).appendTo("h2"); // 可以参考DOM文档 
//$(callback) return jQuery

Im Folgenden finden Sie einige Anweisungen für den Selektor

Grundlagen:
#id: Rufen Sie 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

Hierarchischer Selektor:
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 (keine Enkelkinder) übereinstimmen.
Vorheriger + Nächster: Dieser Selektor ist das Pluszeichen. Dies bedeutet, dass zuerst alle Objekte des ersten Selektors und dann die Objekte gesucht 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: Array9b16383a6b05c463860f147704984eb4 Array9b16383a6b05c463860f147704984eb4
Entspricht Elementen, deren Eingabetyp Text in der Form ist

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

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

:submit Gibt zurück: Array9b16383a6b05c463860f147704984eb4 🎜>:image Gibt zurück: Array9b16383a6b05c463860f147704984eb4 Eingabetyp wird im Formular zurückgesetzt

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

:file Gibt zurück: Array2b59df70011ba23c8320e7ef379926be
entspricht Elementen, deren Eingabetyp im Formular

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

:enabled Gibt zurück: Array9b16383a6b05c463860f147704984eb4 stimmt mit allen aktivierten Elementen überein

:disabled Gibt zurück: Array9b16383a6b05c463860f147704984eb4 > Entspricht allen nicht aktivierten Elementen

:checked Gibt zurück: Array9b16383a6b05c463860f147704984eb4
Entspricht allen ausgewählten Elementen

:selected Gibt zurück: Array9b16383a6b05c463860f147704984eb4
Entspricht allen in der Dropdown-Liste ausgewählten Elementen

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung des jQuery Selector-Selektors. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!