jquery属性选择器中|value和^value的区别

jquery的属性选择中有两个比较混淆：一个是[attribute^value], 另一个是[attribute|value]。

先看解释：

[attribute^value]：选取属性的值以value开始的元素

[attribute|value]：选取属性等于该给定字符串或以该字符串为前缀（该字符串后跟一个连接字符‘-'）的元素

接下来看实例

例子1

<div id="abc"></div>

<div id="abcde"></div>

$('div|=abc')匹配第一个div

$('div^=abc')匹配两个div

例子2

<div id="abc-1"></div>

<div id="abcdef"></div>

$('div|=abc')匹配第一个div

$('div^=abc')匹配两个div

例子3

<div id="abc&1"></div>

<div id="abcdef"></div>

$('div|=abc')都不匹配

$('div^=abc')匹配两个div

总结：

[attribute|value]这个比较好理解，就是属性值以value开头就行了，区分大小写

[attribute^value]要么属性值等于value，要么属性值以value开头，而且以-符隔开其他字符，区分大小写