javascript - jquery 将 .val() 放在 DIV 的什么位置？

Question

jQuery(通过 2.1.0 测试的所有版本)允许我在 DIV 对象上调用 .val("some value") 来设置一个值DIV。它不会显示，也不会在 Chrome 开发者工具中显示为 HTML5 数据属性。然而，我可以稍后通过调用 .val() 来获取结果。

例如(来自 http://jsfiddle.net/X2nr6/ ):

HTML:

<div id="mydiv" style="display: none;">Some text</div>
<div id="debug"></div>

Javascript:

$('#mydiv').val('A value attached .');
$('#debug').text( $('#mydiv').val() );

显示结果:

A value attached.

值存储在哪里？不知道它存储在哪里让我担心我依赖黑客。

Answer 1

jQuery 只是分配给一个 value div 上的属性(property)对象( HTMLDivElement 的实例 div )，即使它通常没有一个。在我见过的每个浏览器中都允许在元素上创建新属性，所以它可以工作。我不会使用 val与 divs不过，这是定期的。

Here's一个非 jQuery 示例:

var div = document.createElement('div');
console.log('value' in div); // false, divs don't normally have a value property
div.value = 42;
console.log('value' in div); // true, we've created a property on the element
console.log(div.value);      // 42

或the same sort of thing使用 jQuery:

var $div = $("<div>");
display(typeof $div.prop('value'));
$div.val(42);
display(typeof $div.prop('value'));
display($div.prop('value'));

这种在元素上创建新的、自定义的、非标准属性的业务称为创建“expando”属性。它们可以非常方便。 (例如，jQuery 在内部使用它们来管理 data 缓存和其他一些事情 — 如果您仔细观察您已经设置使用 data 的数据的 DOM 元素，您你会看到一个名称类似于 jQuery1110028597884019836783 的属性；这是 jQuery 用来在 jQuery 的内部数据缓存中查找元素数据的关键。jQuery 不会将 数据 存储在元素的 expando 中，因为IE 垃圾回收问题；它将 key 存储在那里，并将数据存储在 JavaScript 对象中。)