Heim > Artikel > Web-Frontend > Eine kurze Diskussion über die Kernfunktionen von Jquery_jquery
In JQuery werden alle DOM-Objekte in JQuery-Objekte gekapselt, und nur JQuery-Objekte können JQuery-Methoden oder -Eigenschaften verwenden, um entsprechende Vorgänge auszuführen.
Daher stellt Jquery eine Funktion bereit, die DOM-Objekte in JQuery-Objekte kapseln kann, nämlich die JQuery-Kernfunktion jquery(), auch Factory-Funktion genannt.
Die JQuery-Kernfunktion verfügt über 7 Überladungen, wie folgt:
jquery() Diese Funktion gibt ein leeres jquery-Objekt zurück.
jquery(elements) Diese Funktion konvertiert ein oder mehrere DOM-Elemente in Jquery-Objekte (oder Jquery-Sammlungen)
jquery(callback) Diese Funktion ist die Abkürzung für jquery(document).ready(callback). Diese Funktion bindet eine Funktion, die ausgeführt wird, nachdem das DOM-Dokument geladen wurde. Alle JQuery-Operationen auf der Seite, die beim Laden des DOM ausgeführt werden müssen, müssen in dieser Funktion enthalten sein. Diese Funktion kann mehrfach auf der Seite erscheinen.
jquery(Ausdruck,[Kontext])
jquery(html)
jquery(html,props)
jquery(html,[ownerDocument])
Schauen wir sie uns im Detail an
jQuery(expression, [context])
Diese Funktion empfängt eine Zeichenfolge, die einen CSS-Selektor enthält, und verwendet diese Zeichenfolge dann, um eine Reihe von Elementen abzugleichen.
Sie können ein DOM-Objekt über doc[0] bzw. doc[1] abrufen, und die anderen sind einige Eigenschaften und Methoden, die nur für jQuery-Objekte gelten. Tatsächlich umschließen jQuery-Objekte DOM-Objekte und umfassen auch einige Operationen für DOM-Elemente . jQuery-Methode.
Bei der Verwendung von jQuery besteht der erste und in den meisten Fällen wichtigste Schritt darin, das jQuery-Objekt abzurufen, das das zu manipulierende DOM-Objekt umschließt, und dann die Verarbeitung durch Aufrufen der Methode des erhaltenen jQuery-Objekts abzuschließen . Operationen an DOM-Objekten.
zum Beispiel
1. Suchen Sie alle Elemente mit Knoten p im #ersten Kontext und zeigen Sie die entsprechenden Werte in einer Schleife an.
$(function() { var items = $("p", "#first"); $.each(items, function(i, n) { alert(i); }); });
i ist der entsprechende Index, n ist der entsprechende Knoten
2. Finden Sie alle p-Elemente. Diese Elemente müssen untergeordnete Elemente des div-Elements sein.
HTML-Code:
e388a4556c0f65e1904146cc1a846beeeins94b3e26ee717c64999d7867364b1b4a3 dc6dce4a544fdca2df29d5ac0ea9906be388a4556c0f65e1904146cc1a846beezwei94b3e26ee717c64999d7867364b1b4a316b28748ea4df4d9c2150843fecfba68 e388a4556c0f65e1904146cc1a846beedrei94b3e26ee717c64999d7867364b1b4a3
jQuery-Code:
$("div > p");0c6dc11e160d3b678d68754cc175188a
Ergebnis:
[ e388a4556c0f65e1904146cc1a846beezwei94b3e26ee717c64999d7867364b1b4a3 ]
3. Suchen Sie im ersten Formular des Dokuments alle Optionsfelder (z. B. Eingabeelemente mit dem Typwert radio).
jQuery-Code:
$("input:radio", document.forms[0]);
jQuery(html, [ownerDocument])
Erstellt dynamisch ein DOM-Element, das von einem jQuery-Objekt umgeben ist, basierend auf einer bereitgestellten rohen HTML-Markup-Zeichenfolge.Sie können einen handgeschriebenen HTML-String, einen von einer Template-Engine oder einem Plugin erstellten String oder einen über AJAX geladenen String übergeben.
jQuery(html, props)
Erstellt dynamisch ein DOM-Element, das von einem jQuery-Objekt umschlossen wird, basierend auf einer bereitgestellten Roh-HTML-Markup-Zeichenfolge. Legen Sie gleichzeitig eine Reihe von Eigenschaften, Ereignissen usw. fest.Parameter
htmlString
HTML-Tag-Zeichenfolge, die zum dynamischen Erstellen von DOM-Elementen verwendet wird
propsMap
Eigenschaften, Ereignisse und Methoden zum Anhängen an neu erstellte Elemente
Beispiel
Beschreibung:
Erstellen Sie dynamisch ein div-Element (und den gesamten darin enthaltenen Inhalt) und hängen Sie es an das body-Element an. Innerhalb dieser Funktion wird die Konvertierung von Markup in DOM-Elemente erreicht, indem vorübergehend ein Element erstellt und die innerHTML-Eigenschaft des Elements auf die angegebene Markup-Zeichenfolge festgelegt wird. Daher weist diese Funktion sowohl Flexibilität als auch Einschränkungen auf.
jQuery-Code:
$("<div>", { "class": "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); } }).appendTo("body");
Wenn das DOM geladen ist, führen Sie die darin enthaltenen Funktionen aus.
jQuery-Code:
$(function(){ // 文档就绪 });