Question

我有一个带有一些输入和附加CSS的表单，它使用属性值选择器根据值更改输入的背景颜色。

实施例

<!DOCTYPE html>
<html>
  <head><style>
    input[value="foo"] { background-color: red; }
  </style></head>
  <body>
    <form>
     <input value="foo" />
     <button/>
    </form>
  </body>
</html>

如果我在加载时使用foo作为值，就像在代码中一样，加载时字段将为红色，但如果我更改它，它将保持红色。如果我将输入的值更改为foo，它也不会改变背景颜色。

同样如果我在jQuery中使用.val()。显然是一个动态的＆＃34;在这些情况下，值会发生变化，而CSS则指的是＆＃34;静态＆＃34;值。

$('button').on('click', function(ev) {
  ev.preventDefault();
  $('input[value="foo"]').val('bar');
  // $('input[value="bar"]').val('baz'); // nothing is found
});

我希望此代码将字段从foo更改为bar，然后将bar更改为baz，但在第二个选择器中则找不到字段。

如果我使用attr方法，事情似乎有效，但在jQuery文档中（以及SO上的许多答案），val是可行的方法。

为什么会这样，为什么我要使用val()？

Answer 1

“为什么会这样......”

这是一个属性选择器，更新.value属性时属性不会更改，因此您需要显式更改属性。

$('button').on('click', function(ev) {
  ev.preventDefault();
  $('input[value="foo"]').val('bar').attr("value", "bar");
  $('input[value="bar"]').val('baz');
});

input[value="foo"] {
  background-color: red;
}

input[value="bar"] {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<form>
  <input value="foo" />
  <button/>
</form>

但是，当用户更改值时，除非您连接.on("input"...处理程序以使属性与属性保持同步，否则这不会起作用。

$("input").on("input", function() {
  this.setAttribute("value", this.value);
});

input[value="foo"] {
  background-color: red;
}

input[value="bar"] {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<form>
  Change the value to "bar"
  <input value="foo" />
</form>

“......为什么我要使用val()？”

只需通过属性保留原始值即可获取和设置值。

要求它们同步并不是那么常见。按值选择DOM有点像文本内容的DOM选择。它不是经常需要的，有时候有更好的方法可以解决问题。

Answer 2

input[value="foo"]

选择input元素，这些元素具有等于value的明确属性 foo。

在foo元素中键入input不会创建此类属性，也不会在{{>上键入任何其他删除属性1}}具有属性input。

jQuery＆＃39; value="foo"是读取值的正确方法，问题是您的选择器val()无法找到任何内容，因为设置值属性 $('input[value="bar"]')不会更改/添加属性。

Answer 3

我希望这段代码解释得很好

＆＃13;

$input = $('input')

console.log('val:', $input.val())
console.log('attr:', $input.attr('value'))

// attr will get the attribute from html not the *dynamic* value has been set
$input.val('bar')
console.log('val:', $input.val())
console.log('attr:', $input.attr('value'))

// same here when you use val you change the property value of input not the attribute
$input.attr('value', 'bazzz')

console.log('val:', $input.val())
console.log('attr:', $input.attr('value'))

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="foo" />

＆＃13;

Answer 4

对于那些了解HTML技术的人来说，我当然是错的，但是出于我自己的直觉，我总是想到HTML文件中作为属性的任何内容以及之后的任何值作为属性（我猜你可以称之为运行时值）。如果你想要更深入的了解，你需要谷歌它，因为我只是没有这样的知识:)请记住，我的总结在这里非常简单。

您可以进行以下实验。在Chrome上，如果按Ctrl + J（抱歉，我不知道其他浏览器的组合是什么），您可以弹出javascript控制台。在那里，输入

$("input[value=foo]").val("bar");

然后转到DOM资源管理器，注意值属性未更改。要更改它，您需要使用函数

$("input[value=foo]").attr("value","bar");

然后，您将能够实现您正在寻找的目标。

如何正确使用jquery val（）来匹配CSS选择器

4 个答案: