我有一个带有一些输入和附加到它们的 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()。显然在这些情况下更改了“动态”值，而 CSS 指的是“静态”值。
$('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()？
最佳答案
"Why is it so..."
这是一个属性选择器，当您更新 .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>"...and why shall I use
val()at all?"
简单地获取和设置值，同时通过属性保留原始值。
需要同步它们并不是那么常见。按值选择 DOM 有点像按文本内容选择 DOM。只是并不经常需要它，有时有更好的方法来解决问题。
关于javascript - 如何正确使用 jquery val() 来匹配 CSS 选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49052535/