jQuery Selectors(選擇器)的使用(七、子元素篇)

2024-05-06 14:12:29

字體：大中小

供稿：網(wǎng)友

本系列文章分為：基本篇、層次篇、簡(jiǎn)單篇、內(nèi)容篇、可見(jiàn)性篇、屬性篇、子元素篇、表單篇、表單對(duì)象屬性篇共9篇文章。
本篇講解：:nth-child(index/even/odd/equation),:first-child,:last-child,:only-child的用法。
您對(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í)。
運(yùn)行后，請(qǐng)刷新下，因?yàn)樾枰虞djquery,默認(rèn)是輸出，不會(huì)加載遠(yuǎn)程的js文件的。

<!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> <title>jQuery-Selectors-6</title> </head> <body> <style type="text/css"> .div {     width:95%;     margin-left:15px;     margin-top:15px;     margin-right:15px;     padding-left:5px;     padding-top:5px;     padding-bottom:5px;     background-color:#ccc;     border:#999 1px solid;     line-height:30px;     font-size:13px;     font-family:微軟雅黑; } .blue{color:Blue;} .green{color:Green;} .button{border:green 1px solid;width:100px;} .xiaobiao{ font-weight:bold;} .red_test{background-color:red; color:White; width:300px; height:30px;} .li_test{border:#000 1px solid;} </style>   jQuery-Selectors(選擇器)的使用(七、子元素篇) 本系列文章主要講述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)信息！   在IE6、IE7、火狐下測(cè)試過(guò)了，效果都很明顯。   1. :nth-child(index/even/odd/equation)用法 定義：匹配其父元素下的第N個(gè)子或奇偶元素 ':eq(index)' 只匹配一個(gè)元素，而這個(gè)將為每一個(gè)父元素匹配子元素。:nth-child從1開(kāi)始的，而: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...之類(lèi)的，下同 :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開(kāi)始 實(shí)例：將ID為"div_a1"的DIV中每個(gè)ul元素的第2個(gè)Li元素的背景色改為紅色  代碼： $("#div_a1 ul li:nth-child(2)").css("background-color","red"); //點(diǎn)擊按鈕一將執(zhí)行這句代碼  DIV ID="div_a1"             </SPAN>
</div>
</div>
<div   id="iwvjtn8m0"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="iwvjtn8m0"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/05-06/1044102.html'>IE和firefox瀏覽器的event事件兼容性匯總</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/05-06/1044104.html'>JavaScript Cookie的讀取和寫(xiě)入函數(shù)</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="iwvjtn8m0"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒(méi)什么話要說(shuō)嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學(xué)習(xí)交流