为什么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 中，a 上的 value 属性li默认为整数/数字类型。至于为什么它将字符串修剪为 4，这是一个谜。