jquery屬性選擇器

原文：http://flex.desizen.com/jquery-selectors-attributefilters/

屬性過濾(Attribute Filters)的內容就是html元素中的屬性,例如 name, id, class, 但是不是指的其值,是指屬性本身.我在每篇文章裡面都講一下自己對這個選擇器系列的理解,原因其一是方便理解其含義並記憶,其二就是”混個臉熟”,即便記不住,在以後用到的時候也可以很快的查詢api並應用上.

其包括以下幾個選擇器:

• [attribute]
• [attribute=value]
• [attribute!=value]
• [attribute^=value]
• [attribute$=value]
• [attribute*=value]
• [attributeFilter1][attributeFilter2][attributeFilterN]

[attribute]
用法: $(“div[id]“) ;
說明: 匹配包含給定屬性的元素.注意,在jQuery 1.3中,前導的@符號已經被廢除!如果想要相容最新版本,只需要簡單去掉@符號即可.是的,新版必須去掉@符號,這個改變相信使用老版本的童鞋會習慣的.例子中是選取了所有帶”id”屬性的div標籤.

[attribute=value]
用法: $(“input[name='newsletter']“).attr(“checked”, true);
說明: 匹配給定的屬性是某個特定值的元素.例子中選取了所有 name 屬性是 newsletter 的 input 元素.

[attribute!=value]
用法: $(“input[name!='newsletter']“).attr(“checked”, true);
說明: 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素.此選擇器等價於:not([attr=value]),要匹配含有特定屬性但不等於特定值的元素,請使用[attr]:not([attr=value]).嗯,之前看到的 :not 派上了用場.

[attribute^=value]
用法: $(“input[name^='news']“) ;
說明: 匹配給定的屬性是以某些值開始的元素.嗯,我們又見到了這幾個類似於正則匹配的符號.現在想忘都忘不掉了吧?!

[attribute$=value]
用法: $(“input[name$='letter']“) ;
說明: 匹配給定的屬性是以某些值結尾的元素.

[attribute*=value]
用法: $(“input[name*='man']“) ;
說明: 匹配給定的屬性是以包含某些值的元素.

[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $(“input[id][name$='man']“) ;
說明: 複合屬性選擇器,需要同時滿足多個條件時使用.又是一個組合,這種情況我們實際使用的時候很常用.這個例子中選擇的是所有含有 id 屬性,並且它的 name 屬性是以 man 結尾的元素.

通過屬性過濾(Attribute Filters)的學習,可以看出來,jQuery的選擇器用法是微妙的,得細緻而為之.讓我想起來了那個因為一個小數點導致什麼宇宙飛船爆炸還是什麼的事了.有點聳人聽聞,但是等我們使用的非常非常多了以後,自然就很容易分開區別了.