jQuery-Selectors(選擇器)的使用(六、屬性篇)
來(lái)源:程序員人生 發(fā)布時(shí)間:2014-05-23 07:12:58 閱讀次數(shù):3351次
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法,我將以實(shí)例方式進(jìn)行講述,以簡(jiǎn)單,全面為基礎(chǔ),不會(huì)涉及很深,我的學(xué)習(xí)方法:先入門(mén),后進(jìn)階! 本系列文章分為:基本篇、層次篇、簡(jiǎn)單篇、內(nèi)容篇、可見(jiàn)性篇、屬性篇、子元素篇、表單篇、表單對(duì)象屬性篇共9篇文章。 本篇講解:[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[selector1][selector2][selectorN]的用法。 您對(duì)本系列文章有任何建議或意見(jiàn)請(qǐng)發(fā)送到郵箱:sjzlgt@qq.com 由于是第一次寫(xiě)技術(shù)性系列文章,難免會(huì)出錯(cuò)或代碼BUG,歡迎指出,在此謝過(guò)! 您可以到j(luò)Query官網(wǎng)來(lái)學(xué)習(xí)更多的有關(guān)jQuery知識(shí)。 版權(quán)所有:code-cat 博客:http://www.cnblogs.com/bynet/ 轉(zhuǎn)載請(qǐng)保留出處和版權(quán)信息! |
關(guān)于火狐,IE8在瀏覽此文章時(shí)會(huì)有一些錯(cuò)誤(選擇器失靈)現(xiàn)象的聲明:
首先,感謝大家對(duì)本系列文章的關(guān)注及提出的BUG。
我寫(xiě)文章時(shí),用的是IE7的環(huán)境,沒(méi)有考慮到火狐和其它瀏覽器,這是我的疏忽,在以后的文章中,我會(huì)作瀏覽器測(cè)試。經(jīng)我測(cè)試,Radio和CheckBox在火狐瀏覽器下改變背景色是體現(xiàn)不出來(lái)的,在IE8下亦是如此,添加邊框也是體現(xiàn)不出來(lái)的,如$("input").css("border","red 2px solid");是沒(méi)有效果的。但jQuery選擇器選擇的結(jié)果是正確的,如果您用$("input").attr("checked","true");這句代碼即可測(cè)出。
這篇文章我一有時(shí)間就會(huì)做出修改,找一些火狐、IE等瀏覽器都支持的效果來(lái)作為實(shí)例。
1. [attribute]用法定義:匹配包含給定屬性的元素
返回值:Array<Element>
參數(shù):attribute (String) : 屬性名
實(shí)例:將ID為"div_a1"的DIV中有ID屬性的span元素的背景色改為紅色
代碼: $("#div_a1 span[id]").css("background-color","red"); //點(diǎn)擊按鈕一將執(zhí)行這句代碼 2. [attribute=value]用法定義:匹配給定的屬性是某個(gè)特定值的元素
返回值:Array<Element>
參數(shù):attribute (String):屬性名 value (String):屬性值。引號(hào)在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含"]"時(shí),用以避免沖突。
實(shí)例:將ID為"div_b1"的DIV中name屬性值為chk_attribute_test的input元素的背景色改為紅色
代碼:$("#div_b1 input[name=chk_attribute_test]").css("background-color","red"); //點(diǎn)擊按鈕二將執(zhí)行這句代碼 3. [attribute!=value]用法定義:匹配給定的屬性是不包含某個(gè)特定值的元素
返回值:Array<Element>
參數(shù):attribute (String):屬性名 value (String):屬性值。引號(hào)在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含"]"時(shí),用以避免沖突。
實(shí)例:將ID為"div_c1"的DIV中name屬性值不是chk_attribute_test的input元素的背景色改為紅色
代碼:$("#div_c1 > input[name!=chk_attribute_test]").css("background-color","red"); //點(diǎn)擊按鈕三將執(zhí)行這句代碼注意:這里我用了'>',如果將'>'換成' ',則按鈕三的背景顏色也會(huì)變成紅色 4. [attribute^=value]用法定義:匹配給定的屬性是以某些值開(kāi)始的元素
返回值:Array<Element>
參數(shù):attribute (String):屬性名 value (String):屬性值。引號(hào)在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含"]"時(shí),用以避免沖突。
實(shí)例:將ID為"div_d1"的DIV中name屬性值以'txt'開(kāi)頭的input元素的背景色改為紅色
代碼:$("#div_d1 > input[name^=txt]").css("background-color","red"); //點(diǎn)擊按鈕四將執(zhí)行這句代碼 5. [attribute$=value]用法定義:匹配給定的屬性是以某些值結(jié)尾的元素
返回值:Array<Element>
參數(shù):attribute (String):屬性名 value (String):屬性值。引號(hào)在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含"]"時(shí),用以避免沖突。
實(shí)例:將ID為"div_e1"的DIV中name屬性值以'list'結(jié)尾的input元素的背景色改為紅色
代碼:$("#div_e1 > input[name$=list]").css("background-color","red"); //點(diǎn)擊按鈕五將執(zhí)行這句代碼 6. [attribute*=value]用法定義:匹配給定的屬性是以包含某些值的元素
返回值:Array<Element>
參數(shù):attribute (String):屬性名 value (String):屬性值。引號(hào)在大多數(shù)情況下是可選的。但在遇到諸如屬性值包含"]"時(shí),用以避免沖突。
實(shí)例:將ID為"div_f1"的DIV中name屬性值包含'_'的input元素的背景色改為紅色
代碼:$("#div_f1 > input[name*=_]").css("background-color","red"); //點(diǎn)擊按鈕六將執(zhí)行這句代碼 7. [selector1][selector2][selectorN]用法定義:復(fù)合屬性選擇器,需要同時(shí)滿足多個(gè)條件時(shí)使用。
返回值:Array<Element>
參數(shù):selector1 (Selector):屬性選擇器 selector2 (Selector):另一個(gè)屬性選擇器,用以進(jìn)一步縮小范圍 selectorN (Selector):任意多個(gè)屬性選擇器
實(shí)例:將ID為"div_g1"的DIV中有id屬性且name屬性值以'rd'開(kāi)頭和以'test'結(jié)尾的input元素的背景色改為紅色
代碼:$("#div_g1 > input[id][name$=test][name^=rd]").css("background-color","red"); //點(diǎn)擊按鈕七將執(zhí)行這句代碼 文章導(dǎo)讀:
jQuery-Selectors(選擇器)的使用(一、基本篇)
jQuery-Selectors(選擇器)的使用(二、層次篇)
jQuery-Selectors(選擇器)的使用(三、簡(jiǎn)單篇)
jQuery-Selectors(選擇器)的使用(四-五、內(nèi)容篇&可見(jiàn)性篇)
jQuery-Selectors(選擇器)的使用(六、屬性篇)
jQuery-Selectors(選擇器)的使用(七、子元素篇)
生活不易,碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
------分隔線----------------------------
------分隔線----------------------------