案例一：（实现效果，鼠标移动到哪个菜单上，哪个菜单会显示二级菜单，移开会收回。）
1<!DOCTYPE html> 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<!DOCTYPE html> 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<!DOCTYPE html> 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<!DOCTYPE html> 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<!DOCTYPE html> 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>
