ownerdocument是什麼意思?它是怎麼使用的-js教程-PHP中文網

根據提供的原始 HTML 標記字串，動態建立由 jQuery 物件包裝的 DOM 元素。同時設定一系列的屬性、事件等。

你可以傳遞一個手寫的 HTML 字串，或是由某些模板引擎或外掛程式建立的字串，也可以是透過 AJAX 載入過來的字串。但是在你創建 input 元素的時會有限制，可以參考第二個範例。當然這個字串可以包含斜線 (例如一個圖像位址)，還有反斜線。當你建立單一元素時，請使用閉合標籤或 XHTML 格式。例如，建立一個 span ，可以用$("") 或 $("") ，但不建議 $("")。在jQuery 中，這個語法等同於$(document.createElement("span")) 。

在jQuery 1.8中，透過$(html,props)，您可以使用任何jQuery物件的方法或外掛程式。在此之前，你只能使用一個方法名稱的短名單，並有沒有成文的方式加入列表。現在並不需要是一個列表，在所有！然而，請注意，這可能會導致你的程式碼的行為改變，如果外掛程式加入後，有相同的名稱作為HTML屬性。

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

如果傳入的字串參數看起來像一段HTML程式碼（例如，字串中含有），jQuery則嘗試用這段HTML程式碼建立新的DOM元素，並建立一個包含了這些DOM元素所引用的jQuery物件。例如，下面的程式碼將把HTML程式碼轉換成DOM元素並插入body節點的結尾：

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

登入後複製

如果HTML程式碼是一個單獨標籤，例如，$('')或$ ('')，jQuery會使用瀏覽器原生方法document.createElement()來建立DOM元素。如果是比單獨標籤更複雜的HTML片段，例如上述範例中的$('

Mynewtext

')，則利用瀏覽器的innerHTML機制創建DOM元素，這個過程由方法jQuery.buildFragment()和方法jQuery.clean()實現，相關內容分別在2.4節和2.5節介紹和分析。

第二個參數ownerDocument用於指定建立新DOM元素的文檔對象，如果不傳入，則預設為目前文檔對象。

如果HTML程式碼是一個單獨標籤，那麼第二個參數還可以是props，props是一個包含了屬性、事件的普通物件；在呼叫document.createElement()建立DOM元素後，參數props會傳給jQuery方法.attr()，然後由.attr()負責把參數props中的屬性、事件設定到新建立的DOM元素上。

參數props的屬性可以是任意的事件類型（如「click」），此時屬性值應該是事件監聽函數，它將被綁定到新建立的DOM元素上；參數props可以含有以下特殊屬性：val、css、html、text、data、width、height、offset，對應的jQuery方法：.val()、.css()、.html()、.text()、.data()、 .width()、.height()、.offset()將被執行，並且屬性值會作為參數傳入；其他類型的屬性則會被設定到新建立的DOM元素上，某些特殊屬性也會做跨瀏覽器相容（如type、value、tabindex等）；可以透過屬性名稱class設定類別樣式，但要用引號把class包裹起來，因為class是JavaScript保留字。例如，在下面的範例中，建立一個p元素，並設定類別樣式為「test」、設定文字內容為「Click me!」、綁定一個click事件，然後插入body節點的末尾，當點擊該p元素時，也會切換類別樣式test：

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

登入後複製

範例程式碼：

動態建立一個p 元素（以及其中的所有內容），並將它追加到body 元素。在這個函數的內部，是透過暫時建立一個元素，並將這個元素的 innerHTML 屬性設定為給定的標記字串，來實現標記到 DOM 元素轉換的。所以，這個函數既有彈性，也有限制。

jQuery 程式碼:

$("<p><p>Hello</p></p>").appendTo("body");

登入後複製

描述:

建立一個元素必須同時設定 type 屬性。因為微軟規定元素的 type 只能寫一次。

jQuery 程式碼:

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

登入後複製

描述:

動態建立一個 p 元素（以及其中的所有內容），並將它追加到 body 元素中。在這個函數的內部，是透過暫時建立一個元素，並將這個元素的 innerHTML 屬性設定為給定的標記字串，來實現標記到 DOM 元素轉換的。所以，這個函數既有彈性，也有限制。

jQuery 程式碼:

$("<p>", {

  "class": "test",

  text: "Click me!",

  click: function(){

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

  }

}).appendTo("body");

登入後複製

描述:

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

jQuery 代码:

$("<input>", {

  type: "text",

  val: "Test",

  focusin: function() {

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

  },

  focusout: function() {

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

  }

}).appendTo("form");

登入後複製

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