jquery在哪里放置.val（）在DIV上？

Question

jQuery（通过2.1.0测试的所有版本）允许我在.val("some value")对象上调用DIV来设置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的{​​{3}}实例）上的div属性，即使它通常没有。{1}}。在我见过的每个浏览器中都允许在元素上创建新属性，因此它可以工作。不过，我不会定期将val与divs一起使用。

HTMLDivElement非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

或Here's使用jQuery：

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

在元素上创建新的，自定义的，非标准属性的业务称为创建“expando”属性。他们可以非常方便。 （例如，jQuery在内部使用它们来管理data缓存和其他一些东西 - 如果仔细查看使用{{1} 设置数据的DOM元素}，你会看到一个名为data的属性;这是jQuery用来在jQuery的内部数据缓存中查找元素数据的关键.jQuery不会将数据存储在由于IE垃圾收集问题，在元素上展开;它将密钥存储在那里，数据存储在JavaScript对象中。）

Answer 2

它将它存储在DOM对象的value属性上。您可以通过运行代码然后检查DOM检查器中的元素来查看。在Chrome中，value属性将列在属性标签中的div#mydiv下。

HTMLDivElement对象不正式支持这样的属性，因此您依赖于黑客攻击。

使用data()在元素上存储任意数据。

$('#mydiv').data("myCustomValue", 'A value attached .');

Answer 3

虽然上述答案是准确的，但我想完成一些事情。

jQuery是围绕在jQuery对象中包装所有HTML元素的概念而设计的。该jQuery对象恰好是一个可以容纳多个元素的数组。

jQuery也不遗余力地向你隐瞒这个事实，以便普通的jQuery开发人员永远不必担心他拥有的东西 - 简单地调用正确的方法并发生魔术。

（如果你做$(".someClassYouHaveLotsOf").hide()或$（＆＃34; .someClassYouHaveNoneOf＆＃34;），你会看到这一点.hote（）`。）

jQuery的val()方法只是访问HTML input元素value属性的包装器。由于jQuery不会抛出错误，除非真的没有办法，所以它通过访问它碰巧拥有的任何HTML元素的value属性来默默地帮助你。 div span或其他。

在大多数浏览器中，这都有效 - 大多数情况下都足够了。

如果您真的对设置HTML元素的值感兴趣以供日后使用，data()方法更适合。直接HTML将使用<element>.setAttribute("data-key", "value");

那是你唯一一次看到我在属性上使用HTML属性，BTW。