jQuery ?? ?? ??
' : eq(index)'? ??? ???? ???? ??, ?? ?? ?? ??? ?? ?? ??? ?????. :nth-child? 1?? ???? :eq()? 0?? ?????! :n??-??(??) :n??-??(3n)
??? ??? ? ????.
| :n??-??(3n+1) | :nth - child(3n+2)? ul?? ? ?? li ??: | $("ul li:nth-child(2)")|
| :first-child | ? ?? ??? ?? ?? ':first'? ??? ???? ???? ? ???? ? ?? ??? ?? ??? ?? ??? ?????.
| ? ??? ?? ??? ????? |
| ? ul?? ??? li ??: $("ul li:last-child") | :only-child | |
| ?? ??? ?? ??? ??? ??, ???? ????. | ul?? ??? ?? ??? li? ????. | ??: 1. :nth-child(index)? 1?? ???? eq(index)? 0?? ?????. ?, $("ul li:nth-child(0)"). "color","red")? ???? ??? ??? ? ??? 1, ? $("ul li:nth-child(1)").css("color","red" ) ? eq( 0)? ?? ? ???, ? ?? ?? ??? ?? ?? ?????. :nth-child(even)? ?? ?? ??, ? ? ??, ? ??, ?? ??..., ??? :even? ?? ????. ??? 0?? ???? ? ?? ???, ? ?? ???... ? ? ??, ? ??, ?? ??... ?? ?? ?? ??? ?? ? ????. :nth-? ???????. child(??) ? :odd 2. :first-child? ? ?? ???? ?? ??? ????, :first? ?? ??? ????, :last-child ? last 3?? ?????. : ??? ?? ??? ??? ?? ??? ?? ?????. ?, ?? ?? ??? ???? ??? ??? ?? ?????! <!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 runat="server">
<title>無標題頁</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
jQuery(function($){
// $("ul li:first-child").css("color","red");
$("ul li:first").css("color","red");
// $("ul li:last-child").css("color","red");
// $("ul li:nth-child(even)").css("color","red");
// $("ul li:odd").css("color","red");
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li>第一個元素</li>
<li>第二個元素</li>
<li>第三個元素</li>
<li>第四個元素</li>
<li>第五個元素</li>
<li>第六個元素</li>
</ul>
<ul>
<li>第一個元素</li>
<li>第二個元素</li>
<li>第三個元素</li>
<li>第四個元素</li>
<li>第五個元素</li>
<li>第六個元素</li>
</ul>
</div>
</form>
</body>
</html>||
<!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 runat="server">
<title>無標題頁</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<script>
$(function(){
// 1選取父元素下索引值是偶數(shù)的子元素的索引值(索引值從1開始的)
//找到當前元素的父元素，在找他下面的子元素
$("span.child:nth-child(even)").css("fontSize","30px");
//2選取父元素下,索引值是奇數(shù)的元素(索引值從1開始)
$("span.child:nth-child(odd)").css("color","red");
//3匹配每個父元素下，索引值為xx的子元素,索引從1開始
$("span.child:nth-child(1)").css("color","blue");
//4匹配每個父元素的第一個子元素
$("span.child:first-child").css("fontSize","50px");
//5匹配每個父元素的第一個子元素
$("span.child:last-child").css("fontSize","50px");
})
</script>
<body>
<div class="parent">
<span class="child">1</span>
<span class="child">2</span>
<span class="child">3</span>
<span class="child">4</span>
<span class="child">5</span>
</div>
</body>
</html>
?? ????? ????? ? ????. ?? ???? ???? ????. ???? ? ??? ?? ?? ??????~
? ??? ??? ???? ???? ????.
|
