Using The jQuery Migrate Plugin

偏执的太偏执、 2021-10-18 20:00 213阅读 0赞

## jQuery( html \[, ownerDocument \] )Returns: [jQuery][] ##

**Description: **Creates DOM elements on the fly from the provided string of raw HTML.

*  #### version added: [1.0][][jQuery( html \[, ownerDocument \] )][jQuery_ html _ ownerDocument _] ####
    
     *  **html**
        
        Type:  [htmlString][]
        
        A string of HTML to create on the fly. Note that this parses HTML,  **not** XML.
     *  **ownerDocument**
        
        Type:  [document][]
        
        A document in which the new elements will be created.
 *  #### version added: [1.4][][jQuery( html, attributes )][jQuery_ html_ attributes] ####
    
     *  **html**
        
        Type:  [htmlString][]
        
        A string defining a single, standalone, HTML element (e.g. <div/> or <div></div>).
     *  **attributes**
        
        Type:  [PlainObject][]
        
        An object of attributes, events, and methods to call on the newly-created element.

#### Creating New Elements ####

If a string is passed as the parameter to `$()`, jQuery examines the string to see if it looks like HTML (i.e., it starts with `<tag ... >`). If not, the string is interpreted as a selector expression, as explained above. But if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML. Then a jQuery object is created and returned that refers to these elements. You can perform any of the usual jQuery methods on this object:

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>$( <span>"&lt;p id='test'&gt;My &lt;em&gt;new&lt;/em&gt; text&lt;/p&gt;" ).appendTo( <span>"body" );</span></span></code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

For explicit parsing of a string to HTML, use the [$.parseHTML()][.parseHTML] method.

By default, elements are created with an `.ownerDocument` matching the document into which the jQuery library was loaded. Elements being injected into a different document should be created using that document, e.g., `$("<p>hello iframe</p>", $("#myiframe").prop("contentWindow").document)`.

If the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser's `.innerHTML` mechanism. In most cases, jQuery creates a new `<div>` element and sets the `innerHTML` property of the element to the HTML snippet that was passed in. When the parameter has a single tag (with optional closing tag or quick-closing) — `$( "<img />" )` or `$( "<img>" )`, `$( "<a></a>" )` or `$( "<a>" )` — jQuery creates the element using the native JavaScript `.createElement()` function.

When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, jQuery uses the browser's `.innerHTML` property to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as `<html>`, `<title>`, or `<head>`elements. As a result, the elements inserted may not be representative of the original string passed.

Filtering isn't, however, limited to these tags. For example, Internet Explorer prior to version 8 will also convert all `href`properties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate [compatibility layer][].

To ensure cross-platform compatibility, the snippet must be well-formed. Tags that can contain other elements should be paired with a closing tag:

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>$( <span>"&lt;a href='https://jquery.com'&gt;&lt;/a&gt;" );</span></code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

Tags that cannot contain elements may be quick-closed or not:

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>$( <span>"&lt;img&gt;" );</span></code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code>$( <span>"&lt;input&gt;" );</span></code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

When passing HTML to `jQuery()`, note that text nodes are not treated as DOM elements. With the exception of a few methods (such as `.content()`), they are generally ignored or removed. E.g:

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code><span>var el = $( <span>"&lt;br&gt;2&lt;br&gt;3" ); <span>// returns [&lt;br&gt;, "2", &lt;br&gt;]</span></span></span></code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code>el = $( <span>"&lt;br&gt;2&lt;br&gt;3 &gt;" ); <span>// returns [&lt;br&gt;, "2", &lt;br&gt;, "3 &amp;gt;"]</span></span></code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

This behavior is expected. **As of jQuery 1.9.0** (and unless using the [jQuery Migrate plugin][]), `jQuery()` requires the HTML string to start with a `<` (i.e text nodes cannot appear at the front of the HTML string).

**As of jQuery 1.4**, the second argument to `jQuery()` can accept a plain object consisting of a superset of the properties that can be passed to the [.attr()][.attr] method.

**Important:** If the second argument is passed, the HTML string in the first argument must represent a simple element with no attributes. **As of jQuery 1.4**, any [event type][] can be passed in, and the following jQuery methods can be called: [val][], [css][], [html][], [text][], [data][], [width][], [height][], or [offset][].

**As of jQuery 1.8**, any jQuery instance method (a method of `jQuery.fn`) can be used as a property of the object passed to the second parameter:

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>$( <span>"&lt;div&gt;&lt;/div&gt;", { </span></code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> <span>"class": <span>"my-div",</span></span></code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> on: { </code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> touchstart: <span>function( event ) { </span></code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> <span>// Do something</span></code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> }</code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> }</code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code>}).appendTo( <span>"body" );</span></code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

The name `"class"` must be quoted in the object since it is a JavaScript reserved word, and `"className"` cannot be used since it refers to the DOM property, not the attribute.

While the second argument is convenient, its flexibility can lead to unintended consequences (e.g. `$( "<input>", {size: "4"} )` calling the `.size()` method instead of setting the size attribute). The previous code block could thus be written instead as:

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>$( <span>"&lt;div&gt;&lt;/div&gt;" )</span></code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> .addClass( <span>"my-div" )</span></code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> .on({ </code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> touchstart: <span>function( event ) { </span></code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> <span>// Do something</span></code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> }</code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> })</code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> .appendTo( <span>"body" );</span></code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Examples: ##

Create a div element (and all of its contents) dynamically and append it to the body element. Internally, an element is created and its innerHTML property set to the given markup.

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>$( <span>"&lt;div&gt;&lt;p&gt;Hello&lt;/p&gt;&lt;/div&gt;" ).appendTo( <span>"body" )</span></span></code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

Create some DOM elements.

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>$( <span>"&lt;div/&gt;", { </span></code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> <span>"class": <span>"test",</span></span></code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> text: <span>"Click me!",</span></code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> click: <span>function() { </span></code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> $( <span>this ).toggleClass( <span>"test" );</span></span></code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> }</code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code>})</code> 
     </div> 
    </div> 
    <div> 
     <div> 
      <code> .appendTo( <span>"body" );</span></code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/mouseleo/p/10631818.html

[jQuery]: http://api.jquery.com/Types/#jQuery
[1.0]: https://api.jquery.com/category/version/1.0/
[jQuery_ html _ ownerDocument _]: https://api.jquery.com/jquery/#jQuery-html-ownerDocument
[htmlString]: http://api.jquery.com/Types/#htmlString
[document]: http://api.jquery.com/Types/#document
[1.4]: https://api.jquery.com/category/version/1.4/
[jQuery_ html_ attributes]: https://api.jquery.com/jquery/#jQuery-html-attributes
[PlainObject]: http://api.jquery.com/Types/#PlainObject
[.parseHTML]: https://api.jquery.com/jQuery.parseHTML/
[compatibility layer]: https://code.google.com/p/html5shiv/
[jQuery Migrate plugin]: https://github.com/jquery/jquery-migrate/#readme
[.attr]: https://api.jquery.com/attr/
[event type]: https://api.jquery.com/category/events/
[val]: https://api.jquery.com/val/
[css]: https://api.jquery.com/css/
[html]: https://api.jquery.com/html/
[text]: https://api.jquery.com/text/
[data]: https://api.jquery.com/data/
[width]: https://api.jquery.com/width/
[height]: https://api.jquery.com/height/
[offset]: https://api.jquery.com/offset/