jquery学习之1.2-层级选择器

浏览数：33 / 时间：2015年06月09日

层级选择器的学习，主要包括以下几个部分：

prev+next：选择prev元素下的第一个元素（名称为next），不是prev元素下的所有元素（名称为next的）

prev+siblings：选择prev同一级的所有叫siblings的元素

代码如下：

 1 <%@ page language="java" import="java.util.*"
 2  pageEncoding="utf-8"%>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5   <head>
 6     <title>11</title>    
 7   <script type="text/javascript" src="js/jquery-1.11.0.js">
 8   </script>
 9   <script language="javascript">
10    $(document).ready(function()
11   {
12       alert("欢迎来到层级选择器学习界面");
13       //*************改变所有div的背景色为#ff00ff*******
14     $("#bt1").click(function()
15     {
16         $("div").css("background","#ff00ff");    
17     });
18     //*************改变body内所有div的背景色为#ff0001*******
19     $("#bt2").click(function()
20     {
21         $("body>div").css("background","#ff0001");//此处body中div下的div无法变色            
22     });
23     //*************改变id为div1紧接着的div，即div2背景色为#ff00aa*******
24     $("#bt3").click(function()
25     {
26         $("#div1+div").css("background","#ff00aa");            
27     });
28     //*************改变id为div2紧接着的div，即div3背景色为#ffaaaa*******
29     $("#bt4").click(function()
30     {
31         $("#div1~div").css("background","#ffaaaa");            
32     });
33       
34   });
35   
36   //****************************************************** 
37   </script>
38   </head> 
39   <body>
40     <input type="button"  id="bt1" value="改变所有div的背景色为#ff00ff" ></input>
41     <input type="button"  id="bt2" value="body>div 父子关系" ></input>
42     <input type="button"  id="bt3" value="#div1+div 前后关系" ></input>
43     <input type="button"  id="bt4" value="#div1~div prev同辈的所有sibling元素" ></input>  
44     <div id="div1" style="background:grey;border:1px solid;width:20%;height:30%;">div1</div> 
45     <div id="div2"  style="background:white;border:1px solid;width:20%;height:30%;float:left">
46         div2
47         <p>p1第一段</p>
48         <p>p2第二段</p>
49         <div id="div2_01"  style="background:white;border:1px solid;width:20%;height:30%;float:left">div2_01</div>
50     </div>
51     <div id="div3"  style="background:grey;border:1px solid;width:20%;height:30%;float:left">div3</div>   
52     <br>
53   </body>
54 </html>