1. table全反选
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <button class="all" onclick="func_all()">全选</button> 9 <button class="reverse" onclick="func_reverse()">反选</button> 10 <button class="cancel" onclick="func_cancel()">取消</button> 11 <table> 12 <tr> 13 <td><input type="checkbox" class="item"></td> 14 <td>111</td> 15 <td>111</td> 16 <td>111</td> 17 </tr> 18 <tr> 19 <td><input type="checkbox" class="item"></td> 20 <td>111</td> 21 <td>111</td> 22 <td>111</td> 23 </tr> 24 <tr> 25 <td><input type="checkbox" class="item"></td> 26 <td>111</td> 27 <td>111</td> 28 <td>111</td> 29 </tr> 30 <tr> 31 <td><input type="checkbox" class="item"></td> 32 <td>111</td> 33 <td>111</td> 34 <td>111</td> 35 </tr> 36 37 </table> 38 </body> 39 <script src="../jquery-3.2.1.js"></script> 40 <script> 41 function func_all() { 42 $(':checkbox').prop('checked',true) 43 } 44 function func_cancel() { 45 $(':checkbox').prop('checked',false) 46 } 47 function func_reverse() { 48 49 var $res=$(':checkbox').prop('checked'); 50 if ($res){ 51 $(':checkbox').prop('checked',false) 52 }else{ 53 $(':checkbox').prop('checked',true) 54 } 55 } 56 </script> 57 </html>
升级版：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <button class="all">全选</button> 9 <button class="reverse">反选</button> 10 <button class="cancel">取消</button> 11 <table> 12 <tr> 13 <td><input type="checkbox" class="item"></td> 14 <td>111</td> 15 <td>111</td> 16 <td>111</td> 17 </tr> 18 <tr> 19 <td><input type="checkbox" class="item"></td> 20 <td>111</td> 21 <td>111</td> 22 <td>111</td> 23 </tr> 24 <tr> 25 <td><input type="checkbox" class="item"></td> 26 <td>111</td> 27 <td>111</td> 28 <td>111</td> 29 </tr> 30 <tr> 31 <td><input type="checkbox" class="item"></td> 32 <td>111</td> 33 <td>111</td> 34 <td>111</td> 35 </tr> 36 37 </table> 38 </body> 39 <script src="../jquery-3.2.1.js"></script> 40 <script> 41 $('button').click(function () { 42 if($(this).text()=='全选'){ 43 $(':checkbox').prop('checked',true) 44 } 45 else if($(this).text()=='取消'){ 46 $(':checkbox').prop('checked',false) 47 } 48 else{ 49 $(':checkbox').prop('checked',!$(':checkbox').prop('checked')) 50 } 51 }) 52 </script> 53 </html>
2. 左侧菜单
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .menu{ 8 height: 500px; 9 30%; 10 background-color: gainsboro; 11 float: left; 12 } 13 14 .title{ 15 line-height: 50px; 16 background-color: #425a66; 17 color: forestgreen; 18 } 19 20 .hide{ 21 display: none; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="outer"> 27 <div class="menu"> 28 <div class="item"> 29 <div class="title" onclick="show(this);">菜单一</div> 30 <div class="con"> 31 <div>111</div> 32 <div>111</div> 33 <div>111</div> 34 </div> 35 </div> 36 <div class="item"> 37 <div class="title" onclick="show(this);">菜单二</div> 38 <div class="con hide"> 39 <div>111</div> 40 <div>111</div> 41 <div>111</div> 42 </div> 43 </div> 44 <div class="item"> 45 <div class="title" onclick="show(this);">菜单三</div> 46 <div class="con hide"> 47 <div>111</div> 48 <div>111</div> 49 <div>111</div> 50 </div> 51 </div> 52 53 </div> 54 </div> 55 </body> 56 <script src="../jquery-3.2.1.js"></script> 57 <script> 58 function show(self) { 59 // console.log(self.innerText); // self是一个DOM对象 60 61 // console.log($(self).text())； // $(self):当前操作标签对象 62 // $(self).next().removeClass('hide'); 63 // $(self).parent().siblings().children('.con').addClass('hide') 64 65 66 $(self).next().removeClass('hide').parent().siblings().children('.con').addClass('hide') 67 } 68 </script> 69 </html>
3. tab 切换升级版
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: -5px; 9 padding: 0; 10 } 11 .nav li{ 12 display: inline-block; 13 33%; 14 text-align: center; 15 line-height: 100px; 16 background-color: green; 17 18 } 19 .nav .active{ 20 background-color: blue; 21 22 } 23 .content{ 24 background-color: grey; 25 height: 800px; 26 100% 27 } 28 .content .hide{ 29 display: none; 30 } 31 32 </style> 33 </head> 34 <body> 35 <div class="outer"> 36 <ul class="nav"> 37 <li f="con1" class="active">菜单一</li> 38 <li f="con2">菜单二</li> 39 <li f="con3">菜单三</li> 40 </ul> 41 <div class="content"> 42 <div class="con1">111111</div> 43 <div class="con2 hide">2222222</div> 44 <div class="con3 hide">33333333</div> 45 </div> 46 </div> 47 </body> 48 <script src="../jquery-3.2.1.js"></script> 49 <script> 50 $('.outer ul li').click(function () { 51 $(this).addClass('active').siblings().removeClass('active'); 52 var $name=$(this).attr('f'); 53 $('.'+$name).removeClass('hide').siblings().addClass('hide') 54 }) 55 </script> 56 </html>
4. 复制样式条
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="box"> 9 <div class="item"> 10 <input type="button" value="+"> 11 <input type="text"> 12 </div> 13 </div> 14 </body> 15 <script src="../jquery-3.2.1.js"></script> 16 <script> 17 $("[value='+']").click(function () { 18 var $ele=$(this).parent().clone(); 19 $ele.children(':button').val('-').click(function () { 20 console.log($(this)[0]); 21 $(this).parent().remove() 22 }); 23 $('.box').append($ele) 24 }) 25 </script> 26 </html>
5. 返回顶部
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .back{ 12 background-color: wheat; 13 } 14 .top{ 15 background-color: blue; 16 position: fixed; 17 line-height:40px; 18 100px; 19 right:10px; 20 bottom: 10px; 21 text-align: center; 22 display: none; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="back"> 28 <p>ppppppppppppppppp</p> 29 <p>ppppppppppppppppp</p> 30 <p>ppppppppppppppppp</p> 31 <p>ppppppppppppppppp</p> 32 <p>ppppppppppppppppp</p> 33 <p>ppppppppppppppppp</p> 34 <p>ppppppppppppppppp</p> 35 <p>ppppppppppppppppp</p> 36 <p>ppppppppppppppppp</p> 37 <p>ppppppppppppppppp</p> 38 <p>ppppppppppppppppp</p> 39 <p>ppppppppppppppppp</p> 40 <p>ppppppppppppppppp</p> 41 <p>ppppppppppppppppp</p> 42 <p>ppppppppppppppppp</p> 43 <p>ppppppppppppppppp</p> 44 <p>ppppppppppppppppp</p> 45 <p>ppppppppppppppppp</p> 46 <p>ppppppppppppppppp</p> 47 <p>ppppppppppppppppp</p> 48 <p>ppppppppppppppppp</p> 49 <p>ppppppppppppppppp</p> 50 <p>ppppppppppppppppp</p> 51 <p>ppppppppppppppppp</p> 52 <p>ppppppppppppppppp</p> 53 <p>ppppppppppppppppp</p> 54 <p>ppppppppppppppppp</p> 55 <p>ppppppppppppppppp</p> 56 <p>ppppppppppppppppp</p> 57 <p>ppppppppppppppppp</p> 58 <p>ppppppppppppppppp</p> 59 <p>ppppppppppppppppp</p> 60 <p>ppppppppppppppppp</p> 61 <p>ppppppppppppppppp</p> 62 <p>ppppppppppppppppp</p> 63 <p>ppppppppppppppppp</p> 64 <p>ppppppppppppppppp</p> 65 <p>ppppppppppppppppp</p> 66 <p>ppppppppppppppppp</p> 67 <p>ppppppppppppppppp</p> 68 <p>ppppppppppppppppp</p> 69 <p>ppppppppppppppppp</p> 70 <p>ppppppppppppppppp</p> 71 <p>ppppppppppppppppp</p> 72 <p>ppppppppppppppppp</p> 73 <p>ppppppppppppppppp</p> 74 <p>ppppppppppppppppp</p> 75 <p>ppppppppppppppppp</p> 76 <p>ppppppppppppppppp</p> 77 <p>ppppppppppppppppp</p> 78 <p>ppppppppppppppppp</p> 79 </div> 80 <div class="top">返回顶部</div> 81 </body> 82 <script src="../jquery-3.2.1.js"></script> 83 <script> 84 $('.top').click(function () { 85 $(window).scrollTop(0) 86 }); 87 $(window).scroll(function () { 88 89 if($(window).scrollTop()>200){ 90 $('.top').show() 91 } 92 else{ 93 $('.top').hide() 94 } 95 }) 96 </script> 97 </html>
6. 注册实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form action="" id="iform"> 9 用户名：<input type="text" name="username" class="con" mark="用户名"><br> 10 密 码：<input type="password" name="passwd" class="con" mark="密码"><br> 11 <input type="submit" value="submit" class="submit"> 12 </form> 13 </body> 14 <script src="jquery-3.2.1.js"></script> 15 <script> 16 17 18 19 20 21 22 // function f(){ 23 // for(var i=0;i<4;i++){ 24 // if (i==2){ 25 // return 26 // } 27 // console.log(i) 28 // } 29 // } 30 // 31 // f(); 32 33 34 // li=[11,22,33,44]; 35 // $.each(li,function(i,v){ 36 // if (v==33){ 37 // return false; 38 // } 39 // console.log(v) 40 // }); 41 42 43 $('#iform .submit').click(function(){ 44 var flag=true; 45 $('#iform .con').each(function () { 46 if($(this).val().trim().length==0){ 47 var span=$('<span>'); 48 var mark=$(this).attr('mark'); 49 span.text(mark+'不能为空'); 50 $(this).after(span); 51 flag=false; 52 return false; 53 } 54 }); 55 return flag 56 }) 57 58 </script> 59 </html>
7. 轮播图
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .main{ 8 position: relative; 9 height:340px; 10 590px; 11 top:100px; 12 left:400px; 13 border: solid black 1px; 14 } 15 .main .picture ul li{ 16 list-style: none; 17 position: absolute; 18 top: 0; 19 left: 0; 20 display: none; 21 } 22 .main .button_page{ 23 position: absolute; 24 bottom: 18px; 25 left:150px; 26 27 } 28 .main .button_page ul li{ 29 list-style: none; 30 display: inline-block; 31 height:22px; 32 22px; 33 border-radius: 50%; 34 background-color: grey; 35 text-align: center; 36 margin-left: 5px; 37 38 } 39 .button_change{ 40 position: absolute; 41 30px; 42 line-height:50px; 43 background-color: grey; 44 opacity: 0.5; 45 top:50%; 46 margin-top: -25px; 47 font-size:30px; 48 text-align: center; 49 display: none; 50 } 51 .button_left{ 52 left:0; 53 } 54 .button_right{ 55 right:0; 56 } 57 .main:hover .button_change{ 58 display: block; 59 } 60 .main .button_page ul .active{ 61 background-color: red; 62 } 63 </style> 64 </head> 65 <body> 66 <div class="main"> 67 <div class="picture"> 68 <ul> 69 <li class="page" style="display: block"><a href=""><img src="https://img30.360buyimg.com/da/jfs/t6115/150/946379232/196454/2b3ae306/592e6966Nf9939a8f.jpg" alt=""></a></li> 70 <li class="page"><a href=""><img src="https://img1.360buyimg.com/da/jfs/t5851/87/522945316/109618/fa7ddbe8/591fee6bN6fe1f63a.jpg" alt=""></a></li> 71 <li class="page"><a href=""><img src="https://img1.360buyimg.com/da/jfs/t5869/350/2200649352/73525/47c5887d/592e7197N55ad6d99.jpg" alt=""></a></li> 72 <li class="page"><a href=""><img src="https://img30.360buyimg.com/da/jfs/t6115/150/946379232/196454/2b3ae306/592e6966Nf9939a8f.jpg" alt=""></a></li> 73 <li class="page"><a href=""><img src="https://m.360buyimg.com/babel/jfs/t5947/73/1004360771/85890/36736fc7/592e579aN827c74a0.jpg" alt=""></a></li> 74 <li class="page"><a href=""><img src="https://img20.360buyimg.com/da/jfs/t5770/314/2320258199/80400/88c5740a/592f8abcN33219d1c.jpg" alt=""></a></li> 75 <li class="page"><a href=""><img src="https://img11.360buyimg.com/da/jfs/t5812/137/2250930076/97370/ec3ac05d/592f84c8N2f5e2d02.jpg" alt=""></a></li> 76 <li class="page"><a href=""><img src="https://img10.360buyimg.com/da/jfs/t4384/72/1363317211/164062/f24d89e/58c0b215N87e464e0.jpg" alt=""></a></li> 77 </ul> 78 </div> 79 <div class="button_page"> 80 <ul> 81 <li class="active"></li> 82 <li></li> 83 <li></li> 84 <li></li> 85 <li></li> 86 <li></li> 87 <li></li> 88 <li></li> 89 </ul> 90 </div> 91 92 <div class="button_left button_change"> < </div> 93 <div class="button_right button_change"> > </div> 94 95 </div> 96 97 </body> 98 <script src="../jquery-3.2.1.js"></script> 99 <script> 100 // 自动轮播 ：初始值为第一张图片，第一个下标变红，一秒后触发函数执行，i变为1，图片变为第二张，第二个下标变红 101 // 当最后一张图片播完时i为7，触发判断条件i变为-1，重新从第一张图片，即i=0时播放 102 var i=0; 103 function move() { 104 if(i==7){ 105 i=-1 106 } 107 i++; 108 $('.page').eq(i).fadeIn(500).siblings().fadeOut(500); 109 $('.button_page ul li').eq(i).addClass('active').siblings().removeClass('active'); 110 111 } 112 function move_left() { 113 if(i==0){ 114 i=8 115 } 116 i--; 117 $('.page').eq(i).fadeIn(500).siblings().fadeOut(500); 118 $('.button_page ul li').eq(i).addClass('active').siblings().removeClass('active'); 119 120 } 121 var ID=setInterval(move,1000); 122 // 手动轮播 123 $('.main').hover(function () { 124 clearInterval(ID) 125 },function () { 126 ID=setInterval(move,1000) 127 }); 128 129 $('.button_page ul li').mouseover(function () { 130 i=$(this).index(); 131 $('.page').eq(i).fadeIn(500).siblings().fadeOut(500); 132 $(this).addClass('active').siblings().removeClass('active'); 133 }) 134 //点击事件 135 136 $('.button_left').click(move_left); 137 $('.button_right').click(move); 138 </script> 139 </html>
8. 模态对话框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .back{ 8 background-color: rebeccapurple; 9 height: 2000px; 10 } 11 12 .shade{ 13 position: fixed; 14 top: 0; 15 bottom: 0; 16 left:0; 17 right: 0; 18 background-color: coral; 19 opacity: 0.4; 20 } 21 22 .hide{ 23 display: none; 24 } 25 26 .models{ 27 position: fixed; 28 top: 50%; 29 left: 50%; 30 margin-left: -100px; 31 margin-top: -100px; 32 height: 200px; 33 200px; 34 background-color: gold; 35 36 } 37 </style> 38 </head> 39 <body> 40 <div class="back"> 41 <input id="ID1" type="button" value="click" onclick="action1(this)"> 42 </div> 43 44 <div class="shade hide"></div> 45 <div class="models hide"> 46 <input id="ID2" type="button" value="cancel" onclick="action2(this)"> 47 </div> 48 49 50 <script src="jquery-1.11.3.min.js"></script> 51 <script> 52 53 function action1(self){ 54 $(self).parent().siblings().removeClass("hide"); 55 56 } 57 function action2(self){ 58 //$(self).parent().parent().children(".models,.shade").addClass("hide") 59 60 $(self).parent().addClass("hide").prev().addClass("hide") 61 62 } 63 </script> 64 </body> 65 </html>
9. 面板拖动
有时间补