jQuery-Kern - jQuery()-Methode
Beispiel
Finden Sie alle p-Elemente, die als Kinder des div-Elements gehören, und setzen Sie deren Rahmenattribut:
$("div > p").css("border", "1px solid gray");
Definition und Verwendung
Die jQuery()-Methode akzeptiert einen String, der CSS-Selektoren enthält, um Elementensammlungen zu matchen.
Die jQuery()-Funktion hat drei Syntaxen:
Syntax 1
Akzeptiert einen String, der CSS-Selektoren enthält, um Elementensammlungen zu matchen:
jQuery(selector, [context]
Syntax 2
Erstellen Sie DOM-Elemente mit Strings in Original-HTML:
jQuery(html,ownerDocument]
Syntax 3
Fügen Sie eine Funktion hinzu, die nach dem Laden des DOM-Dokuments ausgeführt wird:
jQuery( callback )
jQuery( selector, [ context ] )
Diese Syntax hat die folgenden Verwendungen:
Verwendung 1: Setzen des Selector-Umfangs
Syntax
jQuery(selector, [context]
Standardmäßig sucht der Selector vom Dokumentstamm aus im DOM. Allerdings kann für $(()) ein optionaler context-Parameter gesetzt werden.
Beispielsweise, wenn wir in einem Callback nach einem Element suchen möchten, können wir die folgende Suche einschränken:
Beispiel
$("div.foo").click(function() {
$("span", this).addClass("bar");
);
Da wir den span-Selektor auf die Umgebung this begrenzt haben, wird nur der span im geklickten Element die zusätzliche Klasse erhalten.
Intern wird die Selector-Umgebung durch die Methode .find() implementiert, daher ist $("span", this) äquivalent zu $(this).find("span").
Die Kernfunktionen von jQuery werden durch diese Funktion implementiert. Alles in jQuery basiert auf dieser Funktion oder wird auf irgendeine Weise diese Funktion verwendet. Die grundlegendste Verwendung dieser Funktion besteht darin, ihr einen Ausdruck (normalerweise ein CSS-Selektor) zu übergeben und dann nach allen Elementen zu suchen, die diesem Ausdruck entsprechen.
Standardmäßig sucht $(), wenn kein Kontext-Parameter angegeben ist, im aktuellen HTML-Dokument nach DOM-Elementen; wenn der Kontext-Parameter angegeben ist, wie ein DOM-Element-Set oder ein jQuery-Objekt, wird in diesem Kontext gesucht. Ab jQuery 1.3.2 entspricht die Reihenfolge der zurückgegebenen Elemente der Reihenfolge ihrer Erscheinung im Kontext.
Verwendung 2: DOM-Element verwenden
Syntax
jQuery(element)
Diese Funktion ermöglicht es uns, jQuery-Objekte zu erstellen, indem wir DOM-Elemente verwenden, die auf andere Weise gefunden wurden. Der häufige Gebrauch dieser Funktion ist es, Methoden von jQuery auf Elementen anzuwenden, die durch das this-Schlüsselwort an die Callback-Funktion weitergegeben wurden:
Beispiel
$("div.foo".click(function() {
$(this).slideUp();
);
Dieser Beispielcode verwendet eine Slide-Animation, um das Element zu verstecken, wenn es geklickt wird. Da der Handler den geklickten Element, der im this-Schlüsselwort enthalten ist, als reines DOM-Element annimmt, muss das Element vor dem Aufruf von jQuery-Methoden in ein jQuery-Objekt verpackt werden.
Diese Funktion kann auch XML-Dokumente und Window-Objekte (obwohl sie keine DOM-Elemente sind) als gültige Parameter akzeptieren.
Wenn XML-Daten nach der Rückgabe aus einem Ajax-Aufruf verwendet werden, können wir die Funktion $() verwenden, um die Daten mit dem jQuery-Objekt zu verpacken. Sobald dies abgeschlossen ist, können wir .find() und andere DOM-Through-Methoden verwenden, um einzelne Elemente aus der XML-Struktur abzurufen.
Verwendung 3: jQuery-Objekt klonen
Syntax
jQuery(jQuery-Objekt)
Wenn jQuery-Objekte als Parameter an die Funktion $() übergeben werden, wird eine Kopie dieses Objekts erstellt. Wie das ursprüngliche Objekt ist der neue jQuery-Objekt auf das gleiche DOM-Element referenzierend.
Verwendung 4: Leere Sammlung zurückgeben
Syntax
jQuery()
Für jQuery 1.4 gibt die ohne Parameter aufgerufene jQuery()-Methode eine leere jQuery-Kollektion zurück. In früheren Versionen von jQuery gibt es eine Sammlung, die den Dokumentknoten enthält.
jQuery( html, [ ownerDocument ] )
Diese Syntax hat die folgenden Verwendungen:
Verwendung 1: Neues Element erstellen
Syntax
jQuery(html,ownerDocument]
Sie können eine handschriftliche HTML-Zeichenkette, eine Zeichenkette, die von bestimmten Template-Engines oder Plugins erstellt wird, oder eine Zeichenkette, die über AJAX geladen wird, übergeben. Beim Erstellen von input-Elementen gibt es jedoch Einschränkungen, die im zweiten Beispiel referenziert werden können.
Natürlich kann diese Zeichenkette auch Schrägstriche (z.B. eine Bild-URL) und Backslashes enthalten. Wenn Sie ein einzelnes Element erstellen, verwenden Sie bitte geschlossene Tags oder XHTML-Format. Zum Beispiel erstellen Sie einen span, indem Sie $("<span/>") oder $("<span></span>") verwenden, aber $("<span>") wird nicht empfohlen. In jQuery entspricht diese Syntax $(document.createElement("span")).
Wenn Sie eine Zeichenkette als Parameter an $() übergeben, überprüft jQuery, ob die Zeichenkette HTML ist (z.B. gibt es an bestimmten Positionen Tags). Wenn nicht, wird die Zeichenkette als Selector-Ausdruck interpretiert, siehe die obige Erklärung. Wenn jedoch eine HTML-Schnipsel übergeben wird, versucht jQuery, DOM-Elemente zu erstellen, die durch diesen HTML-Schnipsel beschrieben werden. Danach wird ein jQuery-Objekt erstellt und zurückgegeben, das auf diese DOM-Elemente verweist:
Beispiel
$("<p id="test">My <em>new</em> text</p>").appendTo("body");
Wenn ein HTML-Schnipsel komplexer ist als einfache Tags ohne Attribute, wie im obigen Beispiel, wird der tatsächliche Erstellungsprozess durch das innerHTML-Mechanismus des Browsers abgeschlossen. Genauer gesagt, erstellt jQuery neue <div>-Elemente und setzt die innerHTML-Eigenschaft des Elements für den übergebenen HTML-Schnipsel. Wenn der Parameter einfache Tags sind, wie $("<img />") oder $("<a></a>"), erstellt jQuery Elemente durch die innate JavaScript createElement()-Funktion.
Um die Plattformübergreifende Kompatibilität zu gewährleisten, muss die Struktur der Fragmente gut sein. Tags, die andere Elemente enthalten können, müssen paarweise auftreten (mit schließenden Tags):
$("<a href="http://jquery.com"></a>");
Jedoch erlaubt jQuery auch eine ähnliche XML-Tag-Syntax:
$("<a/>");
Tags, die keine anderen Elemente enthalten, können geschlossen oder nicht geschlossen werden:
$("<img />");
$("<input>");
Verwendung 2: Attribute und Ereignisse setzen
Syntax
jQuery(html,props)
Für jQuery 1.4 können wir einen Attributmapping an den zweiten Parameter übergeben. Dieser Parameter akzeptiert eine Superset der Attribute, die an die .attr()-Methode übergeben werden können. Außerdem können beliebige Ereignistypen übergeben werden und die folgenden jQuery-Methoden können aufgerufen werden: val, css, html, text, data, width, height, oder offset.
Beachten Sie, dass Internet Explorer das Erstellen von input-Elementen und das Ändern ihrer Typen nicht erlaubt; Sie müssen z.B. "<input type="checkbox" />" verwenden, um den Typ zu spezifizieren.
Beispiel
Erstellt ein <input>-Element und设定 type-Attribut, Attributwerte und einige Ereignisse.
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
jQuery( callback )
Ermöglicht es, eine Funktion zu binden, die nach dem Laden des DOM-Dokuments ausgeführt wird.
Diese Funktion funktioniert wie $(document).ready(), nur dass man alle anderen $() Operationen, die im DOM-Laden ausgeführt werden sollen, in diese Funktion einbetten muss. Obwohl diese Funktion technisch verknüpft werden kann, wird dies in der Praxis selten getan.
Beispiel
Wenn das DOM geladen ist, führt es die darin enthaltenen Funktionen aus:
$(function(){
// Dokument bereit
);
