为啥 jQuery.val() 的行为与 jQuery 的其余部分不同

Posted 2023-03-15

【中文标题】为啥 jQuery.val() 的行为与 jQuery 的其余部分不同

【英文标题】：Why does jQuery.val() behave differently to the rest of jQuery为什么 jQuery.val() 的行为与 jQuery 的其余部分不同

【发布时间】：2012-07-05 10:17:45

【问题描述】：

通常在 jQuery 无法使用其选择器找到匹配元素的情况下，默认值绝不是例外，而是缺少操作。

我的理解是这是通过设计来确保缺少元素不会导致错误情况。但是我发现jQuery.val() 没有表现出同样的行为。如果所选元素不存在 jQuery.val() 将返回 undefined 而不是空字符串（这与我所期望的框架的其余部分保持一致）。

那么为什么jQuery.val() 是框架其余部分的例外，改变这种行为的最佳方法是什么？

【问题讨论】：

我不会考虑返回 undefined 一个“错误条件”。此外，prop、attr 和 data 的行为方式与 val 相同。

好吧，如果您使用这样的链接语法... $(".Field").val().IsNullOrEmpty()

($(".Field").val() || '').IsNullOrEmpty()

这对我来说似乎很合乎逻辑，因为它在访问不存在元素的（显然未定义的）值和仅访问空值之间有所不同。

【参考方案1】：

这里的关键是 jQuery 方法的可链接性。 A jQuery method doesn't return undefined when a selector doesn't match anything because it would break the chain.考虑：

$( '#doesntExist' ).addClass( 'foo' ).fadeIn();

如果不匹配任何内容的选择器将返回undefined，它将破坏链，因为undefined 没有自己的任何方法。现在，无论是否找到元素，每个方法都会执行（并且什么也不做）。

另一方面，

.val() 则不同，因为它的目的是返回元素的值。与许多其他 jQuery 方法不同，它根本不链接，因为方法必须返回一个 jQuery 对象才能链接。例如，$( '#foo' ).val().addClass( 'bar' ) 不起作用无论元素 #foo 是否存在。

在这种情况下，.val() 返回一个空字符串将不再符合可链接方法，因为当找不到元素时没有其他方法返回空字符串，并且返回 undefined 不会破坏可链接性因为该方法一开始并没有链接。

（顺便说一句，每个返回值的方法都是如此，例如.css() 和.data()。）

通常知道元素的值是否为空或元素是否根本不存在会更有用，但如果您希望始终返回字符串，您可以添加自己的方法：

$.fn.stringVal = function() 
    return( this.val() || '' );
;

【讨论】：

非常感谢您的简洁回复和示例

【参考方案2】：

如果我使用.val() 获取项目的值，我希望该项目存在。如果没有，我需要知道这一点。在这种情况下返回 undefined 似乎是最好的方法。

正如@Ricardo 所指出的，.val() 在其他情况下的表现也不同，具体取决于输入。

【参考方案3】：

jQuery.val() 返回输入的值（或“选择”的选定选项）