this.value 和 $(this).val() 有什么区别?

Question

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

Answer 1

当你调用没有参数的.val()时，结果几乎总是相同的。你可以在这里看到源代码，搜索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;

然后将在最后返回。

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

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

Answer 2

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

这取决于上下文。 如果使用得当，除了文本区域外，它们完全相同：

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

我认为这确实引出了一个问题：

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

这是因为当你使用jQuery选择一个元素$('#myinput')时，你会得到一个HtmlElements数组，而不是单个元素。 在这种情况下，代码必须索引元素才能使用属性('#myinput')[0].value = ('#myinput').val()获取值。 因此val()是一个很好的快捷方式，并在某些情况下提供了一种错误处理。

当集合中的第一个元素是选择多重(即，具有多重属性集的选择元素(时，.val(( 返回一个包含每个选定选项值的数组。从 jQuery 3.0 开始，如果未选择任何选项，它将返回一个空数组;在 jQuery 3.0 之前，它返回 null。

当与jQuery选择器一起使用时，它们绝对不是一回事。