为什么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中，一旦可以使用值属性，请参阅下面的注释。在这种情况下，要解决此问题，您可以使用.prop（）或.attr（）方法。

另一次更新

因为在HTML5中，li上的value属性默认为integer / number类型。至于为什么它将字符串修剪为4，这是一个谜。

Answer 2

如果你要错误地使用.val()，你会得到奇怪的结果。

如果您开始使用value=""中的li，要访问它，您必须使用.attr("value")

查看更新的小提琴http://jsfiddle.net/3GTtF/3/

Answer 3

当你执行parseInt('4text5')时它也会返回4，因为这就是这个函数的工作原理。 http://www.w3schools.com/jsref/jsref_parseint.asp

我猜jqueries val（）方法在某处使用parseInt，但我不确定。肯定是类似的。

同样有意义的是列表的值是整数，输入字段（类型文本）的值是字符串。不是吗？

javascript / jquery可能不会检查您实际放入该字段的类型。如果你想要一个输入字段中的数字，你需要将类型设置为数字<input type="number">，这就是为什么有那么多“有意义的”html元素。 javascript期望您将这些元素用于它们的设计目标。

提取值的方式（如字符串，数字，日期等）取决于HTML（或其他标记语言）。

所以我想的越多，根据dom元素类型，.val（）方法返回特定的“类型”就越有意义。

• li - ＆gt;默认值是整数（它是一个具有已定义数量的li元素的列表，因此奇怪/奇怪它将是一个字符串）
• 输入[文字] - ＆gt;字符串
• 输入[编号] - ＆gt;整数

Answer 4

您可以使用getAttribute方法： http://jsfiddle.net/chace/t2HCH/61/

var new1Txt = $(".first").text();
var new1Val = $(".first").val();
var new2Txt = $(".second").text();
var new2Val = $(".second").val();
var new2Real = x = document.getElementsByClassName("second");
var new2JQ = $(".second");

$(document).ready(function () {

    $(".container").append("<p>" + new1Txt + "</p>");
    $(".container").append("<p>" + new1Val + "</p>");
    $(".container").append("<p>" + new2Txt + "</p>");
    $(".container").append("<p>" + new2Val + "</p>");
    $(".container").append("<p>" + new2Real[0].getAttribute('value') + "</p>");
    $(".container").append("<p>" + new2JQ[0].getAttribute('value') + "</p>");

});