jquery - 如何将属性对象绑定到现有元素？

Question

在 jQuery 中，您可以一步创建新元素并在其上定义属性：

$("<div>", {title: "Hey there!", text: "I'm a DIV!"});

这会产生：

<div title="Hey there!">I'm a DIV!</div>

有没有办法对现有元素做同样的事情？以下不起作用：

$("#theDiv", {title: "Hey there!", text: "I'm a DIV!"});

Answer 1

事实证明事情相当容易。jQuery.attr()用于此。

$("#theDiv").attr({title: "Hey there!", text: "I'm a DIV!"}, true);

注意第二个参数设置为true。这导致 jQuery 使用与新创建的元素相同的机制。

甚至函数参数也按预期工作：

$("#theDiv").attr({
    title: "Hey there!", 
    text: function () { return "some calculated value"; }
}, true);​

（见这个jsFiddle。）

因此，这也适用于事件绑定、CSS 修改和 jQuery 可以做的所有其他事情：

$("#theDiv").attr({
    title: "Hi there", 
    text: function (i, v) { return v.replace(/not /, ""); },
    mouseover: function () { $(this).css({color: "red"}) },
    mouseout: function () { $(this).css({color: ""}) },
    css: { fontSize: "20pt", fontStyle: "italic" }
}, true);​

（见这个jsFiddle。）

这是未记录的，因此它可以在任何 dot 版本中更改而不会在发行说明中列出，但似乎不太可能，并且在升级 jQuery 时很容易测试它。