What does ownerdocument mean? How is it used?

Dynamically creates a DOM element wrapped by a jQuery object based on the supplied raw HTML markup string. Set a series of properties, events, etc. at the same time.

You can pass a handwritten HTML string, a string created by some template engine or plugin, or a string loaded via AJAX. But there are restrictions when you create input elements, you can refer to the second example. Of course this string can contain slashes (such as an image address), as well as backslashes. When you create individual elements, use closing tags or XHTML formatting. For example, to create a span, you can use $("") or $("") , but $("") is not recommended. In jQuery, this syntax is equivalent to $(document.createElement("span")).

In jQuery 1.8, through $(html,props), you can use any jQuery object method or plug-in. Previously, you could only use a short list of method names, and there was no documented way to add to the list. Now it doesn't need to be a list at all! However, please note that this may cause the behavior of your code to change if the plugin is added with the same name as the HTML attribute.

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

If the incoming string parameter looks like a piece of HTML code (for example, the string contains ), jQuery attempts to use this HTML code to create new DOM elements and create a jQuery object containing references to these DOM elements. For example, the following code will convert the HTML code into a DOM element and insert it at the end of the body node:

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

If the HTML code is a single tag, for example, $('') or $ (''), jQuery will use the browser's native method document.createElement() to create a DOM element. If it is an HTML fragment that is more complex than a separate tag, such as $('

Mynewtext

') in the example above, use the browser The innerHTML mechanism creates DOM elements. This process is implemented by the method jQuery.buildFragment() and the method jQuery.clean(). The relevant content is introduced and analyzed in Sections 2.4 and 2.5 respectively.

The second parameter ownerDocument is used to specify the document object to create a new DOM element. If not passed in, it defaults to the current document object.

If the HTML code is a separate tag, the second parameter can also be props, which is a common object containing properties and events; after calling document.createElement() to create a DOM element, the parameter props will be passed to the jQuery method .attr(), and then .attr() is responsible for setting the attributes and events in the parameter props to the newly created DOM element.

The attribute of the parameter props can be any event type (such as "click"). At this time, the attribute value should be the event listening function, which will be bound to the newly created DOM element; the parameter props can contain The following special attributes: val, css, html, text, data, width, height, offset, corresponding jQuery methods: .val(), .css(), .html(), .text(), .data(), .width(), .height(), .offset() will be executed, and the attribute value will be passed in as a parameter; other types of attributes will be set to the newly created DOM element, and some special attributes will also be Cross-browser compatibility (such as type, value, tabindex, etc.); you can set the class style through the attribute name class, but you must wrap the class in quotes because class is a JavaScript reserved word. For example, in the following example, create a p element, set the class style to "test", set the text content to "Click me!", bind a click event, and then insert it at the end of the body node. When the p element is clicked class style will also be switched when testing:

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

Sample code:

Dynamicly create a p element (and all the content within it), and append it to the body element. Inside this function, markup to DOM element conversion is achieved by temporarily creating an element and setting the element's innerHTML property to the given markup string. Therefore, this function has both flexibility and limitations.

jQuery Code:

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

Description:

Creating an element must also set the type attribute. Because Microsoft stipulates that the type of the element can only be written once.

jQuery Code:

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

Description:

Dynamically create a p element (and all content within it) and append it to the body element. Inside this function, markup to DOM element conversion is achieved by temporarily creating an element and setting the element's innerHTML property to the given markup string. Therefore, this function has both flexibility and limitations.

jQuery Code:

$("<p>", {

  "class": "test",

  text: "Click me!",

  click: function(){

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

  }

}).appendTo("body");

Description:

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

<span>I&#39;m a SPAN</span>

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

document.createElement( tagName )

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

先用 document.createDocumentFragment 创建一个 documentFragment

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

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

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

The above is the detailed content of What does ownerdocument mean? How is it used?. For more information, please follow other related articles on the PHP Chinese website!