jQuery 1.9.1属性选择器

时间:2013-03-20 00:46:05

标签: javascript jquery html jquery-1.9

背景

从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);

我的实际选择器有点大,检查有或没有值的多个元素,所以现在我不得不将我的1选择器字符串拆分成多个选择器,其间有.filter(..)方法调用。

问题

是否有使用属性而不是属性的$("[value=]")$("[value!=]")$("[value='abc']")?如果没有,是否比使用.filter(hasValue).filter(hasNoValue)方法更清洁?

由于

3 个答案:

答案 0 :(得分:12)

使用.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()

答案 1 :(得分:1)

根据upgrade guide

  

但是,当使用像“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)');

您需要的其他各种组合。

答案 2 :(得分:0)

我遇到了这个,只是想发布另一个我发现的解决方案,这些解决方案适用于某些其他一些建议的解决方案不合适的情况。

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

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