实例练习
左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>left_menu</title> <style> .menu{ height: 500px; 20%; background-color: gainsboro; text-align: center; float: left; } .content{ height: 500px; 80%; background-color: darkgray; float: left; } .title{ line-height: 50px; background-color: wheat; color: rebeccapurple;} .hide{ display: none; } </style> </head> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="title">菜单一</div> <div class="con"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="title">菜单二</div> <div class="con hide"> <div>222</div> <div>222</div> <div>222</div> </div> </div> <div class="item"> <div class="title">菜单三</div> <div class="con hide"> <div>333</div> <div>333</div> <div>333</div> </div> </div> </div> <div class="content"></div> </div> <script src="jquery.min.js"></script> <script> $(".item .title").mouseover(function () { $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide"); // $(this).next().removeClass("hide"); // $(this).parent().siblings().children(".con").addClass("hide"); }) </script> </body> </html>
Tab切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{ margin: 0; padding: 0; } .tab_outer{ margin: 20px auto; 60%; } .menu{ background-color: #cccccc; /*border: 1px solid red;*/ line-height: 40px; text-align: center; } .menu li{ display: inline-block; margin-left: 14px; padding:5px 20px; } .menu a{ border-right: 1px solid red; padding: 11px; } .content{ background-color: tan; border: 1px solid green; height: 300px; } .hide{ display: none; } .current{ background-color: #2868c8; color: white; border-top: solid 2px rebeccapurple; } </style> </head> <body> <div class="tab_outer"> <ul class="menu"> <li relation="c1" class="current">菜单一</li> <li relation="c2" >菜单二</li> <li relation="c3">菜单三</li> </ul> <div class="content"> <div id="c1">内容一</div> <div id="c2" class="hide">内容二</div> <div id="c3" class="hide">内容三</div> </div> </div> </body> <script src="jquery.min.js"></script> <script> $(".menu li").click(function(){ var index=$(this).attr("relation"); $("#"+index).removeClass("hide").siblings().addClass("hide"); $(this).addClass("current").siblings().removeClass("current"); }); </script> </html>
table正反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>全选</button> <button>取消</button> <button>反选</button> <hr> <table border="1"> <tr> <td><input type="checkbox"></td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td><input type="checkbox"></td> <td>222</td> <td>222</td> <td>222</td> <td>222</td> </tr> <tr> <td><input type="checkbox"></td> <td>333</td> <td>333</td> <td>333</td> <td>333</td> </tr> <tr> <td><input type="checkbox"></td> <td>444</td> <td>444</td> <td>444</td> <td>444</td> </tr> </table> <script src="jquery.min.js"></script> <script> $("button").click(function(){ if($(this).text()=="全选"){ // $(this)代指当前点击标签 $("table :checkbox").prop("checked",true) } else if($(this).text()=="取消"){ $("table :checkbox").prop("checked",false) } else { $("table :checkbox").each(function(){ $(this).prop("checked",!$(this).prop("checked")); }); } }); </script> </body> </html>
模态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .back{ background-color: wheat; height: 2000px; } .shade{ position: fixed; top: 0; bottom: 0; left:0; right: 0; background-color: darkgray; opacity: 0.4; } .hide{ display: none; } .models{ position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; height: 200px; 200px; background-color: white; } </style> </head> <body> <div class="back"> <input id="ID1" type="button" value="click" onclick="action1(this)"> </div> <div class="shade hide"></div> <div class="models hide"> <input id="ID2" type="button" value="cancel" onclick="action2(this)"> </div> <script src="jquery.min.js"></script> <script> function action1(self){ $(self).parent().siblings().removeClass("hide"); } function action2(self){ //$(self).parent().parent().children(".models,.shade").addClass("hide") $(self).parent().addClass("hide").prev().addClass("hide") } </script> </body> </html>
复制样式条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="outer"> <div class="item"> <input type="button" value="+"> <input type="text"> </div> </div> <script src=jquery.min.js></script> <script> function add(self){ // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加 var $clone_obj=$(self).parent().clone(); $clone_obj.children(":button").val("-").attr("onclick","removed(this)"); $(self).parent().parent().append($clone_obj); } function removed(self){ $(self).parent().remove() } /* $("[value='+']").click(function(){ var $clone_obj=$(this).parent().clone(); $clone_obj.children(":button").val("-").attr("class","mark"); $(this).parent().parent().append($clone_obj); }); $(".outer").on("click",".item .mark",function(){ console.log($(this)); // $(this): .item .mark标签 $(this).parent().remove() }) */ </script> </body> </html>
注册验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form class="Form" id="form"> <p><input class="v1" type="text" name="username" mark="用户名"></p> <p><input class="v1" type="text" name="email" mark="邮箱"></p> <p><input type="submit" value="submit"></p> </form> <script src="jquery.min.js"></script> <script> $("#form :submit").click(function(){ flag=true; $("#form .v1").each(function(){ $(this).next("span").remove();// 防止对此点击按钮产生多个span标签 var value=$(this).val(); if (value.trim().length==0){ var mark=$(this).attr("mark"); var ele=document.createElement("span"); ele.innerHTML=mark+"不能为空!"; $(this).after(ele); $(ele).prop("class","error");// DOM对象转换为jquery对象 flag=false; return false ; //-------->引出$.each的return false注意点 } }); return flag }); </script> </body> </html>
拖动面板
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 1px solid #ddd; 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;color: white;"> 标题 </div> <div style="height: 300px;"> 内容 </div> </div> <script type="text/javascript" src="jquery.min.js"></script> <script> $(function(){ // 页面加载完成之后自动执行 $('#title').mouseover(function(){ $(this).css('cursor','move'); }).mousedown(function(e){ //console.log($(this).offset()); var _event = e || window.event; // 原始鼠标横纵坐标位置 var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $(this).on('mousemove', function(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px'); }) }).mouseup(function(){ $(this).off('mousemove'); }); }) </script> </body> </html>
轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.1.1.js"></script> <title>Title</title> <style> .outer{ 790px; height: 340px; margin: 80px auto; position: relative; } .img li{ position: absolute; list-style: none; top: 0; left: 0; display: none; } .num{ position: absolute; bottom: 18px; left: 270px; list-style: none; } .num li{ display: inline-block; 18px; height: 18px; background-color: white; border-radius: 50%; text-align: center; line-height: 18px; margin-left: 4px; } .btn{ position: absolute; top:50%; 30px; height: 60px; background-color: lightgrey; color: white; text-align: center; line-height: 60px; font-size: 30px; opacity: 0.7; margin-top: -30px; display: none; } .left{ left: 0; } .right{ right: 0; } .outer:hover .btn{ display: block; } .num .active{ background-color: red; } </style> </head> <body> <div class="outer"> <ul class="img"> <li style="display: block"><a href=""><img src="img/1.jpg" alt=""></a></li> <li><a href=""><img src="img/2.jpg" alt=""></a></li> <li><a href=""><img src="img/3.jpg" alt=""></a></li> <li><a href=""><img src="img/4.jpg" alt=""></a></li> <li><a href=""><img src="img/5.jpg" alt=""></a></li> <li><a href=""><img src="img/6.jpg" alt=""></a></li> </ul> <ul class="num"> <!--<li class="active"></li>--> <!--<li></li>--> <!--<li></li>--> <!--<li></li>--> <!--<li></li>--> <!--<li></li>--> </ul> <div class="left btn"> < </div> <div class="right btn"> > </div> </div> <script src="jquery-3.1.1.js"></script> <script> var i=0; // 通过jquery自动创建按钮标签 var img_num=$(".img li").length; for(var j=0;j<img_num;j++){ $(".num").append("<li></li>") } $(".num li").eq(0).addClass("active"); // 手动轮播 $(".num li").mouseover(function () { i=$(this).index(); $(this).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200) }); // 自动轮播 var c=setInterval(GO_R,1500); function GO_R() { if(i==img_num-1){ i=-1 } i++; $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000) } function GO_L() { if(i==0){ i=img_num } i--; $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); // fadeIn,fadeOut单独另开启的线程 } $(".outer").hover(function () { clearInterval(c) },function () { c=setInterval(GO_R,1500) }); // button 加定播 $(".right").click(GO_R); $(".left").click(GO_L) </script> </body> </html>
表格编辑操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> <script src="jquery-2.1.4.min.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> <style> .container .row td{ padding: 10px; } #box{ padding-top:50px; } .add{ margin:20px 0; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-7 col-lg-offset-3" id="box" > <div> <button type="button" class="btn btn-success add" data-toggle="modal" data-target="#myModal"> 添加员工信息 </button> </div> <table class="table table-striped"> <tr> <th>姓名</th> <th>年龄</th> <th>部门</th> <th>薪水</th> <th>操作</th> </tr> <tr> <td>张三</td> <td>23</td> <td>销售部</td> <td>3000</td> <td> <button class="btn btn-danger btn-sm del">删除</button> <button class="btn btn-info btn-sm edit">编辑</button> <button class="btn btn-primary btn-sm">查看</button> </td> </tr> <tr class="handle"> <td>李四</td> <td>32</td> <td>保安部</td> <td>5000</td> <td> <button class="btn btn-danger btn-sm del">删除</button> <button class="btn btn-info btn-sm edit">编辑</button> <button class="btn btn-primary btn-sm">查看</button> </td> </tr> </table> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-5 col-lg-offset-3"> <form class="add_form edit_form"> <div class="form-group"> <label for="username">姓名</label> <input type="text" class="form-control" id="username" placeholder="username"> </div> <div class="form-group"> <label for="age">年龄</label> <input type="text" class="form-control" id="age" placeholder="age"> </div> <div class="form-group"> <label for="dep">部门</label> <input type="text" id="dep" placeholder="dep" class="form-control"> </div> <div class="form-group"> <label for="salary">薪水</label> <input type="text" class="form-control" id="salary" placeholder="salary"> </div> </form> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary add_save">Save changes</button> <button type="button" class="btn btn-primary edit_save" style="display: none">Save changes</button> </div> </div> </div> </div> <script> // 提炼出一个创建tr的函数 function createTr(){ var $tr=$("<tr>"); $(".add_form :text").each(function(){ $tr.append($("<td>").html($(this).val())) }); $handle=$(".handle td:last").clone(); $tr.append($handle); return $tr } // 添加按钮 $(".add_save").click(function(){ $("#myModal").modal("hide"); var $tr=createTr(); $(".table tbody").append($tr) }); // 删除按钮 $("table").on("click",".del",function(){ $(this).parent().parent().remove() }); //编辑按钮 $("table").on("click",".edit",function(){ var $edit_obj=$(this).parent().parent(); var arr=[]; $(this).parent().siblings().each(function(){ arr.push($(this).text()) }); $(".edit_form :text").each(function(i){ $(this).val(arr[i]) }); $("#myModal").modal("show"); $(".edit_save").show().prev().hide(); $(".edit_save").click(function(){ $("#myModal").modal("hide"); // 创建tr标签 var $tr=createTr(); $edit_obj.replaceWith($tr); $(".edit_save").hide().prev().show(); }); }) </script> </body> </html>
注册实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .error{ color:red } </style> </head> <body> <form class="Form"> <p><input class="v1" type="text" name="username" mark="用户名"></p> <p><input class="v1" type="text" name="email" mark="邮箱"></p> <p><input type="submit" value="submit"></p> </form> <script src="jquery-2.1.4.min.js"></script> <script> $(".Form :submit").click(function(){ flag=true; $("Form .v1").each(function(){ var value=$(this).val(); if (value.trim().length==0){ var mark=$(this).attr("mark"); var $span=$("<span>"); $span.html(mark+"不能为空!"); $span.prop("class","error"); $(this).after($span); setTimeout(function(){ $span.remove(); },800); flag=false; return flag; } }); return flag }); </script> </body> </html>