Question

当我有这样的HTML时：

<input type="text" id="a" value="" />
<input type="text" id="b" />

如果我执行$("#a").val()我无法区分是否存在值且该值为空或者不存在值。有没有办法区分这两种情况？

Answer 1

是的，您可以检查是否存在value属性。

$('#a[value]')这意味着要找到标识为a的元素，该元素也具有属性value

如果您想在选择元素后进行检查，如果它具有value属性，那么

var elem = $('#a');
if ( elem.is('[value]') ) {
  // it has a value attribute
}

Answer 2

您可以使用：

$( '#a' ).is( '[value]' ) // true
$( '#b' ).is( '[value]' ) // false

现场演示： http://jsfiddle.net/simevidas/w8gFF/1/

Answer 3

较旧版本的IE不支持hasAttribute，而Šime Vidas discovered甚至不能在这些浏览器上信任jQuery。

当我在旧版本的IE中需要类似的东西时，我必须这样做的方式是：

function hasAttribute(el, attr) {   
    if ("hasAttribute" in el)
        return el.hasAttribute(attr);

    else if ("outerHTML" in el) {
        return (el.outerHTML
                   // remove content
                   .replace(el.innerHTML, "")
                   // remove attribute values with quotes
                   .replace(/=(?:(["'])[^\1]*\1)?/, " ")
                   // remove attribute values without quotes
                   .replace(/=[^\s>]+/, "")
                   // normalize
                   .toLowerCase()
                   // search for attribute
                   .indexOf(" " + attr.toLowerCase()) > -1);
    }
}

在您的情况下，您可以像这样使用此功能：

var hasValue = hasAttribute($("a")[0], "value");

不幸的是，在Internet Explorer 8及更低版本中，这仍然不是很强大。这些浏览器会针对各种属性返回误报和否定，不幸的是，我不相信有一种解决方法。

Answer 4

这是一个很好的问题，但我认为你不会在IE8或早期中得到任何解决方法。经过一些实验，我想是这样的。顺便说一句，人们可以使用已经安装的IE9或IE10 beta进行实验。应该只使用meta“X-UA-Compatible”来更改文档兼容模式（请参阅here）。

我测试过：

document.getElementById("a").outerHTML = "<input type='text' id='a' value='' />";
alert(document.getElementById("a").outerHTML);

仅限alert(document.getElementById("a").outerHTML)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
</head>

<body>
    <fieldset><input type="text" id="a" value="" /></fieldset>
    <script type="text/javascript">
    //<![CDATA[
        //document.getElementById("a").outerHTML = '<input type="text" id="a" value="" />';
        alert('In IE7 outerHTML for <input type="text" id="a" value="" />:\n' +
            document.getElementById("a").outerHTML);
    //]]>
    </script>
</body>
</html>

如果“IE = 8”，上面的代码会显示文本"<INPUT id=a type=text>"。如果我们将"X-UA-Compatible"的值更改为“IE = 7”，我们甚至会看到"<INPUT id=a">。具有“IE = edge”的相同代码显示<input id="a" value="" type="text">。相应的演示位于：IE=edge，IE=8，IE=7。

因此，在解析HTML时，IE似乎会进行某种“优化”。 outerHTML获取的属性的顺序和大小写与原始代码不同。 IE使用“优化”解析HTML代码，我们后面看到的不再是value=""。因此，没有jQuery的技巧可以帮助我们不再获得现有的属性。

如何区分空字符串和不存在的值？

4 个答案: