ownerdocument是什么意思?它是怎么使用的

2020年8月31日 14:18:04js教程评论504 views阅读模式

根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。

你可以传递一个手写的 HTML 字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制，可以参考第二个示例。当然这个字符串可以包含斜杠 (比如一个图像地址)，还有反斜杠。当你创建单个元素时，请使用闭合标签或 XHTML 格式。例如，创建一个 span ，可以用$("<span/>") 或 $("<span></span>") ，但不推荐 $("<span>")。在jQuery 中，这个语法等同于$(document.createElement("span")) 。

在jQuery 1.8中，通过$(html,props)，您可以使用任何jQuery对象的方法或插件。在此之前，你只能使用一个方法名的短名单，并有没有成文的方式添加到列表中。现在并不需要是一个列表，在所有！然而，请注意，这可能会导致你的代码的行为改变，如果插件添加后，有相同的名称作为HTML属性。

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

如果传入的字符串参数看起来像一段HTML代码（例如，字符串中含有<tag…>），jQuery则尝试用这段HTML代码创建新的DOM元素，并创建一个包含了这些DOM元素引用的jQuery对象。例如，下面的代码将把HTML代码转换成DOM元素并插入body节点的末尾：

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

如果HTML代码是一个单独标签，例如，$('<img/>')或$('<a></a>')，jQuery会使用浏览器原生方法document.createElement()创建DOM元素。如果是比单独标签更复杂的HTML片段，例如上面例子中的$('<p id = "test">My<em>new</em>text</p>')，则利用浏览器的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");

描述:

创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。

jQuery 代码:

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

描述:

jQuery 代码:

$("<p>", {

  "class": "test",

  text: "Click me!",

  click: function(){

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

  }

}).appendTo("body");

描述:

创建一个 <input> 元素，同时设定 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 字符串，比如