jQuery学习笔记(3)

children():只考虑子元素而不考虑其他后代元素

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <title></title>
 4     <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6 
 7         $(function () {
 8 
 9             var $body = $("body").children();
10             var $p = $("p").children();
11             var $ul = $("ul").children();
12 
13             alert($body.length); //2个元素
14             alert($p.length); //0个元素
15             alert($ul.length); //3个元素
16 
17             for (var i = 0; i < $ul.length; i++) {
18 
19                 alert($ul[i].innerHTML);//
20             }
21 
22         });
23     </script>
24 </head>
25 <body>
26     <p>
27         你喜欢的水果是?</p>
28     <ul>
29         <li>苹果</li>
30         <li>橘子</li>
31         <li>香蕉</li>
32     </ul>
33 </body>
34 </html>
View Code

next():后面紧邻的同辈元素 

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <title></title>
 4     <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6 
 7         $(function () {
 8 
 9             var $p1 = $("p").next(); //next()方法 后面紧邻的同辈元素
10             var $p2 = $p1.children();
11 
12             for (var i = 0; i < $p2.length; i++) {
13 
14                 alert($p2[i].innerHTML);
15             }
16 
17         });
18     </script>
19 </head>
20 <body>
21     <p>
22         你喜欢的水果是?</p>
23     <ul>
24         <li>苹果</li>
25         <li>橘子</li>
26         <li>香蕉</li>
27     </ul>
28 </body>
29 </html>
View Code

prev():前面紧邻的同辈元素 

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <title></title>
 4     <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6 
 7         $(function () {
 8 
 9             var $ul = $("ul").prev(); //前面紧邻的同辈元素
10             alert($ul.text());
11 
12 
13         });
14     </script>
15 </head>
16 <body>
17     <p>
18         你喜欢的水果是?</p>
19     <ul>
20         <li>苹果</li>
21         <li>橘子</li>
22         <li>香蕉</li>
23     </ul>
24 </body>
25 </html>
View Code

closest():取得最近的匹配元素,首先检查当前元素是否匹配,如果匹配则直接返回元素本身,如果不匹配则向上查找父元素 

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <title></title>
 4     <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6 
 7         $(function () {
 8 
 9 
10             $(document).bind("click", function (e) {
11                 $(e.target).closest("li").css("color","green");
12             });
13 
14 
15         });
16     </script>
17 </head>
18 <body>
19     <p>
20         你喜欢的水果是?</p>
21     <ul>
22         <li>苹果</li>
23         <li>橘子</li>
24         <li>香蕉</li>
25     </ul>
26 </body>
27 </html>
View Code

 siblings():前后所有的同辈元素 

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <title></title>
 4     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6 
 7         $(function () {
 8 
 9             $(".level1>a").click(function () {
10                 $(this).addClass("current")  //给当前元素添加"current"属性
11                  .next().show()              //下一个元素显示
12                 .parent().siblings().children("a").removeClass("current")//父辈的同辈元素的子元素<a>移除"current"样式
13                 .next().hide();//它们的下一个元素隐藏
14                 return false;
15             });
16         });
17     
18     </script>
19 </head>
20 <body>
21     <form id="form1" runat="server">
22     <div>
23         <ul class="menu">
24             <li class="level1"><a href="#none">衬衫</a>
25                 <ul class="level2">
26                     <li><a href="#none">短袖衬衫</a></li>
27                     <li><a href="#none">长袖衬衫</a></li>
28                     <li><a href="#none">短袖T恤</a></li>
29                     <li><a href="#none">长袖T恤</a></li>
30                 </ul>
31             </li>
32             <li class="level1"><a href="#none">卫衣</a>
33                 <ul class="level2">
34                     <li><a href="#none">开襟卫衣</a></li>
35                     <li><a href="#none">套头卫衣</a></li>
36                     <li><a href="#none">运动卫衣</a></li>
37                     <li><a href="#none">童装卫衣</a></li>
38                 </ul>
39             </li>
40             <li class="level1"><a href="#none">裤子</a>
41                 <ul class="level2">
42                     <li><a href="#none">短裤</a></li>
43                     <li><a href="#none">休闲裤</a></li>
44                     <li><a href="#none">牛仔裤</a></li>
45                     <li><a href="#none">免烫卡其裤</a></li>
46                 </ul>
47             </li>
48         </ul>
49     </div>
50     </form>
51 </body>
52 </html>
View Code

 

posted on 2015-01-17 15:44  水语者9  阅读(92)  评论(0)  编辑  收藏  举报