5

附加到元素与有什么区别

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

或者

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

和

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

或者

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

这个斜线的目的是什么/。

将这个元素转换为 jQuery 元素的目的是什么$？

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

4

3 回答 3

4

一种是完整的有效代码，保证现在和将来在所有浏览器中都能正常工作，另一种是不完整的，在某些极端情况下可能无法工作。

要清楚，你想要'<div/>'

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

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

"<div>"vs"<div />"在 api 中有很好的记录。http://api.jquery.com/jQuery/#jQuery2

"<div>"vs"<div/>"是一个非常简单的案例，现在和将来“应该”在所有浏览器中都可以使用，但是如果您变得更复杂，那么您将遇到跨浏览器解析 html 的差异的问题。

于 2012-10-09T15:54:09.070 回答
3

一样的：

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

// 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>第一个控件仅检查字符串长度> = 3的开始字符<和结束>字符。

parseHTML 方法再次执行正则表达式，因此选择器是标签的名称。

于 2012-10-09T16:18:56.753 回答
1

我认为这四个选项之间没有太大区别。jQuery 在处理发送的参数时非常灵活。

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

但是，您应该了解以下之间的区别：

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

第一个生成：

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

第二个：

<div></div><span class="inner"></span>
于 2012-10-09T15:59:09.930 回答