jQuery-Selectors(選擇器)的使用(七、子元素篇)
來(lái)源:程序員人生 發(fā)布時(shí)間:2013-10-05 15:59:27 閱讀次數(shù):4116次
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法,我將以實(shí)例方式進(jìn)行講述,以簡(jiǎn)單,全面為基礎(chǔ),不會(huì)涉及很深,我的學(xué)習(xí)方法:先入門,后進(jìn)階! 本系列文章分為:基本篇、層次篇、簡(jiǎn)單篇、內(nèi)容篇、可見性篇、屬性篇、子元素篇、表單篇、表單對(duì)象屬性篇共9篇文章。 本篇講解::nth-child(index/even/odd/equation),:first-child,:last-child,:only-child的用法。 您對(duì)本系列文章有任何建議或意見請(qǐng)發(fā)送到郵箱:sjzlgt@qq.com 由于是第一次寫技術(shù)性系列文章,難免會(huì)出錯(cuò)或代碼BUG,歡迎指出,在此謝過(guò)! 您可以到jQuery官網(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)信息! 在IE6、IE7、火狐下測(cè)試過(guò)了,效果都很明顯。 |
1. :nth-child(index/even/odd/equation)用法定義:匹配其父元素下的第N個(gè)子或奇偶元素 ':eq(index)' 只匹配一個(gè)元素,而這個(gè)將為每一個(gè)父元素匹配子元素。:nth-child從1開始的,而:eq()是從0算起的!
可以使用如下語(yǔ)法:
:nth-child(2)
//索引為2的元素:nth-child(even)
//索引為偶數(shù)元素:nth-child(odd)
//索引為奇數(shù)元素:nth-child(3n)
//索引為3 * n的元素,n=0,1,2,3,4...,呃...3不是死的,你可以換成如1,2,4,5,6...之類的,下同:nth-child(3n+1)
//索引為3 * n + 1的元素,n=0,1,2,3,4...:nth-child(3n+2)
//索引為3 * n + 2的元素,n=0,1,2,3,4...返回值:Array<Element>
參數(shù):index (Number) : 要匹配元素的序號(hào),從1開始
實(shí)例:將ID為"div_a1"的DIV中每個(gè)ul元素的第2個(gè)Li元素的背景色改為紅色
代碼: $("#div_a1 ul li:nth-child(2)").css("background-color","red"); //點(diǎn)擊按鈕一將執(zhí)行這句代碼注意:其它語(yǔ)法用法簡(jiǎn)單,我不在此一一列出,讀者可下載源文件后,自行修改看效果,在此注意索引從1開始即可。 2. :first-child用法定義:匹配第一個(gè)子元素 ':first' 只匹配一個(gè)元素,而此選擇符將為每個(gè)父元素匹配一個(gè)子元素
返回值:Array<Element>
實(shí)例:將ID為"div_b1"的DIV中每個(gè)ul元素的第1個(gè)Li元素的背景色改為紅色
代碼: $("#div_b1 ul li:first-child") .css("background-color","red"); //點(diǎn)擊按鈕二將執(zhí)行這句代碼注意:當(dāng)然,這個(gè)效果你也可以用$("#div_b1 ul li:nth-child(1)") .css("background-color","red");來(lái)實(shí)現(xiàn)。 3. :last-child用法定義:匹配最后一個(gè)子元素 ':last'只匹配一個(gè)元素,而此選擇符將為每個(gè)父元素匹配一個(gè)子元素
返回值:Array<Element>
實(shí)例:將ID為"div_c1"的DIV中每個(gè)ul元素的最后1個(gè)Li元素的背景色改為紅色
代碼: $("#div_c1 ul li:last-child") .css("background-color","red"); //點(diǎn)擊按鈕三"將執(zhí)行這句代碼 4. :only-child用法定義:如果某個(gè)元素是父元素中唯一的子元素,那將會(huì)被匹配 如果父元素中含有其他元素,那將不會(huì)被匹配。
返回值:Array<Element>
實(shí)例:將ID為"div_c1"的DIV中每個(gè)ul元素中唯一1個(gè)Li元素的背景色改為紅色
代碼: $("#div_d1 ul li:only-child") .css("background-color","red"); //點(diǎn)擊按鈕四"將執(zhí)行這句代碼 文章導(dǎo)讀:
jQuery-Selectors(選擇器)的使用(一、基本篇)
jQuery-Selectors(選擇器)的使用(二、層次篇)
jQuery-Selectors(選擇器)的使用(三、簡(jiǎn)單篇)
jQuery-Selectors(選擇器)的使用(四-五、內(nèi)容篇&可見性篇)
jQuery-Selectors(選擇器)的使用(六、屬性篇)
jQuery-Selectors(選擇器)的使用(七、子元素篇)
生活不易,碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
------分隔線----------------------------
------分隔線----------------------------