元素vs $(‘# getElementById’)以获取输入字段长度

Question

给定输入字段：

<input type="text" id="papaya">

为什么这是可行的

$(document).ready(function () {
    alert($('#papaya').val().length);
});

但这不是吗？

$(document).ready(function () {
    var pp = document.getElementById('papaya');
    alert(pp.val().length);
});

Answer 1

因为在第一个示例中，pp是对jQuery对象的引用，而在第二个示例中，它是对DOM元素的直接引用，该元素没有像val这样的jQuery方法，但具有自己的方法和属性，包括.value

$(document).ready(function () {
    var pp = document.getElementById('papaya');
    alert(pp.value.length);
    // -----^^^^^^^
});

Answer 2

使用javascript的值：

alert(pp.value.length);

Answer 3

在普通的js中，你需要使用value而不是val()。val()函数是jQuery自己实现。

​

var pp = document.getElementById('papaya');
console.log(pp.value.length);

<input type="text" id="papaya" value="123">

​