jQuery Selectors(選取器)的使用(六、屬性篇)

本系列文章分為：基本篇、層次篇、簡單篇、內容篇、可見度篇、屬性篇、子項目篇、表單篇、表單對象屬性篇共9篇文章。
本篇講解：[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[selector1][selector2][selectorN]的用法。
您對本系列文章有任何建議或意見請發送到郵箱：sjzlgt@qq.com
由於是第一次寫技術性系列文章，難免會出錯或代碼BUG，歡迎指出，在此謝過！

運行後，請重新整理下代碼，以便載入jquery xmlns="http://www.w3.org/1999/xhtml" >

jQuery-Selectors(選取器)的使用(六、屬性篇)

本系列文章主要講述jQuery架構的選取器(Selectors)使用方法，我將以執行個體方式進行講述，以簡單，全面為基礎，不會涉及很深，我的學習方法：先入門，後進階！

本系列文章分為：基本篇、層次篇、簡單篇、內容篇、可見度篇、屬性篇、子項目篇、表單篇、表單對象屬性篇共9篇文章。

本篇講解：[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[selector1][selector2][selectorN]的用法。

您對本系列文章有任何建議或意見請發送到郵箱：sjzlgt@qq.com

由於是第一次寫技術性系列文章，難免會出錯或代碼BUG，歡迎指出，在此謝過！

您可以到jQuery官網來學習更多的有關jQuery知識。

著作權：code-cat 部落格:http://www.cnblogs.com/bynet 轉載請保留出處和著作權資訊！1. [attribute]用法

定義：匹配包含給定屬性的元素

傳回值：Array<Element>

參數：attribute (String) : 屬性名稱

執行個體：將ID為"div_a1"的DIV中有ID屬性的span元素的背景色改為紅色

代碼： $("#div_a1 span[id]").css("background-color","red"); //點擊按鈕一將執行這句代碼

DIV ID="div_a1"

span ID="span_1"

span 無ID屬性

span ID="span_2"

DIV ID="div_a5"
2. [attribute=value]用法

定義：匹配給定的屬性是某個特定值的元素

傳回值：Array<Element>

參數：attribute (String):屬性名稱 value (String):屬性值。引號在大多數情況下是可選的。但在遇到諸如屬性值包含"]"時，用以避免衝突。

執行個體：將ID為"div_b1"的DIV中name屬性值為chk_attribute_test的input元素的背景色改為紅色

代碼：$("#div_b1 input[name=chk_attribute_test]").css("background-color","red"); //點擊按鈕二將執行這句代碼

DIV ID="div_b1"

radio name='rd'

radio name='rd'

checkbox name='chk_attribute_test'

checkbox name='chk_attribute_test'

checkbox name='chk_attribute_test'

checkbox name='chk_attribute_test'

checkbox name='chk_attribute_test'

DIV ID="div_b5"
3. [attribute!=value]用法

定義：匹配給定的屬性是不包含某個特定值的元素

傳回值：Array<Element>

參數：attribute (String):屬性名稱 value (String):屬性值。引號在大多數情況下是可選的。但在遇到諸如屬性值包含"]"時，用以避免衝突。

執行個體：將ID為"div_c1"的DIV中name屬性值不是chk_attribute_test的input元素的背景色改為紅色

代碼：$("#div_c1 > input[name!=chk_attribute_test]").css("background-color","red"); //點擊按鈕三將執行這句代碼

DIV ID="div_c1"

radio name='rd'

radio name='rd'

checkbox name='chk_attribute_test'

checkbox name='chk_attribute_test'

checkbox name='chk_attribute_test'

checkbox name='chk_attribute_test'

checkbox name='chk_attribute_test'

DIV ID="div_c5"

注意：這裡我用了'>'，如果將'>'換成' '，則按鈕三的背景顏色也會變成紅色4. [attribute^=value]用法

定義：匹配給定的屬性是以某些值開始的元素

傳回值：Array<Element>

參數：attribute (String):屬性名稱 value (String):屬性值。引號在大多數情況下是可選的。但在遇到諸如屬性值包含"]"時，用以避免衝突。

執行個體：將ID為"div_d1"的DIV中name屬性值以'txt'開頭的input元素的背景色改為紅色

代碼：$("#div_d1 > input[name^=txt]").css("background-color","red"); //點擊按鈕四將執行這句代碼

DIV ID="div_d1"

radio name='rd'

radio name='rd'

checkbox name='chk_attribute_test'

checkbox name='chk_attribute_test'

checkbox name='chk_attribute_test'

checkbox name='chk_attribute_test'

checkbox name='chk_attribute_test'

DIV ID="div_d5"
5. [attribute$=value]用法

定義：匹配給定的屬性是以某些值結尾的元素

傳回值：Array<Element>

參數：attribute (String):屬性名稱 value (String):屬性值。引號在大多數情況下是可選的。但在遇到諸如屬性值包含"]"時，用以避免衝突。

執行個體：將ID為"div_e1"的DIV中name屬性值以'list'結尾的input元素的背景色改為紅色

代碼：$("#div_e1 > input[name$=list]").css("background-color","red"); //點擊按鈕五將執行這句代碼

DIV ID="div_e1"

checkbox name='chk_attribute_list'

radio name='rd'

radio name='rd'

checkbox name='chk_attribute_list'

checkbox name='chk_attribute_list'

checkbox name='chk_attribute_list'

checkbox name='chk_attribute_list'

DIV ID="div_e5"
6. [attribute*=value]用法

定義：匹配給定的屬性是以包含某些值的元素

傳回值：Array<Element>

參數：attribute (String):屬性名稱 value (String):屬性值。引號在大多數情況下是可選的。但在遇到諸如屬性值包含"]"時，用以避免衝突。

執行個體：將ID為"div_f1"的DIV中name屬性值包含'_'的input元素的背景色改為紅色

代碼：$("#div_f1 > input[name*=_]").css("background-color","red"); //點擊按鈕六將執行這句代碼

DIV ID="div_f1"

radio name='rd'

radio name='rd'

checkbox name='chk_attribute_test'

checkbox name='chk_attribute_test'

checkbox name='chk_attribute_test'

checkbox name='chk_attribute_test'

checkbox name='chk_attribute_test'

DIV ID="div_f5"
7. [selector1][selector2][selectorN]用法

定義：複合屬性選取器，需要同時滿足多個條件時使用。

傳回值：Array<Element>

參數：selector1 (Selector):屬性選取器 selector2 (Selector):另一個屬性選取器，用以進一步縮小範圍 selectorN (Selector):任意多個屬性選取器

執行個體：將ID為"div_g1"的DIV中有id屬性且name屬性值以'rd'開頭和以'test'結尾的input元素的背景色改為紅色

代碼：$("#div_g1 > input[id][name$=test][name^=rd]").css("background-color","red"); //點擊按鈕七將執行這句代碼

DIV ID="div_g1"

radio id='rd_0' name='rd_test'

radio id='rd_1' name='rd_test'

checkbox id='chk_0' name='chk_attribute_test'

checkbox id='chk_1' name='chk_attribute_test'

checkbox id='chk_2' name='chk_attribute_test'

checkbox id='chk_3' name='chk_attribute_test'

checkbox id='chk_4' name='chk_attribute_test'

DIV ID="div_g5"