案例一：（实现效果，鼠标移动到哪个菜单上，哪个菜单会显示二级菜单，移开会收回。）
1
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 *{ margin: 0; padding: 0; list-style: none;}
10 .nav{
11 width: 300px;
12 margin: 100px auto;
13 }
14 .nav li{
15 width: 100px;
16 height: 40px;
17 line-height: 40px;
18 float: left;
19 text-align: center;
20 }
21 .nav li a{
22 display: block;
23 height: 40px;
24 text-decoration: none;
25 color: #333;
26 background: #ccc;
27 }
28 .nav li a:hover{
29 background: pink;
30 }
31 .nav li ul{
32 display: none;
33 }
34 </style>
35 <script src="js/jquery-1.12.4.min.js"></script>
36 <script>
37 $(function(){
38 // $('a').mouseover(function(){
39 // $(this).next().show()
40 // })
41 // $('a').mouseout(function(){
42 // $(this).next().hide()
43 // })
44 $('li').mouseover(function(){
45 $(this).children('ul').show()
46 })
47 $('li').mouseout(function(){
48 $(this).children('ul').hide()
49 })
50 })
51 </script>
52</head>
53<body>
54 <div class="nav">
55 <ul>
56 <li>
57 <a href="###">男星</a>
58 <ul>
59 <li><a href="###">王宝强</a></li>
60 <li><a href="###">.....</a></li>
61 <li><a href="###">.....</a></li>
62 </ul>
63 </li>
64 <li>
65 <a href="###">女星</a>
66 <ul>
67 <li><a href="###">杨幂</a></li>
68 <li><a href="###">柳岩</a></li>
69 <li><a href="###">赵丽颖</a></li>
70 </ul>
71 </li>
72 <li>
73 <a href="###">导演</a>
74 <ul>
75 <li><a href="###">冯小刚</a></li>
76 <li><a href="###">张艺谋</a></li>
77 <li><a href="###">丁黑</a></li>
78 </ul>
79 </li>
80 </ul>
81
82 </div>
83</body>
84</html>
案例二：tab栏（选项卡）
鼠标滑过，显示对应的特殊样式，下面的内容替换为需要的内容。
和无缝滚动一样是专有名词。
eq用下标取数据，index是获取下标。
两行代码有相同的部分，那么可以考虑使用链式编程。
1
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 .tab_con{
10 width:500px;
11 height:350px;
12 margin:50px auto 0;
13 }
14 .tab_btns{
15 height:50px;
16 }
17 .tab_btns input{
18 width:100px;
19 height:50px;
20 background:#ddd;
21 border:0px;
22 outline:none;
23 }
24
25 .tab_btns .active{
26 background:gold;
27 }
28
29 .tab_cons{
30 height:300px;
31 background:gold;
32 }
33
34 .tab_cons div{
35 height:300px;
36 line-height:300px;
37 text-align:center;
38 display:none;
39 font-size:30px;
40 }
41
42 .tab_cons .current{
43 display:block;
44 }
45 </style>
46 <script src="js/jquery-1.12.4.min.js"></script>
47 <script>
48 $(function(){
49 // 按钮鼠标移入: 这个按钮高亮（添加类active），下面要显示对应的内容（添加类current）
50 $('input').mouseover(function(){
51 // $(this).addClass('active')
52 // $(this).siblings().removeClass()
53
54 $(this).addClass('active').siblings().removeClass()
55
56 // 显示内容 三个div -- 获取到鼠标移入的菜单的下标，用这个下标在三个内容div中选出和这个下标相等的div显示即可
57 var num = $(this).index()
58 // alert(num)
59 // $('.tab_cons div').eq(num).addClass('current')
60 // // 已经显示的div的兄弟标签隐藏
61 // $('.tab_cons div').eq(num).siblings().removeClass()
62 $('.tab_cons div').eq(num).addClass('current').siblings().removeClass()
63 })
64 })
65 </script>
66</head>
67
68<body>
69 <div class="tab_con">
70 <div class="tab_btns">
71 <input type="button" value="按钮一" class="active">
72 <input type="button" value="按钮二">
73 <input type="button" value="按钮三">
74 </div>
75 <div class="tab_cons">
76 <div class="current">按钮一对应的内容</div>
77 <div>按钮二对应的内容</div>
78 <div>按钮三对应的内容</div>
79 </div>
80 </div>
81</body>
82</html>
案例三：层级菜单
1
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>层级菜单</title>
6 <style type="text/css">
7 body{
8 font-family:'Microsoft Yahei';
9 }
10 body,ul{
11 margin:0px;
12 padding:0px;
13 }
14
15 ul{list-style:none;}
16
17
18 .menu{
19 width:200px;
20 margin:20px auto 0;
21 }
22
23 .menu .level1,.menu li ul a{
24 display:block;
25 width:200px;
26 height:30px;
27 line-height:30px;
28 text-decoration:none;
29 background-color:#3366cc;
30 color:#fff;
31 font-size:16px;
32 text-indent:10px;
33 }
34
35 .menu .level1{
36 border-bottom:1px solid #afc6f6;
37
38 }
39
40 .menu li ul a{
41 font-size:14px;
42 text-indent:20px;
43 background-color:#7aa1ef;
44
45 }
46
47 .menu li ul li{
48 border-bottom:1px solid #afc6f6;
49 }
50
51
52
53 .menu li ul{
54 display:none;
55 }
56
57 .menu li ul.current{
58 display:block;
59 }
60
61 .menu li ul li a:hover{
62 background-color:#f6b544;
63 }
64
65
66 </style>
67
68 <script src="js/jquery-1.12.4.min.js"></script>
69 <script type="text/javascript">
70 $(function(){
71 // 单击一级菜单，滑动显示对应的二级菜单 -- 小ul
72 $('.level1').click(function(){
73 // $(this).next().slideDown();
74 // $(this).parent().siblings().children('ul').slideUp()
75 $(this).next().slideDown().parent().siblings().children('ul').slideUp()
76 })
77 })
78 </script>
79</head>
80<body>
81 <ul class="menu">
82 <li>
83 <a href="#" class="level1">手机</a>
84 <ul class="current">
85 <li><a href="#">iPhone X 256G</a></li>
86 <li><a href="#">红米4A 全网通</a></li>
87 <li><a href="#">HUAWEI Mate10</a></li>
88 <li><a href="#">vivo X20A 4GB</a></li>
89 </ul>
90 </li>
91 <li>
92 <a href="#" class="level1">笔记本</a>
93 <ul>
94 <li><a href="#">MacBook Pro</a></li>
95 <li><a href="#">ThinkPad</a></li>
96 <li><a href="#">外星人(Alienware)</a></li>
97 <li><a href="#">惠普(HP)薄锐ENVY</a></li>
98 </ul>
99 </li>
100 <li>
101 <a href="#" class="level1">电视</a>
102 <ul>
103 <li><a href="#">海信(hisense)</a></li>
104 <li><a href="#">长虹(CHANGHONG)</a></li>
105 <li><a href="#">TCL彩电L65E5800A</a></li>
106 </ul>
107 </li>
108 <li>
109 <a href="#" class="level1">鞋子</a>
110 <ul>
111 <li><a href="#">新百伦</a></li>
112 <li><a href="#">adidas</a></li>
113 <li><a href="#">特步</a></li>
114 <li><a href="#">安踏</a></li>
115 </ul>
116 </li>
117 <li>
118 <a href="#" class="level1">玩具</a>
119 <ul>
120 <li><a href="#">乐高</a></li>
121 <li><a href="#">费雪</a></li>
122 <li><a href="#">铭塔</a></li>
123 <li><a href="#">贝恩斯</a></li>
124 </ul>
125 </li>
126
127 </ul>
128</body>
129</html>
案例四：获得和失去焦点
此案例是老版本的实现方法，现在html5.0会使用placeholder
1
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="js/jquery-1.12.4.min.js"></script>
9 <script>
10 $(function(){
11 $('input').focus(function(){
12 // 如果是默认值的时候才清空
13 if($(this).val() == '请输入用户名' ){
14 $(this).val('')
15 }
16 })
17 $('input').blur(function(){
18 // 如果用户没有输入的时候 -- 输入的值为空 -- val为空
19 if($(this).val() == ''){
20 $(this).val('请输入用户名')
21 }
22 })
23 })
24 </script>
25</head>
26<body>
27 <input type="text" value="请输入用户名">
28</body>
29</html>
案例五：父级选择器
1
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 .left,.right{
10 position: fixed;
11 top: 250px;
12 }
13 .left{
14 left: 0;
15 }
16 .right{
17 right: 0;
18 }
19 .left span,.right span{
20 width: 20px;
21 height: 20px;
22 background: #ccc;
23 font-size: 14px;
24 color: #333;
25 position: absolute;
26 right: 0;
27 top: 0;
28 text-align: center;
29 cursor: pointer;
30 }
31 </style>
32 <script src="../js/jquery-1.12.4.min.js"></script>
33 <script>
34 $(function(){
35 // 左侧的span单击，隐藏left
36 // $('.left span').click(function(){
37 // $('.left').hide(500)
38 // })
39 // $('.right span').click(function(){
40 // $('.right').hide(500)
41 // })
42
43 // 单击span，隐藏这个span 的父级
44 $('span').click(function(){
45 $(this).parent().hide(500)
46 })
47 })
48 </script>
49</head>
50<body>
51 <div class="left"><img src="images/left.jpg" alt=""><span>X</span></div>
52 <div class="right"><img src="images/right.jpg" alt=""><span>X</span></div>
53</body>
54</html>
