jQuery 선택기 사용(7개, 하위 요소)_jquery

이 기사 시리즈는 기본 기사, 계층 기사, 단순 기사, 콘텐츠 기사, 가시성 기사, 속성 기사, 하위 요소 기사, 양식 기사 및 양식 개체 속성 기사의 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> <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> <div class="div"> <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을 클릭하세요.</element></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> </element> </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> </element> </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> </element> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]