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開頭，並且以-符隔開其餘字符，區分大小寫