jQuery-Elementoperation und Ereignisbindung

1. Manipulieren Sie die Attribute von Elementen:

①attr liest: ("selector").attr ("attribute name"); change: ("selector"); ) .attr("Attribute name"); =>getAttribute("Attribute name"); Change: ("selector").attr("Attribute name", value); * (*Kann nicht auf Requisitenattribute zugreifen, die nicht mehr im Start-Tag vorhanden sind; Beispiel: aktiviert, ausgewählt, deaktiviert);

　②prop liest: ("selector").prop("property name"); elem. Attributname; Änderung: („Selektor“).prop („Attributname“); =>Attributname; 🎜> ③Attribute entfernen: $("selector").removeAttr("attribute name"); =>removeAttribute("attribute name");

2. Der Inhalt des Bedienelements:

　①html Originaltext: Gelesen: („selector“).html(); =>elem.innerHTML; Change: („selector“).html ("html Fragment"); =>elem.innerHTML="html fragment"; Clear element: $("selector").empty(); =>elem.innerHTML=""; Lesen: ("selector").text(); =>elem.textContent/innerText; change: ("selector").text(); "text");

③Der Wert des Formularelements: read: ("selector").val(); change: ("selector"). val(value);

3. Bearbeiten Sie den Stil von Elementen:

　① Bearbeiten Sie CSS-Eigenschaften direkt: ("selector").css("CSS property name"); ); ("selector").css("CSS-Eigenschaftsname"); =>getComputedStyle(); ("selector").css("CSS-Eigenschaftsname", value =>elem.style.CSS-Eigenschaftsname); Wert; gleichzeitig ändern Mehrere Attributwerte: $("selector").css({Attributname 1: Wert 1, Attributname 2: Wert 2,...}); , kann aber nur den Verbindungsstil ändern, der Attributname muss de-hash-caseed sein);

② Ändern Sie das Klassenattribut: a. „Klassenname“); b. Append („selector“).attr(„class“,“class name“); „selector“).removeClass( „Class name“); d. Clear: („selector“).removeClass(“class name“); ; oder ("selector") .removeClass(); e. Bestimmen Sie, ob es enthält: ("selector").e. f. Mit oder ohne angegebenen Klassennamen Wechseln Sie zwischen: $("selector").toggleClass("class name");

4. Holen Sie sich das übergeordnete Element: $ („selector“).parent( ); =>elem.parentElement; nextElementSibling; Vorheriger Bruder: ("selector").next([selector]); =>elem.nextElementSibling; Vorheriger Bruder: ("selector").prev([selector]); („selector“ ).siblings([selector]);

　③Untergeordnetes Element: direktes untergeordnetes Element: („selector“).children([selector]); alle untergeordneten Elemente: („selector“).children ([selector]); alle Nachkommenelemente: ("selector").find(selector); * (find() muss selector hinzufügen:

　①Knoten erstellen: var elem=elem=("Komplettes HTML-Element-Code-Snippet");

　②Hinzufügen: an das Ende aller untergeordneten Knoten unter dem übergeordneten Knoten anhängen: (parent).append((parent).append(elem); as parent Der erste untergeordnete Knoten wird eingefügt: (parent).prepend((parent).prepend(elem); eingefügt nach dem untergeordneten Knoten: (child).after((child).after(elem); eingefügt vor dem untergeordneten Knoten: (child ). before((child).before(elem);

6. Andere Operationen:

　①Löschen: $(element to be delete).remove();

　②Ersetzen: (old).replaceWith(new element); or (new element).replaceAll(old)　③Copy: var clone= ("selector") .clone([true]); * (true: Ereignisverarbeitungsfunktionen für tiefes Klonen einschließen);

7. Ereignisbindung bind:

　①$(… ).bind("Ereignisname ", fn)=>addEventListener; Binden Sie mehrere Funktionsobjekte an die Ereignisverarbeitungsfunktion desselben Elements;

　②$(...).unbind("Event Name", fn) =>removeEventListener; if Es ist möglich, die Event-Handler-Funktion zu entfernen. Sie müssen beim Binden eine Funktionsbindung mit echtem Namen verwenden und können keine anonyme Funktion verwenden. Überladung: a, ohne Parameter: Entfernen Sie alle Event-Handler-Funktionsbindungen für das Element. Mit nur einem Ereignisnamen-Parameter: Entfernen Sie alle an den angegebenen Ereignisnamen gebundenen Funktionsobjekte. c. Mit zwei Parametern: Entfernen Sie nur die ausgeführten Funktionsobjekte, die an den angegebenen Ereignisnamen gebunden sind 8. Ereignisbindungsdelegierter:

①Ereignis-Proxy: Erlauben Sie allen qualifizierten untergeordneten Elementen unter dem angegebenen übergeordneten Element, die Ereignisverarbeitungsfunktion (einschließlich Generierung) zu verwenden. Verwenden Sie die Ereignisverarbeitungsfunktion zum übergeordneten Element; b. Erhalten Sie das Zielelement: e.target; Reagieren Sie nur auf Ereignisse von Elementen, die die Bedingungen erfüllen

　②Verwendung von Ereignis-Proxy: Binden Sie das Ereignis an das übergeordnete Element (mittels Bubbling). Nur Elemente, die die Selektorbedingungen erfüllen, können auf das Ereignis reagieren (übergeordnet).delegate("selector", "event name", function(e ) e.target); Bindung entfernen: (parent).delegate("selector", "event name", function(e)e.target); , function(e){e.target});

9. Andere Bindungen:

　①Einmaliges Ereignis: $(...).one("Ereignisname", fn) ; Die Ereignisverarbeitungsfunktion kann nur einmal ausgeführt werden und wird nach der Ausführung automatisch freigegeben; ...).live("event name", fn); (...).die("event name", fn);

　③ Binden Sie die Ereignisverarbeitungsfunktion nur an ein Element: $( "target").on( "Event name", fn); ④Use bubbling: $("parent").on("Event name", "selector", fn); >