jQuery中的":[]"选择器是什么？

Question

给定一个SELECT元素：

<select>
    <option>foo</option>
    <option>bar</option>
    <option>baz</option>
</select>

我希望选择值为“bar”的OPTION元素。

这种方法行不通：

$('option[text="bar"]').attr('selected', true);

However, this does work:

$('option:[text="bar"]').attr('selected', true);

为什么？

在线演示：http://jsfiddle.net/YbfqZ/2/

- Šime Vidas

---

记住，jQuery 在最近几个版本中有所改变。因此，您不应该引用属性 input[name=dog_type]:radio。以前它看起来像这样 input[@name="dog_type"]。有很多旧的教程仍然有引号和@符号，但现在已经不再起作用了。 - Tobias

不对，相反了。之前引号是可选的，现在是必须的。文档中有说明：http://api.jquery.com/attribute-equals-selector/。 - Šime Vidas

我真的说错话了。昨天我遇到了一个问题，当我拿了一些旧的jQuery代码，并且以为通过去掉引号来修复它。 - Tobias

Answer 1

那种行为的原因是由于冒号打破了querySelectorAll的选择器，因为它不是有效的。因此，它默认为Sizzle，尽管它在技术上不支持（这意味着它可能会在将来被取消）。Sizzle将检查属性和属性值。因此，它将无法找到text属性，但它将找到<option>元素的text属性。这里有一个示例，演示了Sizzle将匹配属性而不仅仅是属性值的attribute-equals选择器。

---

示例代码：

  // set a custom property on the last option
$('#id option').slice(-1)[0].customProp = 'customValue';

  // breaking the selector with : we default to Sizzle,
  //    which matches our custom property
$('#id option:[customProp="customValue"]').attr('selected', true);

---

编辑：我的示例链接之前引用了别人的示例，因为我打错了修订号。已经修复。

- user113716

---

然而，为什么jQuery在没有冒号的情况下无法识别选择器呢？在CSS2和CSS3中，引号属于选择器，而冒号不属于。 - eykanal

@jAndy：谢谢。有趣的是，我刚刚在这个答案下留了评论，然后看到Šime把它变成了一个问题。 - user113716

@eykanal：这就是关键。没有冒号，它就是一个有效的选择器，因此Sizzle默认使用querySelectorAll，它只查找属性（应该如此）。Sizzle混淆了属性和属性值之间的区别，并且将匹配任何一个。 - user113716

@patrickdw：这是否意味着这是Sizzle的一个错误，或者说Sizzle默认情况下不允许较宽松的匹配？ - eykanal

@eykanal：好问题。我不知道这是否是一个错误。我的意思是，你可以把允许放错位置的:看作是一个错误，但这是一个防止代码出错的错误。至于匹配属性而不仅仅是属性值，我猜那一定是他们的意图。有很多Sizzle特性是无效的CSS，例如:eq() :has() :first :last等等。我倾向于避免使用它们，因为如果我计划我的代码只围绕有效的选择器，那么在支持qsa的浏览器中，整体的性能将更好。 - user113716

@Šime Vidas：确实如此。如果我在选择器中遇到奇怪或不一致的行为，我会慢慢学习先针对qsa运行测试。 - user113716

Answer 2

正确的做法是给SELECT添加一个id，给OPTION项添加值。然后你可以设置选择框的值。

<select id="theSelect">
    <option value="foo">foo</option>
    <option value="bar">bar</option>
    <option value="baz">baz</option>
</select>

而 JS 代码则会如下所示

$('#theSelect').val('foo');

Live Demo http://jsfiddle.net/YbfqZ/4/

- Dutchie432

---

:[text="bar"] 是什么类型的选择器？ - Šime Vidas