untergeordnetes Element“ Beispiel: $("div>p") wählt das p-Element im untergeordneten Element von div aus Der erste ist rückwärts"/> untergeordnetes Element“ Beispiel: $("div>p") wählt das p-Element im untergeordneten Element von div aus Der erste ist rückwärts">
Heim >Web-Frontend >js-Tutorial >Einführung in einige häufig verwendete Methoden in jQuery
1. Ebenenselektor
Nachkommenselektor „Übergeordnetes Element Nachkommendes Element“
Zum Beispiel: $("div p") wählt alle p-Elemente unter dem div-Element aus
Selektor für untergeordnete Elemente „Übergeordnetes Element> Untergeordnetes Element“
Zum Beispiel: $("div>p") wählt das p-Element im untergeordneten Element von div aus
Erstes rückwärtsgeordnetes Element Elemente „Elementname + Geschwisterelement“
Zum Beispiel: $("div+p") wählt das erste p-Element nach dem div-Element aus
alles rückwärts Bruderelement „Elementname ~ Brother-Element"
Zum Beispiel: $("div~p") wählt alle p-Elemente nach dem div-Element aus
2. Filterselektor
:first $(" p:first") "p: gt(1)"); Alle
-Elemente
mit Zahlen größer als 1 :eq $("p:eq(1)"); Alle
🎜> mit Zahlen gleich 1 :odd $( "td:odd"); Alle
-Elemente auswählen
, die nicht den Klassennamen notr haben
Nach Inhalt filtern
:contains(content)
:empty()
Filter basierend auf Anzeige
:visible
3. Formularauswahl
:text
:button
:file
:radio
:submit
4. Attribut - Filterselektor
[Attributname] Wählen Sie das Element mit diesem Attribut aus
[Attributname='Wert'] Wählen Sie das Element
mit dem Attribut aus gleich einem bestimmten Wert [ Attributname!='Wert'] Wählen Sie das Element aus, dessen Attribut nicht einem bestimmten Wert entspricht
Zum Beispiel: $("input[name='newlatter']"); das Eingabeelement, dessen Namensattribut newlatter ist
5. Formularattributselektor
Verwendung: aktiviert :ausgewählt :aktiviert :deaktiviert zum Filtern von Elementen
Vereinfachung des Attributfilterselektors
Zum Beispiel: $( ":radio:checked") kann alle ausgewählten Radioelemente auswählen
‐ kann alle ausgewählten Optionselemente auswählen
🎜> attr("Attribute name") Attribut abrufen Attr("Attribute name ", Attributwert) Attribut
setzen removeAttr("Attribute name") Attribut
entfernen
7. Methoden zum Abrufen und Festlegen des Wertattributs
val() und val("value")
8. html() html("value")
html ( ) entspricht innerHTML
html("value") entspricht innerHTML="value"
text() text("value")
text() entspricht innerText()
text("value") entspricht innerText="value"
9. Stilfunktion
css("name of style") Ruft den Wert ab, der dem Stil
css(" entspricht Name des Stils“, „Stil Der Wert von“) Legen Sie den entsprechenden Stil fest Legen Sie jeweils einen
fest css({"Name des Stils": "Wert des Stils", "Name des Stils": "Wert des Stils" }) Legen Sie mehrere Stile gleichzeitig fest
addClass("class name") Fügen Sie einen Wert hinzu, der dem Klassenattribut entspricht
removeClass("class name") Löschen Sie den Wert, der dem Klassenattribut entspricht
toggleClass("Klassenname") Switch
width() Holen Sie sich die Breite
height() Holen Sie sich die Höhe
innerWidth() Holen Sie sich die Breite (einschließlich Polsterung)
äußereWidth() Holen Sie sich die Breite (einschließlich Polsterung und Rand)
äußereWidth(true) Ermittelt die Breite (einschließlich Polsterung, Rand und äußerer Rand)
10. Funktionen ein- und ausblenden
show() show
hide() hide
toggle() switch
show(speed) Innerhalb der angegebenen Zeit anzeigen
hide(speed) Innerhalb der angegebenen Zeit ausblenden
toggle(speed) Innerhalb der angegebenen Zeit umschalten
slideUp(speed) slideUp(speed) innerhalb der angegebenen Zeit Innerhalb der angegebenen Zeit nach oben verkleinern
slideDown(speed) Innerhalb der angegebenen Zeit nach unten erweitern
slideToggle(speed) Die beiden oben genannten Zustände innerhalb der angegebenen Zeit umschalten Zeit
fadeIn(speed) fadeIn(speed) innerhalb der angegebenen Zeit Einblenden innerhalb der Zeit
fadeOut(speed) Ausblenden innerhalb der angegebenen Zeit
fadeToggle(speed) Wechseln Sie die beiden oben genannten Zustände
11. Benutzerdefinierte Animation
Selector.animate({" Parameters"},[time],[animation callback function]);
$(document).ready(function(){
> $("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
} ,2000);
});
});
12. Bindungsereignisse
Selector.bind("event", Ereignishandler); Ereignis des zuzuordnenden Elements Für die entsprechende Event-Handler-Funktion wird empfohlen, on
selector.unbind("event"); zu verwenden, um das Ereignis des Elements von der entsprechenden Handler-Funktion zu trennen. Es wird empfohlen, off
selector.trigger("event" zu verwenden "); Ereignisaufruf auslösen
Häufig verwendete Ereignisfunktionen erstellen:
click(fn)/click()
DBLCLICK (Fn)/DBLCLICK ()
Unschärfe (Fn)/Unschärfe ()
Fokus (Fn)/Fokus ()
Ändern (Fn)/Ändern ()
Keydown (Fn)/Keydown " laden (fn)/unload(fn)
Zum Beispiel: $("div").click(function(e){});//e ist das Ereignisobjekt
$("div").bind("click",function(){});
13. Häufig verwendete Attribute und Methoden des Ereignisobjekts
Zielereignis Quelle
Seite ){
Alert(e.pageX+":" e.pageY); Beim Weggehen wird die Out-Funktion ausgelöst
15. Dynamische Ereignisfunktion
on (Ereignistyp, Selektor, Verarbeitungsfunktion)
Sie können die aktuellen und zukünftigen Werte eines Elements angeben. Ereignisse an Elemente binden, die dem Selektor entsprechen
Zum Beispiel: $("table" ).on("click","tr",function(){
//Ereignisverarbeitungslogik
} ; Interner vorangestellter Inhalt
after() Inhalt nach jedem passenden Element einfügen
before() Inhalt vor jedem passenden Element einfügen
remove() Knoten entfernen
empty() Knoten leeren
clone() Knotenelemente kopieren
clone(true) Knotenelemente und gebundene Ereignishandler kopieren
children( ) Untergeordnete Elemente finden
next() Nachfolgende Geschwisterelemente finden
prev( ) Vorherige Geschwisterelemente suchen
siblings() Geschwisterelemente suchen
find(selector) Untergeordnete Elemente und Nachkommenelemente
parent finden () Übergeordnetes Element finden
parent(selector) Vorfahrenelemente finden
eq(index) Gibt das jQuery-Objekt
bei index+1 zurück first() Ruft das erste Element ab
last() Ruft das letzte Element ab
is(expr) Bestimmt, ob das Element die Ausdrucksbedingung erfüllt
not(expr) Gibt Elemente zurück, die bestimmte Bedingungen nicht erfüllen
get(index) Ruft eines der passenden DOM-Elemente ab
17. Hilfsfunktion
$.each(object,[callback])
Traversal-Methode, die zum Durchlaufen von Arrays und Objekten verwendet wird
erstes, zweites)
Zwei Arrays zusammenführen, die beiden Arrays mit dem ersten zusammenführen array
$.trim(str)
Entfernen Sie die Leerzeichen am Anfang und Ende der Zeichenfolge
Das obige ist der detaillierte Inhalt vonEinführung in einige häufig verwendete Methoden in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!