2

所以，我知道如何以各种方式在 jQuery 中创建元素。但在今天之前我从未遇到过这个：

    var myspacer = $('<div />', {
        "id": "nav-spacer",
        "height": mynav.outerHeight()
    });

稍后在代码中，使用 jQuery 的 .before() 方法将此变量添加到 DOM。有人可以解释这里发生了什么吗？正在创建什么样的对象？jQuery 是如何知道如何将其转换为 HTML 元素的？

4

4 回答 4

5

这就是函数$( html, props )的语法——在API 文档中解释得很清楚：jQuery()

html定义单个、独立的 HTML 元素（例如<div/>或<div></div>）的字符串。

props用于调用新创建元素的属性、事件和方法的映射。

如果函数确定第一个参数是一个看起来像 html 片段的字符串，它会从该片段创建一个新元素（或多个元素）。如果您在第二个参数中传递映射，它将在新创建的元素上创建指定的属性。

新元素不会自动添加到文档中，但您似乎已经看到了，因为您提到了添加它的.before()代码。

于 2012-07-20T03:10:11.573 回答
3

根据 jQuery$( html, properties)语法，上面的代码创建了一个divwithid="nav-spacer"和height提供的mynav.outerHeight()方法，没有任何内容作为 jQuery 对象，但没有添加到 DOM。

其中$( html, properties)，html是字符串，properties是属性/事件等的集合。

另一种方法可能是：

var myspacer = $('<div id="nav-spacer" height="'+ mynav.outerHeight() +'"></div>');

但是您的那个更具可读性和效率。

在作为参数传递的选择器之前将using.before()方法添加到 DOM。例子：myspacer.before()

myspacer.before('div.hello');

将在withmyspacer之前添加：divclass=hello

<div id="nav-spacer" height="some_value"></div>
<div class="hello"></div>
于 2012-07-20T03:06:10.720 回答
2

如果你传入 HTML，jQuery 会创建一个新元素，$('<div/>')因为它很聪明。:P 它识别出字符串是 HTML（而不是选择器）并区别对待。请参阅文档。

新元素已创建但不会添加到 DOM，直到您自己添加它，例如。与appendTo().

来自文档：“为确保跨平台兼容性，片段必须格式正确。可以包含其他元素的标签应与结束标签配对。”

编辑：我的立场是正确的，你可以$('<div/>') 在没有明确的结束标签的情况下编写。只要 HTML 不包含嵌套元素（当然），它就可以工作。请参阅文档中的其他示例：

// With nested elements and closing tags - HTML must be well formed
$("<div><p>Hello</p></div>").appendTo("body");

// Without closing tag - HTML is still well formed
$("<div/>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");

类似的问题：

于 2012-07-20T03:05:59.397 回答
1

http://api.jquery.com/jQuery/#jQuery2

这应该给你你正在寻找的解释=D。

总而言之，它是一种快速的 JQuery on-the-fly 元素创建方法。

于 2012-07-20T03:08:24.147 回答