首页 > 代码库 > Jquery基础（三）之实例
Jquery基础（三）之实例
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="http://www.mamicode.com/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="http://www.mamicode.com/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 width: 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="http://www.mamicode.com/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 width: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 width: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="http://www.mamicode.com/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="http://www.mamicode.com/+">11 <input type="text">12 </div>13 </div>14 </body>15 <script src="http://www.mamicode.com/jquery-3.2.1.js"></script>16 <script>17 $("[value=http://www.mamicode.com/‘+‘]").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 width: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="http://www.mamicode.com/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="http://www.mamicode.com/submit" class="submit">12 </form>13 </body>14 <script src="http://www.mamicode.com/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 // return26 // }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 flag56 })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 width: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 width: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 width: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" ></a></li> 70 <li class="page"><a href=""><img src="https://img1.360buyimg.com/da/jfs/t5851/87/522945316/109618/fa7ddbe8/591fee6bN6fe1f63a.jpg" ></a></li> 71 <li class="page"><a href=""><img src="https://img1.360buyimg.com/da/jfs/t5869/350/2200649352/73525/47c5887d/592e7197N55ad6d99.jpg" ></a></li> 72 <li class="page"><a href=""><img src="https://img30.360buyimg.com/da/jfs/t6115/150/946379232/196454/2b3ae306/592e6966Nf9939a8f.jpg" ></a></li> 73 <li class="page"><a href=""><img src="https://m.360buyimg.com/babel/jfs/t5947/73/1004360771/85890/36736fc7/592e579aN827c74a0.jpg" ></a></li> 74 <li class="page"><a href=""><img src="https://img20.360buyimg.com/da/jfs/t5770/314/2320258199/80400/88c5740a/592f8abcN33219d1c.jpg" ></a></li> 75 <li class="page"><a href=""><img src="https://img11.360buyimg.com/da/jfs/t5812/137/2250930076/97370/ec3ac05d/592f84c8N2f5e2d02.jpg" ></a></li> 76 <li class="page"><a href=""><img src="https://img10.360buyimg.com/da/jfs/t4384/72/1363317211/164062/f24d89e/58c0b215N87e464e0.jpg" ></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="http://www.mamicode.com/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=-1106 }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=8115 }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 width: 200px;34 background-color: gold;35 36 }37 </style>38 </head>39 <body>40 <div class="back">41 <input id="ID1" type="button" value="http://www.mamicode.com/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="http://www.mamicode.com/cancel" onclick="action2(this)">47 </div>48 49 50 <script src="http://www.mamicode.com/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. 面板拖动
有时间补
Jquery基础（三）之实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。