Heim > Web-Frontend > js-Tutorial > Hauptteil

Eine kurze Diskussion über die Kernfunktionen von Jquery_jquery

WBOY
Freigeben: 2016-05-16 15:54:26
Original
1194 Leute haben es durchsucht

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);
    });
  });
Nach dem Login kopieren

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:

eins

zwei

drei

jQuery-Code:
$("div > p");

Ergebnis:
[

zwei

]

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

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

jQuery-Code:


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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!