jQuery的操作方法并不需要都记下来，但是使用什么功能需要什么样的方法，我们是一定会知道的。所以写实例来进行对功能方法的练习和熟练，是最快能够掌握jQuery的方法。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="dist/css/bootstrap.css"> 7 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script> 8 <script src="dist/js/bootstrap.js"></script> 9 <style> 10 .bei{ 11 background-color: #9d9d9d; 12 position: fixed; 13 top:0; 14 left:0; 15 bottom: 0; 16 right: 0; 17 opacity: 0.5; 18 } 19 .shu{ 20 margin-top: 20px; 21 margin-left :20px; 22 } 23 .hide{ 24 display: none; 25 } 26 .tian{ 27 width: 50px; 28 } 29 .nuo{ 30 margin-left:10px ; 31 margin-top: 10px; 32 } 33 .t5{ 34 width: 400px; 35 height: 500px; 36 } 37 .t6{ 38 width: 300px; 39 height: 500px; 40 } 41 </style> 42 </head> 43 <body> 44 45 <div class="row"> 46 <div class="col-md-6"> 47 <!-- Button trigger modal --> 48 <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 49 Insert 50 </button> 51 52 <!-- Modal --> 53 <div class="modal fade j" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 54 <div class="modal-dialog j" role="document"> 55 <div class="modal-content j"> 56 <div class="modal-header"> 57 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 58 <h4 class="modal-title" id="myModalLabel">Modal title</h4> 59 </div> 60 <div class="modal-body"> 61 <form action=""> 62 <div class="form-group"> 63 <label for="d1">姓名</label> 64 <input type="text" class="hui form-control" id="d1"> 65 </div> 66 <div class="form-group"> 67 <label for="d2">密码</label> 68 <input type="text" class="hui form-control" id="d2"> 69 </div> 70 <div class="modal-footer"> 71 <input type="reset" class="an btn btn-default" data-dismiss="modal" value="Close"> 72 <input type="reset" class="anq btn btn-primary" value="确定添加" data-dismiss="modal" > 73 </div> 74 </form> 75 </div> 76 77 </div> 78 </div> 79 </div> 80 <table class="table table-bordered table-hover" > 81 <thead> 82 <tr> 83 <th>id</th> 84 <th>姓名</th> 85 <th>密码</th> 86 <th>操作</th> 87 </tr> 88 </thead> 89 <tbody id="t1"> 90 <tr> 91 <td class="wb">1</td> 92 <td class="wb">张三</td> 93 <td class="wb">1222</td> 94 <td> 95 <button class="del btn btn-danger">删除</button> 96 <button class="w btn btn-success " data-toggle="modal" data-target="#myModal">编辑</button> 97 </td> 98 </tr> 99 100 <tr> 101 <td class="wb">2</td> 102 <td class="wb">张二</td> 103 <td class="wb">233</td> 104 <td> 105 <button class="del btn btn-danger">删除</button> 106 <button class="w btn btn-success" data-toggle="modal" data-target="#myModal">编辑</button> 107 </td> 108 </tr> 109 110 <tr> 111 <td class="wb">3</td> 112 <td class="wb">赵四</td> 113 <td class="wb">455</td> 114 <td> 115 <button class="del btn btn-danger">删除</button> 116 <button class="w btn btn-success" data-toggle="modal" data-target="#myModal">编辑</button> 117 </td> 118 </tr> 119 120 </tbody> 121 122 </table> 123 </div> 124 </div> 125 <div class="tu"> 126 <img src="http://game.gtimg.cn/images/zhetianji/web201706/xueyuan/13/0.jpg" class="t5" id="d4"> 127 <img src='http://game.gtimg.cn/images/zhetianji/web201706/xueyuan/jianzong/0.jpg' class="t5" id="d3"> 128 <img src='http://game.gtimg.cn/images/zhetianji/web201706/xueyuan/nanxizhai/0.jpg' class="t5" id="d5"> 129 </div> 130 131 <script> 132 $t1=$("#t1"); 133 $t1.on("click",".del",function () { 134 ($(this).parent().parent()).remove(); 135 var i=1; 136 $("#t1 tr").each(function () { 137 $(this).children(".wb:first").text(i); 138 console.log($(this).children(".wb:first")); 139 i=i+1 140 }) 141 }); 142 $t1.on("click",".w",function () { 143 $(".j").removeClass("hide"); 144 $form=$("form"); 145 $form.data("name",$(this).parent().parent().find(":eq(1)")); 146 $form.data("pwd",$(this).parent().parent().find(":eq(2)")); 147 $(".hui:first").val($form.data("name").text()); 148 $(".hui:last").val($form.data("pwd").text()) 149 }); 150 $tan=$(".modal-footer"); 151 function tianjia() { 152 var ele_tr = document.createElement("tr"); 153 var ele_th = document.createElement("td"); 154 $(ele_th).text($("tr").length).addClass("wb"); 155 ele_tr.appendChild(ele_th); 156 $(".form-group").each(function () { 157 zhi = $(this).find("input").val(); 158 var ele_td = document.createElement("td"); 159 $(ele_td).addClass('wb').text(zhi); 160 ele_tr.appendChild(ele_td) 161 }); 162 var ele_de = document.createElement("td"); 163 var ele_bu = document.createElement("button"); 164 $(ele_bu).addClass("del btn btn-danger").text('删除'); 165 var bub = document.createElement("button"); 166 $(bub).addClass("w btn btn-success").text('编辑'); 167 $(ele_de).append(ele_bu, " ", bub); 168 ele_tr.appendChild(ele_de); 169 $("#t1").append(ele_tr); 170 $(".hui").each(function () { 171 $(this).val(''); 172 173 }); 174 } 175 176 $tan.on("click",".anq",function () { 177 $form2=$("form"); 178 if($form2.data("name")==undefined){ 179 tianjia() 180 } 181 else { 182 $form2.data("name").text($(".hui:first").val()); 183 $form2.data("pwd").text($(".hui:last").val()); 184 $form2.removeData("name"); 185 $form2.removeData("pwd"); 186 $(".hui").each(function () { 187 $(this).val(''); 188 }); 189 190 } 191 192 }); 193 $tan.on("click",".an",function () { 194 $form3=$("form"); 195 $form3.removeData("name"); 196 $form3.removeData("pwd"); 197 $(".hui").each(function () { 198 $(this).val(''); 199 }); 200 }); 201 $(".hui").each(function () { 202 this.onkeydown = function (event) { 203 console.log(event.keyCode); 204 if (event.keyCode == 13) { 205 206 $(".anq").click() 207 } 208 else if (event.keyCode == 27) { 209 210 $(".an").click() 211 } 212 } 213 }); 214 215 216 var a=0; 217 setInterval(function () { 218 a=a+1; 219 $("#d4").attr("src",'http://game.gtimg.cn/images/zhetianji/web201706/xueyuan/13/'+a.toString()+'.jpg'); 220 if (a==25){ 221 a=0 222 } 223 },50); 224 var b=0; 225 setInterval(function () { 226 b=b+1; 227 $("#d3").attr("src",'http://game.gtimg.cn/images/zhetianji/web201706/xueyuan/jianzong/'+b.toString()+'.jpg'); 228 if (b==26){ 229 b=0 230 } 231 },50); 232 var c=0; 233 setInterval(function () { 234 c=c+1; 235 $("#d5").attr("src",'http://game.gtimg.cn/images/zhetianji/web201706/xueyuan/nanxizhai/'+c.toString()+'.jpg'); 236 if (c==30){ 237 c=0 238 } 239 },50); 240 241 242 </script> 243 244 245 </body> 246 </html>
这个实例使用了bootstrap的部分方法，所以一定要导入。
使用了更新图片链接的方法来进行动态图片的显示。
编写思路很简单，先为按钮添加事件，然后将bootstrap的模态框放进去，用模态框中input取的值来进行添加
删除的话，用的方法就是找到按钮的父标签的父标签，从这一个tbody中删除这一条记录
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="dist/css/bootstrap.css"> 7 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script> 8 <script src="dist/js/bootstrap.js"></script> 9 <style> 10 .name{ 11 margin-top: 50px; 12 margin-left: 50px; 13 } 14 .uang{ 15 margin-top: 50px; 16 margin-left: 50px; 17 } 18 .c{ 19 color: red; 20 } 21 .hide{ 22 display: none; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="name">用户名<input type="text" class="te"><b class="c hide" id="1">用户名过长</b><b class="c hide" id="3">用户名过短</b><b class="c hide" id="5">请输入用户名</b></div> 28 <div class="name">密码<input type="password" class="te"><b class="c hide" id="2">密码过长</b><b class="c hide" id="4">密码过短</b><b class="c hide" id="6">请输入密码</b></div> 29 <button class="uang btn btn-info">login</button> 30 <script> 31 (function (jq) { 32 function login(arg) { 33 arg.on("click",function () { 34 jq(".te").each(function () { 35 if(jq(this).val().length>7){ 36 jq(this).next().removeClass("hide"); 37 console.log(jq(this).next()); 38 return false 39 } 40 else if (jq(this).val().length<2&&jq(this).val().length>0){ 41 jq(this).next().next().removeClass("hide"); 42 return false 43 } 44 else if (jq(this).val().length==0){ 45 jq(this).next().next().next().removeClass("hide"); 46 return false 47 } 48 }) 49 }); 50 jq(".te").on("focus",function () { 51 jq(this).nextAll().addClass("hide"); 52 }); 53 } 54 jq(document).ready(function () { 55 jq(".uang").check() 56 }); 57 jq.fn.extend({ 58 check:function () { 59 login(this) 60 } 61 }) 62 })(jQuery); 63 64 65 66 </script> 67 </body> 68 </html>
判断的就是输入的长度，如果不符合要求的话，两种方法，一种是提交按钮绑定事件，然后判断，循环input的value，如果有不符合输入要求的
用return false来结束循环，这样达到只显示头一个不合格的信息的input框的目的。
第二种方法就是用blur（失焦），这样的话当鼠标挪出input框就开始进行判断输入是否合格，大部分网站用的就是这种。