Question

只想知道jQuery中this.value和$(this).val()有什么区别？我意识到，当我console.log this.value和console.log $(this).val()时，它们的结果都是不同的，这意味着this.value≠$(this).val()

Answer 1

在不带任何参数的情况下调用.val()时，结果几乎总是相同。您可以查看源代码here，搜索val: function( value ) {：

val: function( value ) {
    var hooks, ret, valueIsFunction,
        elem = this[ 0 ];

    if ( !arguments.length ) {
        if ( elem ) {
            hooks = jQuery.valHooks[ elem.type ] ||
                jQuery.valHooks[ elem.nodeName.toLowerCase() ];

            if ( hooks &&
                "get" in hooks &&
                ( ret = hooks.get( elem, "value" ) ) !== undefined
            ) {
                return ret;
            }

            ret = elem.value;

            // Handle most common string cases
            if ( typeof ret === "string" ) {
                return ret.replace( rreturn, "" );
            }

            // Handle cases where value is null/undef or number
            return ret == null ? "" : ret;
        }

        return;
    }
    // other logic for when there are arguments

如果该元素确实存在，并且没有valHooks，那么唯一真正可以做任何事情的实质行就是

ret = elem.value;

这将在最后返回。

请注意，您可以在包含 no 元素的jQuery集合上调用.val()，在这种情况下，将返回空字符串。（相反，尝试访问不存在的元素的.value会引发错误）

valHooks用于检索某些无法通过.value访问的元素的值，例如<select>，但这仅与极其古老的过时浏览器有关- 或（如果脚本编写者已手动分配给$.valHooks的属性。

Answer 2

只是想知道jQuery中this.value和$（this）.val（）有什么区别？

这取决于上下文。正确使用后，它们与完全相同，除了textareas ：

目前，在元素上使用.val（）会从浏览器报告的值中去除回车符。但是，当此值通过XHR发送到服务器时，回车符将保留（或由不包含在原始值中的浏览器添加）。

我认为这真的是提出问题：

如果.value做同样的事情，为什么.val（）存在。

这是因为当您使用jQuery选择元素$('#myinput')时，将返回HtmlElements数组，而不是单个元素。在这种情况下，代码将必须使用属性('#myinput')[0].value = ('#myinput').val()对元素进行索引以获得值。因此，val()是一个不错的捷径，在某些情况下提供了一种错误处理。

当集合中的第一个元素为select-multiple时（即，设置了multi属性的select元素），. val（）返回一个数组，其中包含每个选定选项的值。从jQuery 3.0开始，如果未选择任何选项，它将返回一个空数组；否则，它将返回一个空数组。在jQuery 3.0之前，它返回null。

与jQuery选择器一起使用时，它们肯定不是一回事。

this.value和$（this）.val（）有什么区别？

2 个答案: