Question

有人可以向我解释下面这个jQuery片段中可能会发生什么吗？

        var tileDiv = $('<div/>', { 'class': 'tile', 'text': this.name, 'id': this.tileId });
        tileDiv.css('border-top', '5px solid ' + this.scenes[sceneId].borderColor);
        tileDiv.data(this);

对我来说，看起来tileDiv设置为jQuery对象，其中包含两个值 - <div/>，逗号后面的第二个位。但是，并非100％确定tileDiv.data(this)电话会发生什么。感谢您的澄清或最佳猜测。

Answer 1

代码正在创建一个新的div，其属性在第二个参数中传递，并将jQuery对象存储在tileDiv中：

var tileDiv = $('<div/>', { 'class': 'tile', 'text': this.name, 'id': this.tileId });

然后添加border-top CSS属性：

tileDiv.css('border-top', '5px solid ' + this.scenes[sceneId].borderColor);

至于最后一行，.data函数允许您存储和检索与该jQuery对象关联的数据。它还可用于从元素上的HTML5 data-属性中检索信息。在这种情况下，this的所有成员都将存储在tileDiv的数据中。如果你有：

this.someData = 99;
this.otherData = 87;
tileDiv.data(this);

然后tileDiv.data('someData')将返回99而tileDiv.data('otherData')将返回87，如您在this jsFiddle中所见。

请在此处查看jQuery .data的文档：.data jQuery API。

Answer 2

Data是一个JQuery命令，用于在DOM对象中存储元数据：http://api.jquery.com/data/数据可以是您喜欢的任何内容。您添加如下数据：

tileDiv.data(key, object_with_data)

并像这样检索它：

var tileDiv.data(key);

所以是的，看起来上面的内容会检索数据，但不会对它做任何事情。

Answer 3

data是HTML属性的HTML 5前缀。如果我们知道你的上下文中的this是一个像“hello”这样的基本字符串，那么jQuery会尝试获取名为data-hello的属性HTML属性。但是你可以看到你的对象没有任何属性，所以没有任何事情发生。

等于写

 $(titleDiv).attr("data-" + this)

Answer 4

第一行创建一个新div，设置id和class属性，然后设置div的内部文本。

第二行设置顶部边框样式。

第三行将数据附加到新div上，该div等于this对象的所有属性，我猜测它是通过new Something构造函数创建的Javascript对象，尽管它也可以是普通的对象

因此，如果this.answer = 42，tileDiv.data("answer")的结果在第三行执行后也将为42。

复制this的所有属性似乎有点浪费，但最好说tileDiv.data("tileInfo", this)，但如果没有看到更多代码则很难说清楚。

jQuery对象 - 下面的代码会发生什么？

4 个答案: