jQuery 有用到一些 Meta-CHaracters(元字符) 來當做選擇器解析使用，像是 # . ~ [] : = > 等等。當要透過 id 時要使用 #id，而要包含屬性時要用 [attr]。
假設我們有一段 HTML：
1 2 3 | <body> <div id="abgne" tw="台灣">jQuery：寫更少，做更多。</div> </body> |
所以我們要指定 id 為 abgne 及有 tw 屬性的元素內容的話，可以這樣寫：
1 2 3 4 | $(function() { // -> jQuery：寫更少，做更多。 alert($('#abgne[tw]').text()); }); |
如果....有個設計師或是程式設計師把 id 命名為 #abgne[tw] 的話：
1 2 3 4 5 | <body> <div id="abgne" tw="台灣">jQuery：寫更少，做更多。</div> <div id="#abgne[tw]">jQuery：The Write Less, Do More.</div> </body> |
現在我們要取得 id 為 #abgne[tw] 的內容時，可能就有人想到，要用 id 則要在前面加上 #，所以就馬上寫成：
1 2 3 4 | $(function() { // -> jQuery：寫更少，做更多。 alert($('##abgne[tw]').text()); }); |
實際執行過後會發現一樣是取到第一個 id 為 abgne 的內容。為什麼會這樣呢？因為 # 跟 [] 都是 jQuery 設定好的選擇器字元符號，如果直接寫的話，在 [] 中間的值就會被認為是要判斷屬性用的。
若我們要使用的選擇器中又包含其它 Meta-CHaracters(元字符) 的話，則要在這些字元前面加上兩個反斜線(\\)來當做跳脫字元(Escape Characters)使用，因此要取得 id 為 #abgne[tw] 的話，則要寫成：
1 2 3 4 | $(function() { // -> jQuery：The Write Less, Do More. alert($('#\\#abgne\\[tw\\]').text()); }); |
這樣就能正確的取到 #abgne[tw] 中的內容了。這邊整理出在 jQuery 中需要注意的 Meta-CHaracters(元字符) 清單：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | # . [ ] ( ) & , + * ~ ' : " ! ^ $ = > | / ; |
雖然使用跳脫字元(Escape Characters)的方式可以解決問題，但建議還是只用單純的英數字符號來當做 id 名稱。
範例瀏覽：
http://demonstration.abgne.tw/jquery/tips/0005/0005.html
相關連結
推薦內容