1. [attribute]用法
定義:匹配包含給定屬性的元素
返回值:Array<Element>
參數(shù):attribute (String) : 屬性名
實例:將ID為"div_a1"的DIV中有ID屬性的span元素的背景色改為紅色
代碼: $("#div_a1 span[id]").css("background-color","red"); //點擊按鈕一將執(zhí)行這句代碼 DIV ID="div_a1"
span ID="span_1"
span 無ID屬性
span ID="span_2"
DIV ID="div_a5"
2. [attribute=value]用法
定義:匹配給定的屬性是某個特定值的元素
返回值:Array<Element>
參數(shù):attribute (String):屬性名 value (String):屬性值。引號在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含"]"時,用以避免沖突。
實例:將ID為"div_b1"的DIV中name屬性值為chk_attribute_test的input元素的背景色改為紅色
代碼:$("#div_b1 input[name=chk_attribute_test]").css("background-color","red"); //點擊按鈕二將執(zhí)行這句代碼 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>
參數(shù):attribute (String):屬性名 value (String):屬性值。引號在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含"]"時,用以避免沖突。
實例:將ID為"div_c1"的DIV中name屬性值不是chk_attribute_test的input元素的背景色改為紅色
代碼:$("#div_c1 > input[name!=chk_attribute_test]").css("background-color","red"); //點擊按鈕三將執(zhí)行這句代碼 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>
參數(shù):attribute (String):屬性名 value (String):屬性值。引號在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含"]"時,用以避免沖突。
實例:將ID為"div_d1"的DIV中name屬性值以'txt'開頭的input元素的背景色改為紅色
代碼:$("#div_d1 > input[name^=txt]").css("background-color","red"); //點擊按鈕四將執(zhí)行這句代碼 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]用法
定義:匹配給定的屬性是以某些值結(jié)尾的元素
返回值:Array<Element>
參數(shù):attribute (String):屬性名 value (String):屬性值。引號在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含"]"時,用以避免沖突。
實例:將ID為"div_e1"的DIV中name屬性值以'list'結(jié)尾的input元素的背景色改為紅色
代碼:$("#div_e1 > input[name$=list]").css("background-color","red"); //點擊按鈕五將執(zhí)行這句代碼 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>
參數(shù):attribute (String):屬性名 value (String):屬性值。引號在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含"]"時,用以避免沖突。
實例:將ID為"div_f1"的DIV中name屬性值包含'_'的input元素的背景色改為紅色
代碼:$("#div_f1 > input[name*=_]").css("background-color","red"); //點擊按鈕六將執(zhí)行這句代碼 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>
參數(shù):selector1 (Selector):屬性選擇器 selector2 (Selector):另一個屬性選擇器,用以進一步縮小范圍 selectorN (Selector):任意多個屬性選擇器
實例:將ID為"div_g1"的DIV中有id屬性且name屬性值以'rd'開頭和以'test'結(jié)尾的input元素的背景色改為紅色
代碼:$("#div_g1 > input[id][name$=test][name^=rd]").css("background-color","red"); //點擊按鈕七將執(zhí)行這句代碼 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"