jQuery 선택기 사용(7개, 하위 요소)_jquery-JS 튜토리얼-php.cn

이 기사 시리즈는 기본 기사, 계층 기사, 단순 기사, 콘텐츠 기사, 가시성 기사, 속성 기사, 하위 요소 기사, 양식 기사 및 양식 개체 속성 기사의 9개 기사로 나뉩니다.
이 글에서는 :nth-child(index/even/odd/equation), :first-child, :last-child, :only-child의 사용법을 설명합니다.
이 시리즈 기사에 대한 제안이나 의견이 있는 경우 이메일: sjzlgt@qq.com으로 보내주세요.
기술 기사 시리즈를 작성하는 것은 이번이 처음이므로, 오류나 코드 버그가 있을 수 있으니 지적해 주시면 감사하겠습니다!
jQuery 공식 웹사이트를 방문하면 jQuery에 대해 더 자세히 알아볼 수 있습니다.
실행 후 새로고침해 주세요. jquery를 로드해야 하기 때문에 기본값은 출력이며 원격 js 파일은 로드되지 않습니다.

<title>jQuery-Selectors-6</title>

<div style="width:100%; text-align:center; font-size:16px; font-weight:bold;">
</div>jQuery-Selector 사용(7개, 하위 요소)<a href="http://jquery.com/" target="_blank">
이 시리즈의 기사에서는 주로 jQuery 프레임워크의 선택기를 사용하는 방법에 대해 설명합니다. 단순성과 포괄성을 기반으로 하며 깊이 있게 다루지는 않습니다. 먼저 시작한 다음 진행하세요.
 
이 기사 시리즈는 기본 기사, 계층 기사, 단순 기사, 콘텐츠 기사, 가시성 기사, 속성 기사, 하위 요소 기사, 양식 기사 및 양식 개체 속성 기사의 9개 기사로 나뉩니다.
 
이 문서에서는 다음 내용을 설명합니다. [속성],[속성=값],[속성!=값],[속성^=값],[속성$=값],[속성*=값],[selector1][selector2][selectorN ] 용법.
 
이 기사 시리즈에 대한 제안이나 의견이 있는 경우 이메일(sjzlgt@qq.com)로 보내주십시오.
 
기술적인 글을 쓰는 것이 처음이라 실수나 코드 버그가 있을 수 있으니 지적해주시면 감사하겠습니다!
 
jQuery에 대해 자세히 알아보려면 </a>jQuery 공식 웹사이트<span style="color:Red;">를 방문하세요.
 
<strong><a href="http://www.cnblogs.com/bynet/" target="_blank">저작권: code-cat 블로그:</a>http://www.cnblogs.com/bynet</strong> 전재시 출처와 저작권 정보를 꼭 남겨주세요! </span>
</div>
<div class="div">

</div>
IE6, IE7 및 Firefox에서 테스트되었으며 그 효과는 분명합니다. 
<div class="div">

<span class="xiaobiao">
</span>1. :n번째-자식(색인/짝수/홀수/방정식) 사용법<span class="green">
 
정의: 상위 요소 ':eq(index)' 아래의 N번째 하위 또는 홀수 짝수 요소 일치는 하나의 요소만 일치하며 이는 각 상위 요소의 하위 요소와 일치합니다. :nth-child는 1부터 시작하고 :eq()는 0부터 시작합니다! 
 
다음 구문을 사용할 수 있습니다.
 
:nth-child(2) </span>//인덱스 2가 있는 요소<span class="green">
 
:nth-child(even) </span>//인덱스는 짝수 요소입니다<span class="green">
 
:nth-child(odd) </span>//인덱스가 홀수 요소입니다<span class="green">
 
:nth-child(3n) </span>//인덱스가 3인 요소 * n, n=0,1,2,3,4..., 어...3은 죽지 않았습니다. 1로 바꿀 수 있습니다. 2,4,5,6...등, 아래도 마찬가지 <span class="green">
 
:nth-child(3n 1) </span>//인덱스가 3 * n 1인 요소, n=0,1,2,3,4...<span class="green">
 
:nth-child(3n 2) </span>//인덱스가 3 * n 2인 요소, n=0,1,2,3,4...<span style="border:blue 1px solid;">
 
반환 값: Array<Element>
 
매개변수: index(Number): 일치시킬 요소의 시퀀스 번호(1부터 시작)
 
예: ID가 "div_a1"인 DIV에 있는 각 ul 요소의 두 번째 Li 요소의 배경색을 빨간색으로 변경합니다.
 
<span style="color:green;">코드: $("#div_a1 ul li:nth-child(2)").css("Background-color","red");</span> //이 코드를 실행하려면 버튼 1을 클릭하세요.</span> <div id="div_a1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;">
<ul id="ul_a1" style="width:100px; border:#000 1px solid;">
DIV ID="div_a1"
 
<li>
ul 아이디="ul_a1"
</li>LI:C<li>
</li>LI:C <li>
</li>LI:C#<li>
</li>LI:자바<li>
</li>LI:자바스크립트</ul>
<ul id="ul_a2" style="width:100px; border:#000 1px solid;">
<li>
ul 아이디="ul_a2"
</li>LI:구글<li>
</li>리:마이크로소프트<li>
</li>리:애플<li>
</li>리:선<li>
</li>리:인텔</ul>
<ul id="ul_a3" style="width:100px; border:#000 1px solid;">

