zoukankan html css js c++ java

jQuery之jQuery扩展和事件

一、jQuery事件

常用事件
   blur([[data],fn])   失去焦点
   focus([[data],fn])  获取焦点（ 搜索框例子）
   change([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子)
   click([[data],fn])  点击
   dblclick([[data],fn]) 双击
   scroll([[data],fn])   滚动
   submit([[data],fn])   提交

不常用事件
   error([[data],fn])
   focusin([data],fn)
   focusout([data],fn)
   keydown([[data],fn])   按下
   keypress([[data],fn])  按键
   keyup([[data],fn])     键松开
   mousedown([[data],fn]) 鼠标按下
   mouseenter([[data],fn])  鼠标移进去
   mouseleave([[data],fn])  鼠标离开：只有鼠标离开被选元素的时候，才会触发mouseleave事件
   mousemove([[data],fn])   鼠标移动
   mouseout([[data],fn])    鼠标离开：无论鼠标离开被选元素还是任何子元素，都会触发mouseout事件
   mouseover([[data],fn]    鼠标悬停
   mouseup([[data],fn])     鼠标弹起
   resize([[data],fn])  元素窗口发生变化
   select([[data],fn])
   unload([[data],fn])
   补充：
      文档树加载完之后绑定事件（绝大多数情况下）
      第一种：吧script放在后面。
      第二种：
      $(document).ready(function(){
         // 绑定事件的代码
         ....
      })

      简写：
      $(function($){
         // 绑定事件的代码
         ....
      });
事件练习

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>常用事件</title>
 6 </head>
 7 <body>
 8 <input type="text" name="search" value="苹果手机" data-show ="">
 9 <button>搜索</button>
10 <select name="" id="s1">
11     <option value="gansu">甘肃</option>
12     <option value="wuwei">武威</option>
13     <option value="dingxi">定西</option>
14     <option value="longxi">陇西</option>
15     <option value="dalian">大连</option>
16 </select>
17 <script src="jquery-3.2.1.min.js"></script>
18 <script>
19 //    focus和blur事件
20 $(document).ready(function () {
21     //文档加载完之后执行下面的代码
22      $(":input").focus(function () {
23         var data = $(this).val();
24         $(this).val("");
25         $(this).attr("data-show", data);
26 
27     });
28     $(":input").blur(function () {
29         $(this).val($(this).attr("data-show"));
30     });
31     $("#s1").change(function () {
32 //        当你的下拉框改变的时候就触发这个事件，就会执行下面的代码
33         console.log($(this).val())
34     })
35 });
36 
37 </script>
38 </body>
39 </html>

focus和blur练习

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>onmouse事件</title>
 6     <style>
 7         .box{
 8              300%;
 9             height: 200px;
10         }
11         .title{
12             background: steelblue;
13             line-height: 40px;
14         }
15         .con{
16             background: slategray;
17             line-height: 30px;
18         }
19         .hide{
20             display: none;
21         }
22     </style>
23 </head>
24 <body>
25 <div class="box">
26     <div class="title">onmouse</div>
27     <div class="con hide">
28         <div><a href="" class="item">你好吗？</a></div>
29         <div><a href="" class="item">我好啊</a></div>
30         <div><a href="" class="item">好就好呗</a></div>
31     </div>
32 </div>
33 <script>
34     var ele_title = document.getElementsByClassName('title')[0];
35     var ele_box = document.getElementsByClassName('box')[0];
36     //鼠标指上去的事件
37     ele_title.onmouseover = function () {
38         this.nextElementSibling.classList.remove('hide');
39     };
40     //鼠标移走的事件的两种方式
41 //    方式一（推荐）
42      ele_box.onmouseleave= function () {
43         ele_title.nextElementSibling.classList.add('hide');
44     };
45 //    方式二
46 //    ele_title.onmouseout = function () {
47 //       this.nextElementSibling.classList.add('hide');
48 //    }
49 //    方式一和方式二的区别：
50 //    不同点
51 //      onmouseout：不论鼠标指针离开被选元素还是任何子元素，都会触发onmouseout事件
52 //      onmouseleave：只有在鼠标指针离开被选元素时，才会触发onmouseleave事件
53 //    相同点：都是鼠标移走触发事件
54 </script>
55 </body>
56 </html>

mouseleave和mouseout练习

二、jQuery扩展（很重要！！）

1、jQuery扩展语法

把扩展的内容就可以写到xxxx.js文件了，在主文件中直接导入就行了。

用法1、$.xxx()
   $.extend({
      "GDP": function () {
         console.log("戴小红花");
      }
   });
   - 给jQuery添加扩展
   - $.GDP()

用法2、$("").xxx()
   $.fn.extend({
      "BJG": function () {
         console.log("英语八级就是好！");
      }
   })
   - 给jQuery对象添加扩展
   - $(":input").BJG()

2、练习1

　　第一步：不完美

extend.js文件

$.extend({
       "GDP":function () {
           foo();
        console.log("带小红花")
    }
});
那么如果这样定义一个函数，其他的扩展都可以调用这个函数了
这个函数只想在自己调用。不想让它公共的调用，不让他起冲突
那么定义一个私有的。用一个匿名函数
function foo() {
    console.log("英语八级就是牛")
}
$.fn.extend({
    "BJG":function () {
        foo()
        console.log("就这样吧")
    }
});

　　继续第二步：加上匿名函数

匿名函数：foo方法只想自己用，不想让别人调用
(function () {
    $.extend({
       "GDP":function () {
           foo();
        console.log("带小红花")
    }
});
    function foo() {  函数的内部可以调用，外部就不可以调用了
    console.log("英语八级就是牛")
    }
})();


(function () {
    $.fn.extend({
    "BJG":function () {
        foo2();
        console.log("就这样吧")
    }
});
    function foo2() {
        console.log("哎哎呀")
    }
})();

　　第三步、越趋于完美：既不可以让别人在外部随意调用，也可以避免别人修改$

// 如果怕$被别人改，那么就传个参数进去
(function (jq) {
    jq.extend({
       "GDP":function () {
           foo();
          console.log("带小红花")
       },   //可以扩展多个（加上逗号在写几个）
        "SGS":function () {
          console.log("你蛤蟆")
    }
});
    function foo() {
    console.log("英语八级就是牛")
    }
})(jQuery);


(function (jq) {
    jq.fn.extend({
    "BJG":function () {
        foo2();
        console.log("就这样吧")
    }
});
    function foo2() {
        console.log("哎哎呀")
    }
})(jQuery);

extend.html文件

3、具体示例练习（登录校验）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>作业1</title>
 6     <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
 7     <style>
 8         .container {
 9             margin-top: 50px;
10         }
11     </style>
12 </head>
13 <body>
14 <div class="container">
15     <div class="row">
16         <div class="col-md-4 col-md-offset-4">
17             <form action="" novalidate>
18                 <div class="form-group">
19                     <label for="username">用户名</label>
20                     <input type="text" class="form-control" id="username" placeholder="username">
21                     <span id="helpBlock" class="help-block"></span>
22                 </div>
23                 <div class="form-group">
24                     <label for="Password">密码</label>
25                     <input type="password" class="form-control" id="Password" placeholder="Password">
26                     <span id="helpBlock2" class="help-block"></span>
27                 </div>
28                 <button type="submit" class="btn btn-default submit">提交</button>
29             </form>
30         </div>
31     </div>
32 </div>
33 <!--jQuery导入一定要放到js的上面-->
34 <script src="jquery-3.2.1.min.js"></script>
35 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
36 <script>
37 //    var span =$("span");
38     $(".submit").on("click",function () {
39         //先清空状态
40         $("form .form-group").removeClass("has-error");
41         $("form span").text("");
42         $(":input").each(function () {
43             if ($(this).val().length===0){
44                 var name =  $(this).prev().text();
45                 $(this).parent().addClass("has-error");
46                 $(this).next().text(name+"不能为空");
47                 return false
48             }
49         });
50     return false
51     })
52 
53 
54 </script>
55 </body>
56 </html>

View Code

loginextend.js 文件

// 匿名函数
(function (jq) {  //jq就相当于$
    jq.extend({
        "myValidate": function (form) {
            var formObj = jq(form) ;//赋一个变量，因为我们经常用到

　　　　　　　　　　　　　　　　　　　　　　这里的form参数就指的是在html文件里面传进去的"#login"，也就是找到的form标签

            formObj.find(":submit").on("click", function () {
                //先清空状态
            formObj.find(".form-group").removeClass("has-error");
            formObj.find("span").text("");

                formObj.find(":input").each(function () {
                    if ($(this).val().length === 0) {
                        var name = $(this).prev().text();
                        $(this).parent().addClass("has-error");
                        $(this).next().text(name + "不能为空");
                        return false
                    }
                });
                return false
            });
        }
    })
})(jQuery);

loginextend2.js 文件

/**
 * Created by Administrator on 2017/10/17.
 */
// 匿名函数
(function (jq) {
    jq.fn.extend({
        "myValidate": function (arg) {
            console.log(this);  //就是当前的.前面的jQuery对象 $("#login")  ----->也就是[form#login]
            var formObj = this;//赋一个变量，因为我们经常用到
            formObj.find(":submit").on("click", function () {
                // this --->提交的submit
                //先清空状态
            formObj.find(".form-group").removeClass("has-error");
            formObj.find("span").text("");

            //each循环
            var flag = true;  //设置一个标志位
                // 找到input的属性[required=true]的，然后设置相关的操作
            formObj.find("input[required=true]").each(function () {
                var inputID = jq(this).attr("id");  //获取input的id属性值  "username"
                var minlength = arg[inputID]["min-length"];  //arg[inputID]["min-length"]--->arg["username"]["min-length"]--->得到6
                if ($(this).val().length === 0) {
                    //而这里的this是当前的input框，和上面的不是同一个
                    var name = $(this).prev().text();
                    $(this).parent().addClass("has-error");
                    $(this).next().text(name + "不能为空");
                    flag =  false;
                    return flag
                }
                if (minlength!==undefined){
                    if (jq(this).val().length<minlength){
                        var name = $(this).prev().text();
                        $(this).parent().addClass("has-error");
                        $(this).next().text(name + "长度太短");
                        flag =  false;
                        return flag
                     }
                }
            });
            return flag
          });
        }
    })
})(jQuery);

三、表格的添加 | 删除 | 编辑示例

第一种：点击编辑没有模态框，是input框编辑修改

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>增删改</title>
  6     <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
  7     <style>
  8         .addBtn {
  9             margin-top: 30px;
 10             margin-bottom: 15px;
 11         }
 12     </style>
 13 </head>
 14 <body>
 15 <div class="container">
 16     <div class="row">
 17         <div class="col-md-9 col-md-offset-2">
 18             <!-- Button trigger modal -->
 19             <button type="button" class="btn btn-primary btn-mg addBtn" data-toggle="modal" data-target="#myModal">
 20                 添加学生的信息
 21             </button>
 22             <table class="table table-striped">
 23                 <tbody>
 24                 <tr>
 25                     <th>姓名</th>
 26                     <th>年龄</th>
 27                     <th>性别</th>
 28                     <th>操作</th>
 29                 </tr>
 30                 <tr>
 31                     <td  class="col-md-3">六点</td>
 32                     <td  class="col-md-3">23</td>
 33                     <td  class="col-md-3">女</td>
 34                     <td>
 35                         <button class="btn btn-success editBtn">编辑</button>
 36                         <button class="btn btn-danger delBtn">删除</button>
 37                     </td>
 38                 </tr>
 39                 <tr>
 40                     <td>时时彩</td>
 41                     <td>24</td>
 42                     <td>女</td>
 43                     <td>
 44                         <button class="btn btn-success editBtn">编辑</button>
 45                         <button class="btn btn-danger delBtn">删除</button>
 46                     </td>
 47                 </tr>
 48                 <tr>
 49                     <td>刚强</td>
 50                     <td>13</td>
 51                     <td>男</td>
 52                     <td>
 53                         <button class="btn btn-success editBtn">编辑</button>
 54                         <button class="btn btn-danger delBtn">删除</button>
 55                     </td>
 56                 </tr>
 57                 </tbody>
 58             </table>
 59         </div>
 60     </div>
 61 </div>
 62 
 63 
 64 <!-- Modal模态框 -->
 65 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 66     <div class="modal-dialog" role="document">
 67         <div class="modal-content">
 68             <div class="modal-header">
 69                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
 70                 </button>
 71                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>
 72             </div>
 73             <div class="modal-body">
 74                 <form>
 75                     <div class="form-group">
 76                         <label for="username">姓名</label>
 77                         <input type="text" class="form-control item" id="username" placeholder="username">
 78                     </div>
 79                     <div class="form-group">
 80                         <label for="age">年龄</label>
 81                         <input type="text" class="form-control item" id="age" placeholder="age">
 82                     </div>
 83                     <div class="form-group">
 84                         <label for="gender">性别</label>
 85                         <input type="text" class="form-control item" id="gender" placeholder="gender">
 86                     </div>
 87                 </form>
 88             </div>
 89             <div class="modal-footer">
 90                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 91                 <button type="button" class="btn btn-primary queding">确定</button>
 92             </div>
 93         </div>
 94     </div>
 95 </div>
 96 <script src="jquery-3.2.1.min.js"></script>
 97 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 98 <script>
 99     //添加信息
100     $(".queding").on("click",function () {
101         arr=[];
102         $(".item").each(function () {
103 //            console.log($(this).val()) //返回的是input框里面输入的内容
104             var ele_v = $(this).val();
105             arr.push(ele_v); //吧拿到的值添加到数组
106         });
107         var s ='<tr><td>'+arr[0]+'</td><td>'+arr[1]+'</td><td>'+arr[2]+'</td><td><button class="btn btn-success editBtn">编辑</button><button class="btn btn-danger delBtn">删除</button></td></tr>';
108         $("tbody").append(s);
109         $("#myModal").modal("hide")
110     });
111 
112     //删除信息
113 //    方式一
114     $("tbody").on("click",".delBtn",function (e) {  //事件委派
115         if (e.target.className=='btn btn-danger delBtn'){
116             //找到要删除的行
117             // console.log(e.target.parentElement.parentElement);
118            e.target.parentElement.parentElement.remove()
119         }
120     });
121 
122 //    方式二
123        $("tbody").on("click",".delBtn",function () {  //事件委派
124            $(this).parent().parent().remove()  //这里的
125         });
126 
127     //编辑信息
128 
129     $("tbody").on("click",".editBtn",function () {
130          var tds = $(this).parent().prevAll();
131          tds.each(function () {
132             $(this).html('<input type="text" value='+ $(this).text()+ '>')
133         });
134 
135         $(this).text("保存");
136         $(this).removeClass("btn btn-success editBtn");
137         $(this).addClass("btn btn-info saveBtn")
138     });
139 
140     $("tbody").on("click",".saveBtn",function () {
141         var tds = $(this).parent().prevAll();
142         console.log(tds);
143         tds.each(function (){
144 //            $(this).text(this.firstElementChild.value);
145             $(this).text($(this).children().first().val());
146             console.log()
147         });
148         $(this).text("编辑");
149         $(this).removeClass("btn btn-info saveBtn");
150         $(this).addClass("btn btn-success editBtn");
151     });
152 
153 
154 </script>
155 </body>
156 </html>

增删改1

第二种：点击编辑有模态框

  1 <!DOCTYPE html>
  2 <!-- saved from url=(0041)http://v3.bootcss.com/examples/dashboard/ -->
  3 <html lang="zh-CN">
  4 <head>
  5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6 
  7     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8     <meta name="viewport" content="width=device-width, initial-scale=1">
  9     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
 10     <meta name="description" content="">
 11     <meta name="author" content="">
 12     <link rel="icon" href="http://v3.bootcss.com/favicon.ico">
 13 
 14     <title>Dashboard Template for Bootstrap</title>
 15 
 16     <!-- Bootstrap core CSS -->
 17     <link href="./Dashboard_files/bootstrap.min.css" rel="stylesheet">
 18 
 19     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 20     <link href="./Dashboard_files/ie10-viewport-bug-workaround.css" rel="stylesheet">
 21 
 22     <!-- Custom styles for this template -->
 23     <link href="./Dashboard_files/dashboard.css" rel="stylesheet">
 24 
 25     <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
 26     <!--[if lt IE 9]>
 27     <script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
 28     <script src="Dashboard_files/ie-emulation-modes-warning.js"></script>
 29 
 30     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 31     <!--[if lt IE 9]>
 32     //cdn导入css样式
 33     <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
 34     <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 35     <![endif]
 36     <!--<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">-->
 37 
 38 
 39     <style>
 40         .menu {
 41             margin: 0 -20px;
 42             border-bottom: 1px solid #336699;
 43         }
 44 
 45         .head {
 46             padding: 15px;
 47         }
 48 
 49         .my-table-tool {
 50             margin-bottom: 15px;
 51         }
 52 
 53         .menu .nav-sidebar > li > a {
 54             padding-right: 40px;
 55             padding-left: 40px;
 56         }
 57     </style>
 58 
 59 </head>
 60 
 61 <body>
 62 
 63 <nav class="navbar navbar-inverse navbar-fixed-top">
 64     <div class="container-fluid">
 65         <div class="navbar-header">
 66             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
 67                     aria-expanded="false" aria-controls="navbar">
 68                 <span class="sr-only">Toggle navigation</span>
 69                 <span class="icon-bar"></span>
 70                 <span class="icon-bar"></span>
 71                 <span class="icon-bar"></span>
 72             </button>
 73             <a class="navbar-brand" href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Project name</a>
 74         </div>
 75         <div id="navbar" class="navbar-collapse collapse">
 76             <ul class="nav navbar-nav navbar-right">
 77                 <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Dashboard</a></li>
 78                 <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Settings</a></li>
 79                 <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Profile</a></li>
 80                 <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Help</a></li>
 81             </ul>
 82             <form class="navbar-form navbar-right">
 83                 <input type="text" class="form-control" placeholder="Search...">
 84             </form>
 85         </div>
 86     </div>
 87 </nav>
 88 <!--左侧菜单-->
 89 <div class="container-fluid">
 90     <div class="row">
 91         <div class="col-sm-3 col-md-2 sidebar">
 92 
 93             <div class="menu">
 94                 <div class="head bg-primary">菜单一</div>
 95                 <ul class="nav nav-sidebar">
 96                     <li class=""><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Overview <span
 97                             class="sr-only">(current)</span></a>
 98                     </li>
 99                     <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Reports</a></li>
100                     <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Analytics</a></li>
101                     <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Export</a></li>
102                 </ul>
103             </div>
104 
105             <div class="menu">
106                 <div class="head  bg-primary">菜单二</div>
107                 <ul class="nav nav-sidebar">
108                     <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">Nav item</a></li>
109                     <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">Nav item again</a></li>
110                     <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">One more nav</a></li>
111                     <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">Another nav item</a></li>
112                     <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">More navigation</a></li>
113                 </ul>
114             </div>
115 
116             <div class="menu">
117                 <div class="head  bg-primary">菜单三</div>
118                 <ul class="nav nav-sidebar">
119                     <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">Nav item again</a></li>
120                     <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">One more nav</a></li>
121                     <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">Another nav item</a></li>
122                 </ul>
123             </div>
124         </div>
125     </div>
126 </div>
127 <!--表格-->
128 <div class="container">
129     <div class="row">
130         <div class="col-md-10 col-md-offset-2">
131             <!-- Button trigger modal -->
132             <button type="button" class="btn btn-primary btn-mg addBtn" data-toggle="modal" data-target="#myModal">
133                 添加学生的信息
134             </button>
135             <table class="table table-striped">
136                 <thead>
137                 <tr>
138                         <th>学号</th>
139                         <th>姓名</th>
140                         <th>年龄</th>
141                         <th>性别</th>
142                         <th>操作</th>
143                     </tr>
144                 </thead>
145                 <tbody>
146                     <tr>
147                         <td  class="col-md-2">1</td>
148                         <td  class="col-md-2">李欣</td>
149                         <td  class="col-md-2">23</td>
150                         <td  class="col-md-2">女</td>
151                         <td>
152                             <button class="btn btn-success editBtn">编辑</button>
153                             <button class="btn btn-danger delBtn">删除</button>
154                         </td>
155                     </tr>
156                     <tr>
157                         <td>2</td>
158                         <td>时时彩</td>
159                         <td>24</td>
160                         <td>女</td>
161                         <td>
162                             <button class="btn btn-success editBtn">编辑</button>
163                             <button class="btn btn-danger delBtn">删除</button>
164                         </td>
165                     </tr>
166                     <tr>
167                         <td>3</td>
168                         <td>刚强</td>
169                         <td>13</td>
170                         <td>男</td>
171                         <td>
172                             <button class="btn btn-success editBtn">编辑</button>
173                             <button class="btn btn-danger delBtn">删除</button>
174                         </td>
175                     </tr>
176                     <tr>
177                     <td>4</td>
178                     <td>杜康</td>
179                     <td>25</td>
180                     <td>男</td>
181                     <td>
182                         <button class="btn btn-success editBtn">编辑</button>
183                         <button class="btn btn-danger delBtn">删除</button>
184                     </td>
185                 </tr>
186                 </tbody>
187             </table>
188         </div>
189     </div>
190 </div>
191 <!--模态框-->
192 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
193     <div class="modal-dialog" role="document">
194         <div class="modal-content">
195             <div class="modal-header">
196                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
197                 </button>
198                 <h4 class="modal-title" id="myModalLabel">学生信息</h4>
199             </div>
200             <div class="modal-body">
201                 <form>
202                     <div class="form-group">
203                         <label for="modal-username">姓名</label>
204                         <input type="text" class="form-control item" id="modal-username" placeholder="username">
205                     </div>
206                     <div class="form-group">
207                         <label for="modal-age">年龄</label>
208                         <input type="text" class="form-control item" id="modal-age" placeholder="age">
209                     </div>
210                     <div class="form-group">
211                         <label for="modal-gender">性别</label>
212                         <input type="text" class="form-control item" id="modal-gender" placeholder="gender">
213                     </div>
214                 </form>
215             </div>
216             <div class="modal-footer">
217                 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
218                 <button type="button" class="btn btn-primary queding">确定</button>
219             </div>
220         </div>
221     </div>
222 </div>
223 <!-- Bootstrap core JavaScript
224 ================================================== -->
225 <script src="jquery-3.2.1.min.js"></script>
226 <!-- Placed at the end of the document so the pages load faster -->
227 <!--<script src="Dashboard_files/jquery.min.js"></script>-->
228 <!--<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"></script>')</script>-->
229 <!--<script src="Dashboard_files/bootstrap.min.js"></script>-->
230 <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
231 <script src="Dashboard_files/holder.min.js"></script>
232 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
233 <script src="Dashboard_files/ie10-viewport-bug-workaround.js"></script>
234 
235 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
236 <script>
237     //左侧菜单
238     $(".head").on("click", function () {
239         // 兄弟标签 紧挨着的ul标签 隐藏  addClass("hide")
240         $(this).parent().siblings().children("ul").slideUp();
241         // 把自己 紧挨着的ul标签显示  removeClass("hide")
242 //        $(this).next().removeClass("hide");
243         $(this).next().slideToggle();
244     });
245 
246     //删除按钮
247     $("tbody").on("click","td>.btn-danger",function () {
248         $(this).parent().parent().remove()
249     });
250     //编辑
251     $("tbody").on("click",".editBtn",function () {//事件委派
252          //弹出模态框
253         //alert(123)
254         $("#myModal").modal("show");
255         //给模态框赋值
256         //1、先取值
257         var tds = $(this).parent().parent().children();
258         var username = tds.eq(1).text();
259         var age = tds.eq(2).text();
260         var danger = tds.eq(3).text();
261         //2、后赋值
262         $("#modal-username").val(username);
263         $("#modal-age").val(age);
264         $("#modal-gender").val(danger);
265         //吧tds保存到myModal的data（先把数据保存下来）
266         $("#myModal").data("tds",tds);
267         console.log(tds);
268 //        console.log($("#myModal").data("tds"));
269         });
270         //点击模态框中的确定按钮，增加事件
271         $(".queding").on("click",function () {
272             //1、隐藏模态框
273             $("#myModal").modal("hide");
274             //2、更新td的值0
275             //取值
276             var username = $("#modal-username").val();
277             var age = $("#modal-age").val();
278             var denger = $("#modal-gender").val();
279 //                赋值
280             //拿到你点击的哪一行
281             var tds = $("#myModal").data("tds");
282             console.log(tds);
283             if (tds === undefined) {
284                 //因为添加和编辑共用一个模态框，所以先分开判断一下
285                 //当tds在模态框中没有值的时候，就实现添加的功能，如果有数据，就做编辑的功能
286                 var tr1 = document.createElement("tr");
287                 //第一个是td的序号
288                 $(tr1).append("<td>" + $("tbody tr").length+1 + "</td>");
289                 console.log($("tbody tr").length);
290 //             第二个是username
291                 $(tr1).append('<td>' + username + '</td>');
292                 $(tr1).append('<td>' + age + '</td>');
293                 $(tr1).append('<td>' + denger + '</td>');
294 //             最后加按钮(找到tbody下的第一行，再从第一行中找到td最后一个td,然后克隆)
295 //
296                 var s = $("tbody tr:last").find("td").last();
297                 var ss = s.clone(true);
298                 $(tr1).append(ss);
299                 $("tbody").append(tr1);
300             } else {
301                 console.log(tds);   //这里的tds就是上面用data保存下来的每一列里面的内容
302                 tds.eq(1).text(username);
303                 tds.eq(2).text(age);
304                 tds.eq(3).text(denger);
305                 $("#myModal").removeData("tds")
306             }
307         });
308                  //给添加按钮增加事件
309             $(".addBtn").on("click",function () {
310                 //当点击添加按钮的时候把模态框里面的..内容清空
311                 $("#myModal :input").val("");
312             });
313 </script>
314 </body>
315 </html>

增删改2

补充一个知识点 data

- .data()
- .data("key", value) 保存值，value可以是字符串，也可以是数组，也可以是jquery对象
- .data("key") 获取值（没有值就返回undefined）
- .removeData() 删除所有

- .removeData("key") 删除key对应的value

查看全文

相关阅读:
利用DTrace实时检测MySQl
改进MySQL Order By Rand()的低效率
 RDS for MySQL查询缓存 (Query Cache) 的设置和使用
 RDS For MySQL 字符集相关说明
 RDS for MySQL 通过 mysqlbinlog 查看 binlog 乱码
 RDS for MySQL Mysqldump 常见问题和处理
 RDS for MySQL Online DDL 使用
 RDS MySQL 表上 Metadata lock 的产生和处理
 RDS for MySQL 如何使用 Percona Toolkit
北京已成为投融资诈骗重灾区：存好骗子公司黑名单，谨防上当！

原文地址：https://www.cnblogs.com/lianxuebin/p/8620558.html