zoukankan      html  css  js  c++  java

  • Using The jQuery Migrate Plugin

    jQuery( html [, ownerDocument ] )Returns: jQuery

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

    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:

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

    For explicit parsing of a string to HTML, use the $.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 hrefproperties 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:

    1
    $( "<a href='https://jquery.com'></a>" );

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

    1
    2
    $( "<img>" );
    $( "<input>" );

    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:

    1
    2
    var el = $( "<br>2<br>3" ); // returns [<br>, "2", <br>]
    el = $( "<br>2<br>3 >" ); // returns [<br>, "2", <br>, "3 &gt;"]

    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() 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:

    1
    2
    3
    4
    5
    6
    7
    8
    $( "<div></div>", {
    "class": "my-div",
    on: {
    touchstart: function( event ) {
    // Do something
    }
    }
    }).appendTo( "body" );

    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:

    1
    2
    3
    4
    5
    6
    7
    8
    $( "<div></div>" )
    .addClass( "my-div" )
    .on({
    touchstart: function( event ) {
    // Do something
    }
    })
    .appendTo( "body" );

    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.

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

    Create some DOM elements.

    1
    2
    3
    4
    5
    6
    7
    8
    $( "<div/>", {
    "class": "test",
    text: "Click me!",
    click: function() {
    $( this ).toggleClass( "test" );
    }
    })
    .appendTo( "body" );
  • 相关阅读:
    欧拉计划之题目2：在斐波那契数列中，找出4百万以下的项中值为偶数的项之和。
    MFC非模态对话框的销毁
    MFC:只允许产生一个应用程序实例的具体实现
    从_tiddata看CRT的线程不安全函数
    关于消息循环的深入分析
    MFC：关于MFC窗口对象（CWnd对象）与Window对象（HWND所指对象）的销毁问题
    使用FindFirstFile和FindNextFile对给定目录下所有文件进行广度优先遍历
    工作线程的消息循环与通信
    MFC和设计模式
    _endthreadex与CloseHandle
  • 原文地址：https://www.cnblogs.com/mouseleo/p/10631818.html
Copyright © 2011-2022 走看看