<li>
ul 아이디="ul_a3"
</li>리:온리원</ul>
<div id="div_a5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;">
<input type="button" id="btn_1" value="按钮一" class="button">
DIV ID="div_a5"
</div>
</div>
<script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$("#btn_1").click(function(){ 
$("#div_a1 ul li:nth-child(2)").css("background-color","red"); 
}); 
</script> 
<span style="color:Red;"><strong>注意：其它语法用法简单，我不在此一一列出，读者可下载源文件后，自行修改看效果，在此注意索引从1开始即可。</strong></span> 
</div>

<div class="div"> 
<span class="xiaobiao">2. :first-child用法</span>
 
定义：匹配第一个子元素 ':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 
 
返回值：Array<Element>
 
实例：将ID为"div_b1"的DIV中每个ul元素的第1个Li元素的背景色改为红色 
 
<span style="border:blue 1px solid;">代码： $("#div_b1 ul li:first-child") .css("background-color","red");<span style="color:green;"> //点击按钮二将执行这句代码</span></span> 
<div id="div_b1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_b1"
 
<ul id="ul_b1" style="width:100px; border:#000 1px solid;"> 
ul id="ul_b1" 
<li>LI:C</li> 
<li>LI:C++</li> 
<li>LI:C#</li> 
<li>LI:Java</li> 
<li>LI:JavaScript</li> 
</ul> 
<ul id="ul_b2" style="width:100px; border:#000 1px solid;"> 
ul id="ul_b2" 
<li>LI:Google</li> 
<li>LI:Microsoft</li> 
<li>LI:Apple</li> 
<li>LI:Sun</li> 
<li>LI:Intel</li> 
</ul>

<ul id="ul_b3" style="width:100px; border:#000 1px solid;"> 
ul id="ul_b3" 
<li>Li:onle one</li> 
</ul> 
<div id="div_b5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> 
DIV ID="div_b5" 
<input type="button" id="btn_2" value="按钮二" class="button"> 
<script type="text/javascript"> 
$("#btn_2").click(function(){ 
$("#div_b1 ul li:first-child") .css("background-color","red"); 
}); 
</script> 
</div> 
</div> 
<span style="color:Red;"><strong>注意：当然，这个效果你也可以用$("#div_b1 ul li:nth-child(1)") .css("background-color","red");来实现。</strong></span> 
</div>

<div class="div"> 
<span class="xiaobiao">3. :last-child用法</span>
 
定义：匹配最后一个子元素 ':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 
 
返回值：Array<Element>
 
实例：将ID为"div_c1"的DIV中每个ul元素的最后1个Li元素的背景色改为红色 
 
<span style="border:blue 1px solid;">代码： $("#div_c1 ul li:last-child") .css("background-color","red");<span style="color:green;"> //点击按钮三"将执行这句代码</span></span> 
<div id="div_c1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_c1"
 
<ul id="ul_c1" style="width:100px; border:#000 1px solid;"> 
ul id="ul_c1" 
<li>LI:C</li> 
<li>LI:C++</li> 
<li>LI:C#</li> 
<li>LI:Java</li> 
<li>LI:JavaScript</li> 
</ul> 
<ul id="ul_c2" style="width:100px; border:#000 1px solid;"> 
ul id="ul_c2" 
<li>LI:Google</li> 
<li>LI:Microsoft</li> 
<li>LI:Apple</li> 
<li>LI:Sun</li> 
<li>LI:Intel</li> 
</ul>

<ul id="ul_c3" style="width:100px; border:#000 1px solid;"> 
ul id="ul_c3" 
<li>Li:onle one</li> 
</ul> 
<div id="div_c5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> 
DIV ID="div_c5" 
<input type="button" id="btn_3" value="按钮三" class="button"> 
<script type="text/javascript"> 
$("#btn_3").click(function(){ 
$("#div_c1 ul li:last-child") .css("background-color","red"); 
}); 
</script> 
</div> 
</div> 
</div>

<div class="div"> 
<span class="xiaobiao">4. :only-child用法</span>
 
定义：如果某个元素是父元素中唯一的子元素，那将会被匹配 如果父元素中含有其他元素，那将不会被匹配。 
 
返回值：Array<Element>
 
实例：将ID为"div_c1"的DIV中每个ul元素中唯一1个Li元素的背景色改为红色 
 
<span style="border:blue 1px solid;">代码： $("#div_d1 ul li:only-child") .css("background-color","red");<span style="color:green;"> //点击按钮四"将执行这句代码</span></span> 
<div id="div_d1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_d1"
 
<ul id="ul_d1" style="width:100px; border:#000 1px solid;"> 
ul id="ul_d1" 
<li>LI:C</li> 
<li>LI:C++</li> 
<li>LI:C#</li> 
<li>LI:Java</li> 
<li>LI:JavaScript</li> 
</ul> 
<ul id="ul_d2" style="width:100px; border:#000 1px solid;"> 
ul id="ul_d2" 
<li>LI:Google</li> 
<li>LI:Microsoft</li> 
<li>LI:Apple</li> 
<li>LI:Sun</li> 
<li>LI:Intel</li> 
</ul>

<ul id="ul_d3" style="width:100px; border:#000 1px solid;"> 
ul id="ul_d3" 
<li>Li:onle one</li> 
</ul> 
<div id="div_d5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> 
DIV ID="div_d5" 
<input type="button" id="btn_4" value="按钮四" class="button"> 
<script type="text/javascript"> 
$("#btn_4").click(function(){ 
$("#div_d1 ul li:only-child") .css("background-color","red"); 
}); 
</script> 
</div> 
</div> 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]