Heim > Web-Frontend > js-Tutorial > Was bedeutet Eigentümerdokument?

Was bedeutet Eigentümerdokument?

伊谢尔伦
Freigeben: 2017-06-16 14:35:45
Original
2626 Leute haben es durchsucht

Erstellt dynamisch ein DOM-Element, das von einem jQuery-Objekt umgeben ist, basierend auf einer bereitgestellten rohen HTML-Markup-Zeichenfolge. Legen Sie gleichzeitig eine Reihe von Eigenschaften, Ereignissen usw. fest.

Sie können einen handgeschriebenen HTML-String, einen von einer Template-Engine oder einem Plugin erstellten String oder einen über AJAX geladenen String übergeben. Beim Erstellen von Eingabeelementen gibt es jedoch Einschränkungen. Sie können sich auf das zweite Beispiel beziehen. Natürlich kann diese Zeichenfolge sowohl Schrägstriche (z. B. eine Bildadresse) als auch Backslashes enthalten. Verwenden Sie beim Erstellen einzelner Elemente schließende Tags oder XHTML-Formatierungen. Um beispielsweise eine Spanne zu erstellen, können Sie $("") oder $("") verwenden, $("") jedoch nicht empfohlen. In jQuery entspricht diese Syntax $(document.createElement("span")).

In jQuery 1.8 können Sie über $(html,props) jede Methode oder jedes Plugin eines jQuery-Objekts verwenden. Bisher konnten Sie nur eine kurze Liste von Methodennamen verwenden, und es gab keine dokumentierte Möglichkeit, der Liste etwas hinzuzufügen. Jetzt muss es überhaupt keine Liste mehr sein! Bitte beachten Sie jedoch, dass sich dadurch das Verhalten Ihres Codes ändern kann, wenn das Plugin mit demselben Namen wie das HTML-Attribut hinzugefügt wird.

jQuery( html [,ownerDocument] ), jQuery( html, props )

Wenn der eingehende String-Parameter wie ein Stück HTML-Code aussieht (z. B. enthält der String ), versucht jQuery, diesen HTML-Code zu verwenden, um neue DOM-Elemente zu erstellen und ein jQuery-Objekt zu erstellen, das Verweise auf diese DOM-Elemente enthält. Der folgende Code konvertiert beispielsweise den HTML-Code in ein DOM-Element und fügt es am Ende des Body-Knotens ein:

$(&#39;<p id="test">My <em>new</em> text</p>&#39;).appendTo(&#39;body&#39;);
Nach dem Login kopieren

Wenn der HTML-Code beispielsweise ein einzelnes Tag ist, $(' ') oder $('') verwendet jQuery die native Methode document.createElement() des Browsers, um ein DOM-Element zu erstellen. Wenn es sich um ein HTML-Fragment handelt, das komplexer ist als ein separates Tag, wie etwa $('

Mynewtext

') im obigen Beispiel , verwenden Sie den Browser Der innerHTML-Mechanismus erstellt DOM-Elemente. Dieser Prozess wird durch die Methode jQuery.buildFragment() und die Methode jQuery.clean() implementiert. Der relevante Inhalt wird in den Abschnitten 2.4 bzw. 2.5 vorgestellt und analysiert.

Der zweite ParameterownerDocument wird verwendet, um das Dokumentobjekt zum Erstellen eines neuen DOM-Elements anzugeben. Wenn er nicht übergeben wird, wird standardmäßig das aktuelle Dokumentobjekt verwendet.

Wenn der HTML-Code ein separates Tag ist, kann der zweite Parameter auch props sein, ein allgemeines Objekt, das Eigenschaften und Ereignisse enthält, nachdem document.createElement() aufgerufen wurde, um ein DOM-Element zu erstellen an die jQuery-Methode .attr() übergeben werden, und dann ist .attr() dafür verantwortlich, die Attribute und Ereignisse in den Parameter-Requisiten für das neu erstellte DOM-Element festzulegen.

Das Attribut des Parameters props kann ein beliebiger Ereignistyp sein (z. B. „Klick“). Zu diesem Zeitpunkt sollte der Attributwert die Ereignisüberwachungsfunktion sein, die an das neu erstellte DOM-Element gebunden wird. Die Parameter-Requisiten können die folgenden speziellen Attribute enthalten: val, css, html, text, data, width, height, offset, entsprechende jQuery-Methoden: .val(), .css(), .html(), .text(), .data(), .width(), .height(), .offset() werden ausgeführt und der Attributwert wird als Parameter übergeben. Andere Arten von Attributen werden auf das neu erstellte DOM-Element gesetzt Einige spezielle Attribute sind ebenfalls browserübergreifend kompatibel (z. B. Typ, Wert, Tabindex usw.). Sie können den Klassenstil über den Attributnamen „Klasse“ festlegen, müssen die Klasse jedoch in Anführungszeichen setzen, da „Klasse“ ein für JavaScript reserviertes Wort ist . Erstellen Sie im folgenden Beispiel beispielsweise ein p-Element, legen Sie den Klassenstil auf „test“ fest, legen Sie den Textinhalt auf „Click me!“ fest, binden Sie ein Click-Ereignis und fügen Sie es dann am Ende des Body-Knotens ein Das p-Element wird angeklickt. Klassenstiltest:

$("<p/>", {  
   "class": "test",  
   text: "Click me!",  
   click: function(){  
     $(this).toggleClass("test");  
   }  
}).appendTo("body");
Nach dem Login kopieren

Beispielcode:

Dynamisches Erstellen eines p-Elements (und aller darin enthaltenen Inhalte) ) und hängen Sie es an das Körperelement 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:

$("<p><p>Hello</p></p>").appendTo("body");
Nach dem Login kopieren

Beschreibung:

Beim Erstellen eines -Elements muss auch das Typattribut festgelegt werden. Denn Microsoft schreibt vor, dass der Typ des -Elements nur einmal geschrieben werden darf.

jQuery-Code:

// 在 IE 中无效: $("<input>").attr("type", "checkbox"); // 在 IE 中有效: $("<input type=&#39;checkbox&#39;>");
Nach dem Login kopieren

Beschreibung:

Erstellt dynamisch ein p-Element (und den gesamten darin enthaltenen Inhalt) und hängt 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:

$("<p>", {

  "class": "test",

  text: "Click me!",

  click: function(){

    $(this).toggleClass("test");

  }

}).appendTo("body");
Nach dem Login kopieren

Beschreibung:

创建一个 元素,同时设定 type 属性、属性值,以及一些事件。

jQuery 代码:

$("<input>", {

  type: "text",

  val: "Test",

  focusin: function() {

    $(this).addClass("active");

  },

  focusout: function() {

    $(this).removeClass("active");

  }

}).appendTo("form");
Nach dem Login kopieren

jQuery( html, [ownerDocument] ) 的用途是通过 html 字符串创造相应的 node 节点,jQuery 分为了两种情况,一种是 html 是由一个标签组成的 html 字符串,比如

<span>I&#39;m a SPAN</span>
Nach dem Login kopieren

这时, jQuery 会使用正则表达式匹配出这个 tag 的 tag name ,然后使用

document.createElement( tagName )
Nach dem Login kopieren

来生成这个 node ,而对于多个标签(还包括单个标签的前后有空白字符串)的情况,会这么处理:

先用 document.createDocumentFragment 创建一个 documentFragment

然后 用 document.createElement('p') ,创建一个 p

然后再 p.innerHTML = html ,创建 html 字符串对应的 node 节点

然后从 p 中得到这些节点,并返回

Das obige ist der detaillierte Inhalt vonWas bedeutet Eigentümerdokument?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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