jQuery学习笔记2

今天继续练习基本的jQuery语法，熟悉代码风格

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script src="jquery-1.9.1.js"></script>
 7 <script language="javascript">
 8 <!--以下有错应加$(document).ready(function())>
 9     $(".level1>a").click(function(e) {
10         $(this).addClass("current")
11         .next().show()
12         .parent().siblings().children("a").removeClass("current")
13         .next().hide();
14         return false;
15     });
16 </script>
17 </head>
18 
19 <body>
20 <div class= "box">
21     <ul class="menu">
22         <li class="level1">
23             <a href="#none">衬衫</a>
24             <ul class="level2">
25                 <li><a href="#none">短袖衬衫</a></li>
26                 <li><a href="#none">长袖衬衫</a></li>
27                 <li><a href="#none">短袖T恤</a></li>
28                 <li><a href="#none">长袖T恤</a></li>
29             </ul>
30         </li>
31         <li class="level1">
32             <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">
41             <a href="#none">裤子</a>
42             <ul class="level2">
43                 <li><a href="#none">短裤</a></li>
44                 <li><a href="#none">休闲裤</a></li>
45                 <li><a href="#none">牛仔裤</a></li>
46                 <li><a href="#none">兔烫卡其裤</a></li>
47             </ul>
48         </li>
49     </ul>
50 </div>
51 </body>
52 </html>

7~16行有错，应加$(document).ready(function())

正确的为：

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>导航栏</title>
 6 <link rel="stylesheet" href="css/default.css" type="text/css" />
 7 
 8 <!-- 引入 jQuery -->
 9 <script src="http://www.cnblogs.com/scripts/jquery.js" type="text/javascript"></script>
10 <script type="text/javascript">
11 //等待dom元素加载完毕.
12 $(document).ready(function(){
13     $(".level1 > a").click(function(){
14         $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
15         return false;
16     });
17 });
18 </script>
19 
20 </head>
21 <body>
22 <p>第二步：</p>
23 
24 <div class="box">
25     <ul class="menu">
26         <li class="level1">
27             <a href="#none">衬衫</a>
28             <ul class="level2">
29                 <li><a href="#none">短袖衬衫</a></li>
30                 <li><a href="#none">长袖衬衫</a></li>
31                 <li><a href="#none">短袖T恤</a></li>
32                 <li><a href="#none">长袖T恤</a></li>
33             </ul>
34         </li>
35         <li class="level1">
36             <a href="#none">卫衣</a>
37             <ul class="level2">
38                 <li><a href="#none">开襟卫衣</a></li>
39                 <li><a href="#none">套头卫衣</a></li>
40                 <li><a href="#none">运动卫衣</a></li>
41                 <li><a href="#none">童装卫衣</a></li>
42             </ul>
43         </li>
44         <li class="level1">
45             <a href="#none">裤子</a>
46             <ul class="level2">
47                 <li><a href="#none">短裤</a></li>
48                 <li><a href="#none">休闲裤</a></li>
49                 <li><a href="#none">牛仔裤</a></li>
50                 <li><a href="#none">免烫卡其裤</a></li>
51             </ul>
52         </li>
53     </ul>
54 </div>
55 
56 </body>
57 </html>

 

posted @ 2013-05-03 09:40  yuzhangab  阅读(105)  评论(0)    收藏  举报