Question

使用

附加元素有什么区别

$('#my_parent_element').append('<div>');

或

$('#my_parent_element').append($('<div>'));

并且

$('#my_parent_element').append('<div/>');

或

$('#my_parent_element').append($('<div/>'));

此斜杠的目的是什么/。

使用$将此元素转换为jQuery元素的目的是什么？

为什么jQuery能够以这种方式附加元素？

Answer 1

一个是完整的有效代码，并保证现在和将来在所有浏览器中都可以使用，另一个是不完整的，在某些边缘情况下可能无效。

要明确，您需要'<div/>'

jQuery只能创建/操作元素，而不能打开和关闭标签。处理后，在DOM中，元素不再由开始和结束标记表示，它们表示为树结构中的节点。

就.append("<div />")与.append( $("<div />") )而言，两者之间几乎没有差别。两者都执行相同的操作。

api中详细记录了"<div>" vs "<div />"。 http://api.jquery.com/jQuery/#jQuery2

"<div>" vs "<div/>"是一个非常简单的案例，“应该”现在和将来都适用于所有浏览器，但是如果你变得更复杂，那么你将遇到麻烦浏览器在如何解析html方面的差异。

Answer 2

它是一样的：

来自构造函数方法中的jquery source

// Match a standalone tag
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,


jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    init: function( selector, context, rootjQuery ) {
    //cut
            if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
            // Assume that strings that start and end with <> are HTML and skip the regex check
            match = [ null, selector, null ];

            }
    //cut
            // scripts is true for back-compat
            selector = jQuery.parseHTML( match[1], doc, true );
            if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
                    this.attr.call( selector, context, true );
            }
    // cut
    }
    //CUT
    parseHTML: function( data, context, scripts ) {
        // Single tag
        if ( (parsed = rsingleTag.exec( data )) ) {
            return [ context.createElement( parsed[1] ) ];
        }
    }

正如您所看到的，rsingleTag正则表达式匹配<div/>和<div>，第一个控件只检查字符串的开始<和结束>字符串长度＆gt; = 3。

parseHTML方法再次执行regexp，因此选择器是标记的名称。

Answer 3

我认为这4个选项中的任何一个都没有太大的不同。在处理发送的参数时，jQuery非常灵活。

当只有1个标签时，它们之间没有区别。

但是，你应该理解：

之间的区别

<div><span class="inner"> and <div/><span class="inner"/>

第一个产生：

<div><span class="inner"></span></div>

和第二个：

<div></div><span class="inner"></span>

Jquery - 选择器$（<div>）和$（<div>）区别</div> </div>

3 个答案: