id
或 class
的麻煩。用在程式動態產生的 html ,又不能預先指定 id
或 class
的元素,也會很有助益;或是也可以找出屬性值 (attribute value) 有局部相同的元素。部分為 css level 3 (css 3) 新的規範。 jQuery attribute selectors 物件 (object) 相對應的語法也附帶列出,這部分瀏覽器都可支援。selector[att]
att
屬性的元素。<dfn lang="en">selector</dfn>
<label for="mail">email</label>
dfn[lang]
label[for]
jQuery('[att]')
或$('[att]')
例:$('label[for]')
selector[att=val]
att
屬性且屬性值與 val
完全相符的元素。<input type="text"/>
<button type="reset">清除</button>
<a href="http://www.w3.org/" rel="external">W3C</a>
input[type="text"]
button[type="reset"]
a[rel="external"]
jQuery('[att=val]')
或$('[att=val]')
例:$('input[type="text"]')
selector[att^=val]
(此項為 css 3)att
屬性且屬性值字首 (由開端起算的字串) 與 val
完全相符的元素。 val
為空白時,不會指出任何元素。<body class="ch41">…<body class="ch42">…<body class="ch43">…
<object type="image/png" data="photo.png">…<object type="image/jpg" data="photo.jpg">…
<a href="http://www.w3.org/">…<a href="http://www.w3.org/Style/CSS/">…<a href="http://www.w3.org/html/">…
body[class^="ch4"]
object[type^="image/"]
a[href^="http://www.w3.org"]
jQuery('[att^=val]')
或$('[att^=val]')
例:$('body[class^="ch4"]')
selector[att$=val]
(此項為 css 3)att
屬性且屬性值字尾 (由末端回算的字串) 與 val 完全相符的元素。 val
為空白時,不會指出任何元素。<div class="st" id="st1-2">…<div class="st" id="st2-2">…<div class="st" id="st3-2">… <img src="images/photo.png"/>…
<img src="../images/photo.png"/>…
*.st[id$="-2"]
img[src$="photo.png"]
jQuery('[att$=val]')
或$('[att$=val]')
例:$('img[src$="photo.png"]')
selector[att*=val]
(此項為 css 3)att
屬性且屬性值至少有一段字與 val
完全相符的元素。 val
為空白時,不會指出任何元素。<a href="http://tw.info.yahoo.com/SecurityCenter/">…<a href="http://tw.campaign.money.yahoo.com/atm/">…
a[href*=".yahoo.com"]
jQuery('[att*=val]')
或$('[att*=val]')
例:$('a[href*=".yahoo.com"]')
selector[att|=val]
att
屬性且屬性值與 val
完全相符的元素,或是由開端至 - (減號) 前字元完全相符的元素。<div class="article2">…<div class="article2-1">…<div class="article2-2">… <a href="http://www.w3.org/" hreflang="en-us">…
<a href="http://www.britishmuseum.org/" hreflang="en-uk">…
div[class|="article2"]
a[hreflang|="en"]
jQuery('[att|=val]')
或$('[att|=val]')
例:$('div[class|="article2"]')
selector[att~=val]
att
屬性且屬性值有一個字以上以空格分隔,其中一個字與 val
完全相符的元素。 val
為空白時,不會指出任何元素。<h2 title="Fashion Taipei">…<h2 title="Culture Taipei">…<h2 title="New Taipei City">…
<a href="../ch1.htm" rel="first start begin">第一頁</a>
h2[title~="Taipei"]
a[rel~="start"]
jQuery('[att~=val]')
或$('[att~=val]')
例:$('h2[title~="Taipei"]')
較詳細瀏覽器支援問題及 bugs 討論,可參訪 sitepoint (英文)
思考 - 養成良好的語言撰寫習慣
屬性值的引號 (quotes) 應括出來,尤其在 jQuery attribute selector。₪
本來語法是被寬鬆地允許,但在 jQuery 1.6 以後做了更嚴謹、更快速的處理,「屬性值」如果包含特別的符號,如例中的 . (句號) ,不加引號就會出現語法錯誤。
有不少以前的 plugin 都已經出現這種錯誤,光除錯就必須再花很多時間,所以養成良好的書寫習慣是重要的,省東省西不見得省時間。