为何使用$"*[id*=foo]".val()？与jQuery ID选择器有何差异？

嘿，咱们来好好拆解一下你看到的这个写法，搞清楚它的来龙去脉，还有和标准ID选择器的异同～

一、为啥会用这种写法？ #

这个是jQuery里的属性包含选择器，它的核心作用是：匹配所有id属性值里包含"foo"这个子串的元素。人们用它主要是这俩场景：

• 批量选元素：比如页面上有一堆元素的id是foo-01、bar-foo、my_foo_item这种带"foo"的，总不能一个个写$("#foo-01")、$("#bar-foo")吧？用这个选择器就能一次性捞到所有符合条件的元素。
• 适配动态id：有时候后端生成的id是带动态后缀/前缀的，比如foo_12345（12345是随机数），但固定包含"foo"，这时候用模糊匹配就能精准定位到目标元素，不用管动态部分是什么。

二、和标准jQuery ID选择器$("#foo")的相似点？ #

其实两者本质都是jQuery用来定位DOM元素的工具，核心目标一致，而且都能链式调用jQuery的方法——不管用哪种选择器选中元素后，都能调用.val()、.click()这些方法，比如都能拿元素的值、给元素加点击事件，这是它们最基础的共性。

三、二者的核心差异 #

这部分是重点，得掰扯明白：

• 匹配规则天差地别：
  • $("#foo")是精准匹配，只会选中id严格等于"foo"的元素（HTML规范里id是唯一的，所以理论上最多选到一个元素）。
  • $("*[id*=foo]")是模糊匹配，会选中所有id里包含"foo"子串的元素，可能是一个，也可能是N个。另外前面的*表示匹配任意标签类型，你也可以换成具体标签，比如div[id*=foo]就只选带foo的div元素。
• 性能差距很大：
  • $("#foo")性能拉满，因为jQuery会直接调用浏览器原生的document.getElementById()方法，这是浏览器内置的最快元素查找方式之一，几乎瞬间就能定位到元素。
  • $("*[id*=foo]")性能就拉胯多了，它需要遍历整个DOM树的所有元素，挨个检查id属性里有没有"foo"，页面元素越多，这个过程越慢。
• 返回结果数量不同：
  • $("#foo")返回的是单个元素的jQuery对象（就算没找到，也是空的jQuery对象，但逻辑上最多一个）。
  • $("*[id*=foo]")返回的是匹配到的所有元素的jQuery集合，可能包含多个元素，如果要操作每个元素，得用.each()遍历才行。

举个实际例子更直观：
假设页面有这些元素：

<input id="foo" value="精准匹配的输入框">
<input id="foo-user-123" value="带foo的用户输入框">
<div id="bar-foo-baz">包含foo的div</div>

• $("#foo").val()会返回"精准匹配的输入框"，只选中第一个输入框。
• $("*[id*=foo]").val()会返回第一个匹配元素的值（也就是"精准匹配的输入框"），但这个选择器其实选中了三个元素，要是想操作所有匹配元素，得这么写：

  $("*[id*=foo]").each(function() {
    console.log($(this).val() || $(this).text());
  });
  

小补充：如果想匹配id以foo开头或者结尾的，还有更精准的属性选择器：[id^=foo]（开头）、[id$=foo]（结尾），它们的性能比*=好一丢丢，但还是远不如精准ID选择器。

内容的提问来源于stack exchange，提问作者Abhishek Renduchintala