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

 

你可能感兴趣的:(jquery)