Heim  >  Artikel  >  Web-Frontend  >  Eine kurze Diskussion über die Kernfunktionen von Jquery_jquery

Eine kurze Diskussion über die Kernfunktionen von Jquery_jquery

WBOY
WBOYOriginal
2016-05-16 15:54:261219Durchsuche

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");
Abkürzung für $(document).ready().

Wenn das DOM geladen ist, führen Sie die darin enthaltenen Funktionen aus.

jQuery-Code:


 
$(function(){
 // 文档就绪
});
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn