javascript - 为什么input的属性值=text，而li的属性值=number？

Question

http://jsfiddle.net/3GTtF/2/

<ul>
    <li class="first" value="45">fortyfive</li>
    <li class="second" value="4text5">45</li>
</ul>

<input value="45">

---

var whatIsValue = $('.first').val();            //  = 45     typeof = number
var whatIsSecondValue = $('.second').val();     //  = 4      typeof = number
var whatIsInputValue = $('input').val();        //  = '45'   typeof = string

为什么 var whatIsSecondValue = 4 而不是 '4text5'

为什么 var whatIsInputValue = '45' 而不是 45

Answer 1

至于为什么我不确定，但是 li 标签不应该有 value 属性。您应该改用 data-* 属性。它是无效/不正确的 HTML 语法。

如下图

<ul>
    <li class="first" data-value="45">fortyfive</li>
    <li class="second" data-value="4text5">45</li>
</ul>


var whatIsValue = $('.first').data('value');
var whatIsSecondValue = $('.second').data('value'); // = 4text5 typeof = string
var whatIsInputValue = $('input').val();

更新

显然在 HTML5 中曾经可以使用 value 属性，请参阅下面的评论。在这种情况下，您可以使用 .prop() 或 .attr() 方法来解决此问题。

另一个更新

因为在 HTML5 中，li 的值属性默认是整数/数字类型。至于为什么将字符串 trim 为 4，这是一个谜。