JQuery-Selektoren und Filter organisierte_jquery

Nach einer Nacht des Suchens und Sortierens kam ich endlich auf den wohl umfassendsten Satz von JQuery-Filterauswahlmethoden. Der gesamte Code wird getestet.

Erster HTML-Code

Code kopieren Der Code lautet wie folgt:

HTML-Code

        
        
       


        
        
        


        
        
        

	​ ​
option1 option2 option3

Hallo Welt!

JS-Code

1.DOM-Objekt und JQuery-Verpackungssatz

1. Was Sie über document.getElementById(), document.getElementsByName() usw. erhalten, ist das DOM-Objekt oder der DOM-Objektsatz, und letzterer erhält den DOM-Objektsatz

Code kopieren Der Code lautet wie folgt:

var text11_dom=document.getElementById("text11");
var text11_dom=document.getElementsByName("text11")[0];
var text11_dom=document.all.text11;//Hier kann text11 entweder ein Namenswert oder ein ID-Wert sein
var text11_dom=document.all[10];

2. Wenn Sie die von JQuery bereitgestellten Funktionen verwenden möchten, müssen Sie zunächst einen JQuery-Verpackungssatz erstellen. Über $() wird der JQuery-Verpackungssatz zurückgegeben.

Code kopieren Der Code lautet wie folgt:

var text11_jquery=$("#text11");

2. Konvertieren Sie den JQuery-Verpackungssatz und das DOM-Objekt ineinander

1. DOM-Objekte können keine JQuery-Attributmethoden verwenden, aber DOM-Objekte können über $()
in JQuery-Wrapper-Sets konvertiert werden

Code kopieren Der Code lautet wie folgt:

var text11_dom=document.getElementById("text11");
var text11_jquery=$(text11_dom);

2. Der JQuery-Wrappersatz kann die Attributmethoden einiger DOM-Objekte wie .length verwenden, es gibt jedoch auch einige Attributmethoden, die nicht verwendet werden können, wie z. B. .value. Sie können das entsprechende DOM-Objekt durch Hinzufügen von eckigen Klammern und dem Index erhalten Wert nach dem JQuery-Wrapper-Set

Code kopieren Der Code lautet wie folgt:

var text11_dom=$("#text11")[0];

3. Dies ist auch ein DOM-Objekt während jeder Schleife oder wenn ein Ereignis ausgelöst wird

Code kopieren Der Code lautet wie folgt:

$("#text11").click(function(){
var text11_dom_value=this.value;
alarm(text11_dom_value);
});

3. Das $-Symbol stellt einen Verweis auf das JQuery-Objekt in JQuery dar. Es gibt vier Kernmethoden von JQuery

1.jQuery(html[,ownerDocument]): Erstellen Sie dynamisch Dom-Elemente basierend auf HTML-Originalzeichenfolgen

Code kopieren Der Code lautet wie folgt:

