jQuery--基础(实例)

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">&times;</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>

增删查改jquery实例

这个实例使用了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框就开始进行判断输入是否合格，大部分网站用的就是这种。