jQuery 1.9.1 属性选择器

Question

背景

自从jQuery 1.9版本开始，.attr(..)方法不再返回属性值，而是现在我们必须使用.prop(..)。不幸的是，这也适用于通过属性选择器指定的属性，即$("input[value=]")。

参见http://jquery.com/upgrade-guide/1.9/#attr-versus-prop-和一个关于.attr和.prop之间差异的很好的SO讨论：

.prop() vs .attr()

我的情况

我目前正在使用像$("input[value=]")和$("select[value=]")这样的选择器来选择没有设置值的输入元素。然而，这在jQuery 1.9中不再起作用，现在我正在做类似下面这样的事情：

var hasValue = function () { return !!($(this).val().length); };
var hasNoValue = function () { return !($(this).val().length); };
$("input").filter(hasValue);
$("select").filter(hasValue);

我的实际选择器稍微复杂一些，可以检查具有或不具有值的多个元素，所以现在我不得不将我的一个选择器字符串拆分成多个选择器，并在这些选择器之间使用.filter(...)方法调用。

问题

是否有与$("[value=]"), $("[value!=]"), $("[value='abc']")等效的，但使用属性而不是属性的方法？如果没有，是否有更简洁的方法来使用.filter(hasValue)和.filter(hasNoValue)方法？

谢谢

- Walter

---

看起来对我来说很干净 - 可能比你以前的解决方案更好（因为你以前的解决方案只能在DOM初始化时设置值，而你当前的解决方案考虑了是否有用户输入） - ahren

应该是[value]而不是[value=]，两者都可以吗？ - Chris Laplante

对我来说完全正常 -> FIDDLE，应该是[value=""]而不是[value]，因为后者会选择任何具有值属性的元素。 - adeneo

$('input, select, textearea').filter(function(){ return !!this.value; }) - Fabrício Matté

@HaralanDobrev - 好的，我可能误解了，“attributes starts with”选择器似乎从来没有与除初始值以外的任何内容一起使用过，所以就这方面而言多年来什么也没有改变？ - adeneo

Answer 1

使用.filter似乎是唯一的方法，但这并不太糟糕，实际上可以通过使用.val使其更加准确:

使用.filter看起来是唯一的办法，但并不是太糟糕，而且通过使用.val，你实际上可以让它变得更加精确：

$(":input").filter(function () { return $(this).val() === ""; });

如果这对你来说真的很不可接受，你可以创建一个自定义选择器。

$.expr[':'].emptyInput = function (elem) {
    return $(elem).is(":input") && $(elem).val() === "";
};

http://jsfiddle.net/ExplosionPIlls/zaZPp/

编辑：您也可以尝试使用this.value而不是$(elem).val()。

- Explosion Pills

---

是的，自定义表达式正是我想要的。这只是一种偏好，但我认为像 $("input:emptyInput") 这样的单个表达式对于下一个编码者来说更容易理解。谢谢。 - Walter

Answer 2

根据升级指南：

然而，当使用像"input[value=abc]"这样的选择器时，它应该总是通过value属性进行选择，而不是用户所做的任何属性更改，例如从文本输入中键入。自jQuery 1.9以来，这个行为是正确和一致的。早期版本的jQuery有时会在应该使用属性时使用属性。

所以这回答了你的第一个问题 - 没有直接的等价物，关键是要使用属性而不是属性。

你的代码看起来很好，但如果你想更加标准化和可重用，你可以创建一个额外的过滤器。就像这样：

(function($) {
    $.expr[':'].hasValue = function(element) {
        var $element = $(element);
        return element.is(':input') && element.val();
    };
}(window.jQuery));

这将允许您选择类似于此的内容：

// Select input elements with value and select elements without value.
$('input:hasValue,select:not(:hasValue)');

还有其他您需要的各种组合。

- Haralan Dobrev

---

我在升级指南中读到了那段话，但它让我感到沮丧，因为它没有为那种情况提供替代方案。我希望有一些等效的属性语法，比如 $("input{value=abc}")。但是定义自己的表达式也同样好。+1，因为这正是我想要的答案。 - Walter

Answer 3

我发现了这个问题，并想要贴出我发现的另一个解决方案，它在某些情况下可以起作用，而其他建议的解决方案可能不合适。

只需将此事件处理程序添加到您的代码中即可。

    $('input').on('keyup', function(){  
        var value = $(this).val();
        $(this).attr('value', value);
    });

- David Healey