$("

Hallo!

").appendTo("body");

2.jQuery (Elemente): Kapseln Sie ein oder mehrere Dom-Objekte in jQuery-Verpackungssätze. Dies ist die Konvertierung zwischen den oben genannten DOM-Objekten und JQuery-Verpackungssätzen

3.jQuery( callback ): Abkürzung für $(document).ready()

Code kopieren Der Code lautet wie folgt:

$(function(){
alarm("Hallo!");
});

4.JQuery(selector[,context]): Suche nach JQuery-Verpackungssätzen, die die Bedingungen innerhalb des angegebenen Bereichs erfüllen. Kontext ist der Suchbereich, der ein DOM-Objektsatz oder ein JQuery-Verpackungssatz sein kann Suchen Sie in allen tr-Tags nach dem JQuery-Wrapper-Set
für das Element mit der ID text11

Code kopieren Der Code lautet wie folgt:

var text11_query=$("#text11","tr");

===================jQuery-Selektor===================

1. Grundlagenauswahl Grundlagen

1. Wählen Sie basierend auf dem Tag-Namen aus

Code kopieren Der Code lautet wie folgt:

var input_query=$("input");

2. Wählen Sie
basierend auf dem ID-Wert aus

Code kopieren Der Code lautet wie folgt:

var text11_query=$("#text11");


3. Wählen Sie basierend auf dem Klassenwert aus

Code kopieren Der Code lautet wie folgt:

var text11_query=$(".text11");

4. Wählen Sie mehrere JQuery-Paketsätze aus, die die Bedingungen gleichzeitig erfüllen. Verwenden Sie , um die Bedingungen zu trennen

Code kopieren Der Code lautet wie folgt:

var text_query=$("#text11,.text12");

5. Wählen Sie alle DOM-Elemente
aus

Code kopieren Der Code lautet wie folgt:

var all_query=$("*");

2. Hierarchie

1. Holen Sie sich alle Elemente mit dem ID-Wert text11 darunter aus allen tr-Tags

Code kopieren Der Code lautet wie folgt:

var text11_query=$("tr #text11");

2. Holen Sie sich alle Direkteingabe-Unterelemente
unter allen td-Tags

Code kopieren Der Code lautet wie folgt:

var input_query=$("td>input");

3. Rufen Sie das Klassenelement button11 hinter dem Element mit der ID text11 ab und holen Sie sich nur ein Element, das die Bedingungen erfüllt. text11 und button11 liegen auf der gleichen Ebene

Code kopieren Der Code lautet wie folgt:

var button11_query=$("#text11 .button11");

4. Holen Sie sich alle Elemente mit der Klasse button11 hinter dem Element mit der ID text11

Code kopieren Der Code lautet wie folgt:

var button11_query=$("#text11~.button11");

3. Grundlegende Filter

1. Holen Sie sich das erste Eingabeelement

Code kopieren Der Code lautet wie folgt:

var input_query=$("input:first");

2. Holen Sie sich das letzte Eingabeelement

Code kopieren Der Code lautet wie folgt:

var input_query=$("input:last");

3. Holen Sie sich alle nicht ausgewählten Eingabeelemente

Code kopieren Der Code lautet wie folgt:

var input_query=$("input:not(:checked)");

4. Zählen Sie das erste Eingabeelement als eins und finden Sie alle ungeradzahligen Eingabeelemente

Code kopieren Der Code lautet wie folgt:

var input_query=$("input:even");

5. Suchen Sie ausgehend von der zweiten Eingabe alle geradzahligen Eingabeelemente

Code kopieren Der Code lautet wie folgt:

var input_query=$("input:odd");

6. Suchen Sie das Eingabeelement mit Index 1 und der Indexwert beginnt bei 0

Code kopieren Der Code lautet wie folgt:

var input_query=$("input:eq(1)");

7. Finden Sie alle Eingabeelemente mit einem Index größer als 0

Code kopieren Der Code lautet wie folgt:

var input_query=$("input:gt(0)");

8. Finden Sie alle Eingabeelemente mit einem Index kleiner als 2

Code kopieren Der Code lautet wie folgt:

var input_query=$("input:lt(2)");

9. Holen Sie sich alletitle-Elemente
auf die Seite

Code kopieren Der Code lautet wie folgt:

var h_query=$(":header");

10. Holen Sie sich alle Elemente, die Animationseffekte ausführen

Code kopieren Der Code lautet wie folgt:

var animierte_query=$(":animated");

4. Inhaltsfilter

1. Finden Sie alle h1-Elemente, die „Hello World!“ enthalten, in allen HTML-Inhalten

Code kopieren Der Code lautet wie folgt:

var h1_query=$("h1:contains('Hallo Welt!')");

2. Holen Sie sich alle td-Elemente
, die keine Unter-Tags enthalten oder leeren HTML-Inhalt haben

Code kopieren Der Code lautet wie folgt:

var td_query=$("td:empty");

3. Finden Sie alle td-Elemente, die Eingabe-Unterelemente
enthalten

Code kopieren Der Code lautet wie folgt:

var td_query=$("td:has(input)");

4. Finden Sie alle td-Elemente, die Unter-Tags enthalten oder HTML-Inhalt haben

Code kopieren Der Code lautet wie folgt:

var td_query=$("td:parent");

5. Sichtbarkeitsfilter Sichtbarkeitsfilter

1. Finden Sie alle versteckten Eingabeelemente

Code kopieren Der Code lautet wie folgt:

var input_query=$("input:hidden");

2. Finden Sie alle sichtbaren Eingabeelemente

Code kopieren Der Code lautet wie folgt:

var input_query=$("input:visible");

6. Attributfilter
1. Suchen Sie alle Eingabeelemente, die das ID-Attribut
enthalten

Code kopieren Der Code lautet wie folgt:

var input_query=$("input[id]");

2. Suchen Sie das Eingabeelement, dessen Namenswert text11 ist

Code kopieren Der Code lautet wie folgt:

var input_query=$("input[name='text11']");

3. Suchen Sie alle Eingabeelemente, deren Namenswert nicht text11
ist

Code kopieren Der Code lautet wie folgt:

var input_query=$("input[name!='text11']");

4. Suchen Sie das Eingabeelement, dessen Namenswert mit dem Text
beginnt

Code kopieren Der Code lautet wie folgt:

var input_query=$("input[name^='text']");

5. Suchen Sie alle Eingabeelemente, deren Namenswert mit 11
endet

Code kopieren Der Code lautet wie folgt:

var input_query=$("input[name$='11']");

6. Suchen Sie alle Eingabeelemente, deren Namenswert ext
enthält

Code kopieren Der Code lautet wie folgt:

var input_query=$("input[name*='ext']");

7. Suchen Sie alle Eingabeelemente, die das id-Attribut enthalten und deren Namenswert ext
enthält

Code kopieren Der Code lautet wie folgt:

var input_query=$("input[id][name*='ext']");

7. Kinderfilter

1. Finden Sie alle Eingabeelemente, die unter allen untergeordneten Elementen im übergeordneten Element an zweiter Stelle stehen
Der Parameter in nth-child() ist optional, gerade zählt hier als gerade Zahl und ungerade zählt hier als ungerade Zahl. Jede Zahl von n bedeutet, dass alle Eingabeelemente mit übergeordneten Elementen ausgewählt werden an erster Stelle. Eingabeelemente zählen als eins

Code kopieren Der Code lautet wie folgt:

var input_query=$("input:nth-child(2)");

2. Suchen Sie alle Eingabeelemente, die unter allen untergeordneten Elementen im übergeordneten Element
an erster Stelle stehen

Code kopieren Der Code lautet wie folgt:

var input_query=$("input:first-child");

3. Suchen Sie alle Eingabeelemente, die das letzte unter allen untergeordneten Elementen im übergeordneten Element
sind

Code kopieren Der Code lautet wie folgt:

var input_query=$("input:last-child");

4. Suchen Sie alle Eingabeelemente, die die einzigen untergeordneten Elemente im übergeordneten Element
sind

Code kopieren Der Code lautet wie folgt:

var input_query=$("input:only-child");

8. Formularauswahl Formulare

1. Alle Eingabeelemente finden

Code kopieren Der Code lautet wie folgt:

var input_query=$(":input");

2. Suchen Sie alle Textfeldelemente

Code kopieren Der Code lautet wie folgt:

var text_query=$(":text");

3. Finden Sie alle Elemente des Passwortfelds

Code kopieren Der Code lautet wie folgt:

var passwort_query=$(":password");

4. Finden Sie alle Kontrollkästchen

Code kopieren Der Code lautet wie folgt:

var checkbox_query=$(":checkbox");

5. Finden Sie alle Elemente der Schaltfläche „Senden“

Code kopieren Der Code lautet wie folgt:

var subscribe_query=$(":submit");

6. Finden Sie alle Bilddomänenelemente

Code kopieren Der Code lautet wie folgt:

var image_query=$(":image");

7. Retrouvez tous les éléments du bouton de réinitialisation

Copier le code Le code est le suivant :

var reset_query=$(":reset");

8. Trouvez tous les éléments du bouton

Copier le code Le code est le suivant :

var bouton_query=$(":bouton");

9. Recherchez tous les éléments du champ du fichier

Copier le code Le code est le suivant :

var file_query=$(":file");

9. Filtres de formulaire

1. Rechercher tous les éléments d'entrée disponibles

Copier le code Le code est le suivant :

var input_query=$("input:enabled");

2. Recherchez tous les éléments d'entrée indisponibles

Copier le code Le code est le suivant :

var input_query=$("input:disabled");

3. Recherchez toutes les cases radio sélectionnées

Copier le code Le code est le suivant :

var input_query=$("input:checked");

4. Recherchez toutes les listes déroulantes sélectionnées

Copier le code Le code est le suivant :

var option_query=$("option:selected");