jQuery 선택기 사용법(2. Level)_jquery

이 기사 시리즈는 기본 기사, 계층 기사, 단순 기사, 콘텐츠 기사, 가시성 기사, 속성 기사, 하위 요소 기사, 양식 기사 및 양식 개체 속성 기사의 9개 기사로 나뉩니다.
이 시리즈 기사에 대한 제안이나 의견이 있는 경우 이메일: sjzlgt@qq.com으로 보내주세요.
기술 기사 시리즈를 작성하는 것은 이번이 처음이므로, 오류나 코드 버그가 있을 수 있으니 지적해 주시면 감사하겠습니다!

온라인 주소 http://demo.jb51.net/html/jquery/jQuery-Selectors-2-bynet.htm

<title>jQuery-Selectors-2-bynet</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;} .nei_div{border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px;} </style> <div class="div"> <div style="width:100%; text-align:center; font-size:16px; font-weight:bold;"> </div>jQuery-Selector(선택기) 사용법 사용 (2. 레벨) <br> 이 기사 시리즈에서는 주로 jQuery 프레임워크에서 선택기를 사용하는 방법에 대해 설명하며 단순성과 포괄성을 바탕으로 예제를 통해 설명할 것입니다. 나의 학습 방법은 매우 깊습니다. 먼저 시작한 다음 발전하세요! <br> 이 기사 시리즈는 기본 기사, 계층 기사, 단순 기사, 콘텐츠 기사, 가시성 기사, 속성 기사, 하위 요소 기사, 양식 기사, 양식 개체 속성 기사, 총 9개 기사로 구분됩니다. . <br> 이 기사 시리즈에 대한 제안이나 의견이 있는 경우 이메일(sjzlgt@qq.com)로 보내주십시오. <br> 기술적인 글을 쓰는 것이 처음이라 실수나 코드 버그가 있을 수 있으니 지적해주시면 감사하겠습니다! <a href="http://jquery.com/" target="_blank"> jQuery에 대해 자세히 알아보려면 </a>jQuery 공식 웹사이트<br>를 방문하세요. <span style="color:Red;"> <strong><a href="http://www.cnblogs.com/bynet/" target="_blank">저작권 : code-cat </a>블로그</strong> 전재시 출처와 저작권 정보를 꼭 지켜주세요! </span> </div> <div class="div"> <br> 이 글에서 언급한 네 가지 선택기의 범위는 쉽게 혼동되고 이해하기 어렵기 때문입니다. 내가 제시한 네 가지 예는 여전히 그 범위를 설명할 수 있으며 매우 유용합니다. 명확하게 말하면, 독자들은 이 네 가지 예를 주의 깊게 연구하고 비교해야 합니다! 소스코드를 다운받아서 조건을 바꿔보고 효과를 확인해 보세요! <a href="http://www.cnblogs.com/bynet/archive/2009/11/30/1613635.html" target="_blank"> jQuery 선택기 사용의 유연성은 매우 높습니다. 이 시점에서 이전 기사 </a>에서 언급한 선택기 조합과 이 기사의 4가지 선택기를 결합할 수 있습니다. 결과를 보시면 충격적인 결과가 나올 것이라 믿습니다! </div> <div class="div"> <span class="xiaobiao">1. 조상 후손 사용법</span><br> 정의: 주어진 상위 요소 아래에 있는 모든 적격 하위 요소와 일치 <br> 반환 값: 배열<Element><br> 매개변수: 조상(Selector): 유효한 선택기 자손(Selector): 요소를 일치시키는 데 사용되는 선택기, 첫 번째 선택기 뒤에 있음 세대 요소 <br> 예: ID가 "div_1"인 DIV에 있는 모든 입력 요소의 배경색을 빨간색으로 변경합니다. <br> <span style="border:blue 1px solid;">코드: $("div_1 input").css("Background-color","red");<span style="color:green;"> //이 코드를 실행하려면 버튼 1을 클릭하세요. </span></span> <div id="div_1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 양식 ID="div_1"<br> <input type="text" value="input"> <input type="text"> <div id="div_2" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; "> DIV ID="div_2"<br> <input type="text"> </div> <div id="div_3" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; "> DIV ID="div_3"<br> <input type="text" value="input"> </div> <div id="div_4" style="border:#333 1px solid; width:200px;margin-right:5px;padding-left:5px; "> DIV ID="div_4"<br> <input type="text"> </div> <div id="div_5" style="width:625px; border:#333 1px solid; margin-top:5px; padding-left:5px;"> DIV ID="div_5" <div id="div_5_1" style="width:600px; border:#333 1px solid; margin-top:5px; margin-bottom:5px;"> DIV ID="div_5_1" <input type="text"> <input type="button" id="btn_1" value="按钮一" class="button"> </div> </div> </div> <span style="color:Red;"> <strong></strong>참고: 이 예를 두 번째 사용 예와 비교하여 제어 범위를 확인하세요! </span> </div> <script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <div class="div"> <span class="xiaobiao">2. parent > child用法</span><br> 定义：在给定的父元素下匹配所有的子元素<br> 返回值：Array<Element><br> 参数：parent (Selector):任何有效选择器 child (Selector): 用以匹配元素的选择器，并且它是第一个选择器的子元素 <br> 实例：将ID为"div_a1"的DIV中所有的Input元素的背景色改为红色<br> <span style="border:blue 1px solid;">代码： $("#div_a1 > input").css("background-color","red");<span style="color:green;"> //点击按钮二将执行这句代码</span></span> <div id="div_a1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> DIV ID="div_a1"<br> <input type="text" value="input"> <input type="text"> <div id="div_a2" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; "> DIV ID="div_a2"<br> <input type="text"> </div> <div id="div_a3" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; "> DIV ID="div_a3"<br> <input type="text" value="input"> </div> <div id="div_a4" style="border:#333 1px solid; width:200px;margin-right:5px;padding-left:5px; "> DIV ID="div_a4"<br> <input type="text"> </div> <div id="div_a5" style="width:625px; border:#333 1px solid; margin-top:5px; padding-left:5px;"> DIV ID="div_a5" <div id="div_a5_1" style="width:600px; border:#333 1px solid; margin-top:5px; margin-bottom:5px;"> DIV ID="div_a5_1" <input type="text"> <input type="button" id="btn_2" value="按钮二" class="button"> <script type="text/javascript"> $("#btn_2").click(function(){ $("#div_a1 > input").css("background-color","red"); }); </script> </div> </div> </div> </div> <div class="div"> <span class="xiaobiao">3. prev + next用法</span><br> 定义：匹配所有紧接在 prev 元素后的 next 元素<br> 返回值：Array<Element><br> 参数：prev (Selector):任何有效选择器 next (Selector):一个有效选择器并且紧接着第一个选择器<br> 实例：将ID为"div_b1"的DIV中所有span元素后紧跟的input元素的背景色改为红色<br> <span style="border:blue 1px solid;">代码：$("#div_b1 span + input").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"<br> <input type="text" value="input">  <span style="background-color:Green;">span</span> <input type="text" value="input" style="width:50px;"> <input type="text" value="input" style="width:50px;"> <div id="div_b2" class="nei_div"> DIV ID="div_b2"<br> <span style="background-color:Green;">span</span> <input type="text" value="input" style="width:50px;"> <input type="text" value="input" style="width:50px;"> </div> <div id="div_b3" class="nei_div"> DIV ID="div_b3"<br> <span style="background-color:Green;">span</span> <input type="text" value="input" style="width:50px;"> <input type="text" value="input" style="width:50px;"> </div> <div id="div_b4" style="border:#333 1px solid; width:200px;margin-right:5px;padding-left:5px; "> DIV ID="div_b4"<br> <input type="text" value="input" style="width:50px;"> <span style="background-color:Green;">span</span> <input type="text" value="input" style="width:50px;"> </div> <div id="div_b5" style="width:625px; border:#333 1px solid; margin-top:5px; padding-left:5px;"> DIV ID="div_b5" <div id="div_b5_1" style="width:600px; border:#333 1px solid; margin-top:5px; margin-bottom:5px;"> DIV ID="div_b5_1" <span style="background-color:Green;">span</span> <input type="text"> <input type="button" id="btn_3" value="按钮三" class="button"> <script type="text/javascript"> $("#btn_3").click(function(){ $("#div_b1 span + input").css("background-color","red"); }); </script> </div> </div> </div> <span style="color:Red;"><strong>注意：第一个选择器我用了ancestor descendant用法，您也可以尝试其它用法。本例请 与下面第4点的实例作对比并看效果！</strong></span> </div> <div class="div"> <span class="xiaobiao">4. prev ~ siblings用法</span><br> 定义：匹配 prev 元素之后的所有 siblings 元素<br> 返回值：Array<Element><br> 参数：prev (Selector):任何有效选择器 siblings (Selector):一个选择器，并且它作为第一个选择器的同辈<br> 实例：将ID为"div_c1"的DIV中所有与span元素之后平级的input元素的背景色改为红色<br> <span style="border:blue 1px solid;">代码：$("#div_c1 span ~ input").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"<br> <input type="text" value="input"> <span style="background-color:Green;">span</span><input type="text"> <div id="div_c2" class="nei_div"> DIV ID="div_c2"<br> <span style="background-color:Green;">span</span> <input type="text" value="input" style="width:50px;"> <input type="text" value="input" style="width:50px;"> </div> <div id="div_c3" class="nei_div"> DIV ID="div_c3"<br> <span style="background-color:Green;">span</span> <input type="text" value="input" style="width:50px;"> <input type="text" value="input" style="width:50px;"> </div> <div id="div_c4" style="border:#333 1px solid; width:200px;margin-right:5px;padding-left:5px; "> DIV ID="div_c4"<br> <input type="text" value="input" style="width:50px;"> <span style="background-color:Green;">span</span> <input type="text" value="input" style="width:50px;"> </div> <div id="div_c5" style="width:625px; border:#333 1px solid; margin-top:5px; padding-left:5px;"> DIV ID="div_c5" <div id="div_c5_1" style="width:600px; border:#333 1px solid; margin-top:5px; margin-bottom:5px;"> DIV ID="div_c5_1" <span style="background-color:Green;">span</span> <input type="text" value="input" style="width:50px;"> <input type="text" value="input" style="width:50px;"> <input type="button" id="btn_4" value="按钮四" class="button"> <script type="text/javascript"> $("#btn_4").click(function(){ $("#div_c1 span ~ input").css("background-color","red"); }); </script> </div> </div> </div> <span style="color:red;"><strong>注意：DIV ID="div_c1" 和 ID="div_c4"中的span元素前的input并未改变背景色，因为 第二个选择器查找第一个选择器之后的元素</strong></span> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

运行后，需要刷新下。