jQuery-demo
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>DOM</title> 6 <style type="text/css"> 7 .red{ 8 color:red; 9 } 10 </style> 11 </head> 12 <body> 13 <h2>DOM-用户管理</h2> 14 <table border="1" id="tabUsers" width="100%"> 15 <tr> 16 <th> 17 <input type="checkbox" id="chbAll" /> 18 </th> 19 <th>编号</th> 20 <th>姓名</th> 21 <th>城市</th> 22 <th>操作</th> 23 </tr> 24 </table> 25 <p> 26 <button type="button" id="btnDelSelected">删除选择项</button> 27 </p> 28 <fieldset> 29 <legend>用户信息</legend> 30 <p> 31 <label for="name">姓名：</label> 32 <input type="text" name="name" id="name" placeholder="请输入姓名" /> 33 <span id="nameMsg" class="red"></span> 34 </p> 35 <p> 36 <label for="city">城市：</label> 37 <input type="text" name="city" id="city" placeholder="请输入城市" /> 38 <span id="cityMsg" class="red"></span> 39 </p> 40 <p> 41 <button type="button" id="btnSave">保存</button> 42 <button type="button" id="btnUpdate">更新</button> 43 </p> 44 </fieldset> 45 <script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script> 46 <script type="text/javascript"> 47 var app = { 48 data: [{ 49 id: 1, 50 name: "张学友", 51 city: "中国香港" 52 }, 53 { 54 id: 2, 55 name: "张国立", 56 city: "中国北京" 57 }, 58 { 59 id: 5, 60 name: "张惠妹", 61 city: "中国上海" 62 } 63 ], 64 index: -1, 65 bind: function() { //将数组中的数据渲染到页面中 66 //将表格中第一行以外的数组清空 67 $("#tabUsers tr:gt(0)").remove(); 68 $.each(app.data, function(i, obj) { 69 var tr = $("<tr/>"); 70 var chbItem = $("<input type='checkbox' name='chbItem'/>").data("index", i); 71 $("<td/>").append(chbItem).appendTo(tr); 72 $("<td/>").html(obj.id).appendTo(tr); 73 $("<td/>").html(obj.name).appendTo(tr); 74 $("<td/>").html(obj.city).appendTo(tr); 75 //创建一个删除元素，在元素中隐藏数据index，对应了数组中的索引 76 var aDel = $("<a href='#' class='del'>删除</a>").data("index", i); 77 var aEdit = $("<a href='#' class='edit'> | 编辑</a>").data("index", i).data("user", obj); 78 $("<td/>").append(aDel).append(aEdit).appendTo(tr); 79 //在#tabUsers元素中追加子元素tr 80 $("#tabUsers").append(tr); 81 }); 82 }, 83 save: function() { //新增 84 var user = { 85 id: 1, 86 name: $("#name").val(), 87 city: $("#city").val() 88 }; 89 if(app.verify(user)) { 90 if(app.data.length > 0) { //如果数组中有数据 91 user.id = app.data[app.data.length - 1].id + 1; 92 }; 93 app.data.push(user); //将user对象添加到数组的末尾 94 //重新渲染 95 app.bind(); 96 } 97 }, 98 deleteOne: function(obj) { //根据一个元素删除当前行 99 var index = $(obj).data("index"); 100 //index表示删除的起始位置，1表示删除几个 101 app.data.splice(index, 1); 102 //更新页面 103 //app.bind(); 104 $(obj).closest("tr").remove(); //移除最近的tr父节点 105 }, 106 deleteSelected: function() { //多删除 107 var items = $("input[name=chbItem]:checked"); 108 for(var i = items.size(); i >= 0; i--) { 109 app.deleteOne(items[i]); 110 } 111 }, 112 verify: function(user) { 113 if(!(user.name && /^[\u4e00-\u9fa5]{2,4}$/.test(user.name))) { 114 $("#nameMsg").html("姓名格式错误"); 115 return false; 116 } else { 117 $("#nameMsg").html(""); 118 } 119 if(!(user.city && /^.{2,10}$/.test(user.city))){ 120 $("#cityMsg").html("城市格式错误"); 121 return false; 122 } else { 123 $("#cityMsg").html(""); 124 } 125 return true; 126 }, 127 start: function() { 128 //绑定事件 129 $("#btnSave").click(app.save); 130 $("#tabUsers").on("click", ".del", function() { 131 if(confirm('您确定要删除吗？')) { 132 app.deleteOne(this); 133 } 134 }); 135 $("#chbAll").click(function() { 136 $("input[name=chbItem]").prop("checked", $(this).prop("checked")); 137 }); 138 //多删除 139 $("#btnDelSelected").click(app.deleteSelected); 140 //编辑 141 $("#tabUsers").on("click", ".edit", function() { 142 //索引 143 var index = $(this).data("index"); 144 //对象 145 var obj = $(this).data("user"); 146 $("#name").val(obj.name); 147 $("#city").val(obj.city); 148 app.index = index; 149 }); 150 //更新 151 $("#btnUpdate").click(function() { 152 //获得要更新的对象 153 var user = app.data[app.index]; 154 user.name = $("#name").val(); 155 user.city = $("#city").val(); 156 app.bind(); 157 app.index = -1; 158 }); 159 app.bind(); 160 } 161 }; 162 app.start(); 163 </script> 164 </body> 165 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>jQuery AJAX</title> 7 <style type="text/css"> 8 #loading{ 9 display: none; 10 } 11 </style> 12 </head> 13 14 <body> 15 <h2>jQuery AJAX</h2> 16 <table border="1" id="tabUsers" width="100%"> 17 <tr> 18 <th>编号</th> 19 <th>姓名</th> 20 <th>城市</th> 21 <th>操作</th> 22 </tr> 23 </table> 24 <p></p> 25 <fieldset> 26 <legend>用户信息</legend> 27 <p> 28 <label for="name">姓名：</label> <input type="text" name="name" id="name" placeholder="请输入姓名" /> <span id="nameMsg" class="red"></span> 29 </p> 30 <p> 31 <label for="city">城市：</label> <input type="text" name="city" id="city" placeholder="请输入城市" /> <span id="cityMsg" class="red"></span> 32 </p> 33 <p> 34 <button type="button" id="btnSave">保存</button> 35 <button type="button" id="btnUpdate">更新</button> 36 </p> 37 </fieldset> 38 <div id="loading"> 39 <img src="img/loading.gif" height="100"/> 40 </div> 41 <script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script> 42 <script type="text/javascript"> 43 var list = function() { 44 $.ajax({ 45 type: "get", //请求类型 46 url: "UserController?action=list", //路径 47 beforeSend: function() { //请求前的事件 48 $("#loading").show(500); 49 }, 50 success: function(data) { //请求成功后的事件 51 $("#tabUsers tr:gt(0)").remove(); //移除表格中除第一行以外的数据 52 $.each(data, function(i, obj) { 53 var tr = $("<tr/>"); 54 $("<td/>").html(obj.id).appendTo(tr); 55 $("<td/>").html(obj.name).appendTo(tr); 56 $("<td/>").html(obj.city).appendTo(tr); 57 var del=$("<a href='#' class='del'>删除 | </a>").data("id",obj.id); 58 var edit=$("<a href='#' class='edit'>编辑</a>").data("user",obj); 59 $("<td/>").append(del).append(edit).appendTo(tr); 60 $("#tabUsers").append(tr); 61 }); 62 63 }, 64 complete: function() { //请求完成时的事件，不论成功或失败 65 $("#loading").hide(500); 66 }, 67 error: function(xhr, textStatus, errorThrown) { //错误时 68 alert(xhr + textStatus + errorThrown); 69 } 70 }); 71 } 72 list(); 73 //添加 74 $("#btnSave").click(function(){ 75 $.ajax({ 76 url:"UserController?action=add", //请求地址 77 data:{name:$("#name").val(),city:$("#city").val()}, //发送给后台的数据 78 type:"post", //请求类型 79 beforeSend:function(){ //请求前 80 $("#loading").show(500); 81 $("#btnSave").prop("disabled",true).html("请求中..."); 82 }, 83 success:function(data){ //请求成功事件 84 alert(data.msg); 85 list(); //重新绑定 86 }, 87 complete:function(){ //请求完成，不论成功或失败 88 $("#loading").hide(500); 89 $("#btnSave").prop("disabled",false).html("保存"); 90 } 91 }); 92 93 }); 94 //删除 95 $("#tabUsers").on("click",".del",function(){ 96 var id=$(this).data("id"); 97 //发送ajax get请求 98 $.get("UserController?action=del",{"id":id},function(data){ 99 alert(data.msg); 100 list(); 101 }); 102 }); 103 //编辑 104 var user=null; 105 $("#tabUsers").on("click",".edit",function(){ 106 user=$(this).data("user"); 107 $("#name").val(user.name); 108 $("#city").val(user.city); 109 }); 110 //更新事件 111 $("#btnUpdate").click(function(){ 112 user.name=$("#name").val(); 113 user.city=$("#city").val(); 114 //向服务器发送post请求 115 $.post("UserController?action=update",user,function(data){ 116 alert(data.msg); 117 list(); 118 }); 119 120 }); 121 122 </script> 123 </body> 124 125 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>artDialog</title> 6 <link rel="stylesheet" type="text/css" href="js/artDialog7/css/dialog.css"/> 7 <style type="text/css"> 8 #formUser{ 9 display: none; 10 } 11 </style> 12 </head> 13 <body> 14 <h2>artDialog</h2> 15 16 <button type="button" onclick="click1()">提示</button> 17 <button type="button" onclick="click2()">添加用户</button> 18 <button type="button" onclick="click3()">加载中</button> 19 <fieldset id="formUser"> 20 <legend>用户信息</legend> 21 <p> 22 <label for="name">姓名：</label> <input type="text" name="name" id="name" placeholder="请输入姓名" /> <span id="nameMsg" class="red"></span> 23 </p> 24 <p> 25 <label for="city">城市：</label> <input type="text" name="city" id="city" placeholder="请输入城市" /> <span id="cityMsg" class="red"></span> 26 </p> 27 <p> 28 <button type="button" id="btnSave">保存</button> 29 <button type="button" id="btnUpdate">更新</button> 30 </p> 31 </fieldset> 32 33 <script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script> 34 <script src="js/artDialog7/dist/dialog.js" type="text/javascript" charset="utf-8"></script> 35 36 <script> 37 function click1(){ 38 var d=dialog({ 39 title:"提示", 40 content:"恭喜您，删除成功!", 41 okValue: '确定', 42 ok:function(){ 43 44 setTimeout(function(){ 45 d.close().remove(); 46 },2000); 47 48 return false; 49 }, 50 cancel:function(){ 51 52 } 53 }); 54 d.show(); 55 } 56 57 function click2(){ 58 var d=dialog({ 59 title:"添加用户", 60 modal:true, 61 backdropOpacity:0.2, 62 width:'600px', 63 height:'300px', 64 content:$("#formUser") 65 }); 66 d.show(); 67 } 68 69 var box 70 function click3(){ 71 var box=dialog({ 72 modal:true 73 }); 74 box.show(); 75 }; 76 77 </script> 78 </body> 79 </html>
