快捷導(dǎo)航

JQuery 學(xué)習(xí)筆記選擇器之六

更新時(shí)間：2009年07月23日 22:58:01 作者：

JQuery選擇器之六測(cè)試代碼如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="js/jquery-1.3.2.js"></script> 
<script type="text/javascript"><!-- 
    $(function(){ 
            $("#aNth1").click(function(){ 
                    $("#ul1 li:nth-child(even)").each(function(){ 
                        $(this).css("background","#773300"); 
                    }) 
            }) 
            $("#aNth2").click(function(){ 
                    $("#ul1 li:nth-child(2n+1)").each(function(){ 
                        $(this).css("background","#ff3434"); 
                    }) 
            }) 
            $("#aFirst").click(function(){ 
                    $("#ul1 li:first-child").each(function(){ 
                        $(this).css("background","#223344"); 
                    }) 
            }) 
            $("#aLast").click(function(){ 
                    $("#ul1 li:last-child").each(function(){ 
                        $(this).css("background","#99ff88"); 
                    }) 
            }) 
            $("#aOnly").click(function(){ 
                    $("ul li:only-child").each(function(){ 
                        $(this).css("background","#99ff88"); 
                    }) 
            }) 
     }) 
// --></script> 
<title>無(wú)標(biāo)題文檔</title> 
</head> 

<body> 

<a href="#" onclick="javascript:location.reload();">重置</a> 
<ul id="ul1"> 
<li>li1</li> 
<li>li2</li> 
<li>li3</li> 
<li>li4</li> 
<li>li5</li> 
<li>li6</li> 
</ul> 
<ul> 
<li>li7</li> 
</ul> 
<a href="#" id="aNth1">設(shè)置ul1的偶索引子元素的背景顏色</a>｜ 
<a href="#" id="aNth2">設(shè)置ul1的奇索引子元素的背景顏色</a>｜ 
<a href="#" id="aFirst">設(shè)置ul1的頭子元素的背景顏色</a>｜ 
<a href="#" id="aLast">設(shè)置ul1的尾子元素的背景顏色</a>｜ 
<a href="#" id="aOnly">設(shè)置所有ul中唯一子元素的背景顏色</a> 
</body> 
</html>

1.$("ParentSelector ChildTagName:nth-child(...)")注-以下簡(jiǎn)寫(xiě)為:nth-child
描述：獲取ParentSelector選擇的元素集合的子元素集合進(jìn)行索引篩選，如例子中點(diǎn)擊aNth1后，對(duì)ID為ul1的元素的li子元素進(jìn)行偶索引（even）選擇（$("#ul1 li:nth-child(even)")），even這關(guān)鍵字應(yīng)該不陌生吧，在第三章中有講到，若還不清楚的話可先去第三章瞄下再繼續(xù)^^，當(dāng)然這里也可以用odd，不過(guò)在這里跟第三章有點(diǎn)不同，就是第三章中，索引是從0開(kāi)始，不過(guò)這里的索引要從1開(kāi)始哦，本人感覺(jué)這點(diǎn)設(shè)計(jì)的不是很好- -!，沒(méi)有規(guī)范，不知道是不是設(shè)計(jì)的時(shí)候疏忽了。此方法還有一個(gè)蠻靈活的用法，就像例子中aNth2點(diǎn)擊事件里，用$("#ul1 li:nth-child(2n+1)")的方法完成了類(lèi)似$("#ul1 li:nth-child(odd)")的功能，至于2n+1應(yīng)該不用我來(lái)講解了吧，初中數(shù)學(xué)就經(jīng)常用到了。實(shí)在不懂的話跟貼吧- -!。此方法也可以跟上具體的索引比如“2”,不過(guò)要記住哦，這里的索引是從1開(kāi)始滴??！
返回值：Array(Element);
2.:first-child
描述：獲取選擇的元素集合的頭元素。這里寫(xiě)的簡(jiǎn)單點(diǎn)，應(yīng)該看的懂吧，結(jié)合例子實(shí)在看不懂的話貼吧- -!。
返回值：Array(Element);
3.:last-child
描述：獲取選擇的元素集合的尾元素。
返回值：Array(Element);
4.:only-child
描述：獲取無(wú)兄弟節(jié)點(diǎn)的元素，如例子中，第二個(gè)ul元素只有一個(gè)li子元素，所以$("ul li:only-child")方法只獲取了li7。
返回值：Array(Element);

您可能感興趣的文章: