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($){
         // 绑定事件的代码
         ....
      });
事件练习

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>常用事件</title>

 </head>

 <body>

 <input type="text" name="search" value="苹果手机" data-show ="">

 <button>搜索</button>

 <select name="" id="s1">

     <option value="gansu">甘肃</option>

     <option value="wuwei">武威</option>

     <option value="dingxi">定西</option>

     <option value="longxi">陇西</option>

     <option value="dalian">大连</option>

 </select>

 <script src="jquery-3.2.1.min.js"></script>

 <script>

 //    focus和blur事件

 $(document).ready(function () {

     //文档加载完之后执行下面的代码

      $(":input").focus(function () {

         var data = $(this).val();

         $(this).val("");

         $(this).attr("data-show", data);

     });

     $(":input").blur(function () {

         $(this).val($(this).attr("data-show"));

     });

     $("#s1").change(function () {

 //        当你的下拉框改变的时候就触发这个事件，就会执行下面的代码

         console.log($(this).val())

     })

 });

 </script>

 </body>

 </html>

focus和blur练习

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>onmouse事件</title>

     <style>

         .box{

             width: 300%;

             height: 200px;

         }

         .title{

             background: steelblue;

             line-height: 40px;

         }

         .con{

             background: slategray;

             line-height: 30px;

         }

         .hide{

             display: none;

         }

     </style>

 </head>

 <body>

 <div class="box">

     <div class="title">onmouse</div>

     <div class="con hide">

         <div><a href="" class="item">你好吗？</a></div>

         <div><a href="" class="item">我好啊</a></div>

         <div><a href="" class="item">好就好呗</a></div>

     </div>

 </div>

 <script>

     var ele_title = document.getElementsByClassName('title')[0];

     var ele_box = document.getElementsByClassName('box')[0];

     //鼠标指上去的事件

     ele_title.onmouseover = function () {

         this.nextElementSibling.classList.remove('hide');

     };

     //鼠标移走的事件的两种方式

 //    方式一（推荐）

      ele_box.onmouseleave= function () {

         ele_title.nextElementSibling.classList.add('hide');

     };

 //    方式二

 //    ele_title.onmouseout = function () {

 //       this.nextElementSibling.classList.add('hide');

 //    }

 //    方式一和方式二的区别：

 //    不同点

 //      onmouseout：不论鼠标指针离开被选元素还是任何子元素，都会触发onmouseout事件

 //      onmouseleave：只有在鼠标指针离开被选元素时，才会触发onmouseleave事件

 //    相同点：都是鼠标移走触发事件

 </script>

 </body>

 </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文件

jQuery之jQuery扩展和事件

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>作业1</title>

     <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

     <style>

         .container {

             margin-top: 50px;

         }

     </style>

 </head>

 <body>

 <div class="container">

     <div class="row">

         <div class="col-md-4 col-md-offset-4">

             <form action="" novalidate>

                 <div class="form-group">

                     <label for="username">用户名</label>

                     <input type="text" class="form-control" id="username" placeholder="username">

                     <span id="helpBlock" class="help-block"></span>

                 </div>

                 <div class="form-group">

                     <label for="Password">密码</label>

                     <input type="password" class="form-control" id="Password" placeholder="Password">

                     <span id="helpBlock2" class="help-block"></span>

                 </div>

                 <button type="submit" class="btn btn-default submit">提交</button>

             </form>

         </div>

     </div>

 </div>

 <!--jQuery导入一定要放到js的上面-->

 <script src="jquery-3.2.1.min.js"></script>

 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

 <script>

 //    var span =$("span");

     $(".submit").on("click",function () {

         //先清空状态

         $("form .form-group").removeClass("has-error");

         $("form span").text("");

         $(":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

     })

 </script>

 </body>

 </html>

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);

jQuery之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框编辑修改

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>增删改</title>

     <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

     <style>

         .addBtn {

             margin-top: 30px;

             margin-bottom: 15px;

         }

     </style>

 </head>

 <body>

 <div class="container">

     <div class="row">

         <div class="col-md-9 col-md-offset-2">

             <!-- Button trigger modal -->

             <button type="button" class="btn btn-primary btn-mg addBtn" data-toggle="modal" data-target="#myModal">

                 添加学生的信息

             </button>

             <table class="table table-striped">

                 <tbody>

                 <tr>

                     <th>姓名</th>

                     <th>年龄</th>

                     <th>性别</th>

                     <th>操作</th>

                 </tr>

                 <tr>

                     <td  class="col-md-3">六点</td>

                     <td  class="col-md-3">23</td>

                     <td  class="col-md-3">女</td>

                     <td>

                         <button class="btn btn-success editBtn">编辑</button>

                         <button class="btn btn-danger delBtn">删除</button>

                     </td>

                 </tr>

                 <tr>

                     <td>时时彩</td>

                     <td>24</td>

                     <td>女</td>

                     <td>

                         <button class="btn btn-success editBtn">编辑</button>

                         <button class="btn btn-danger delBtn">删除</button>

                     </td>

                 </tr>

                 <tr>

                     <td>刚强</td>

                     <td>13</td>

                     <td>男</td>

                     <td>

                         <button class="btn btn-success editBtn">编辑</button>

                         <button class="btn btn-danger delBtn">删除</button>

                     </td>

                 </tr>

                 </tbody>

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

                 </button>

                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>

             </div>

             <div class="modal-body">

                 <form>

                     <div class="form-group">

                         <label for="username">姓名</label>

                         <input type="text" class="form-control item" id="username" placeholder="username">

                     </div>

                     <div class="form-group">

                         <label for="age">年龄</label>

                         <input type="text" class="form-control item" id="age" placeholder="age">

                     </div>

                     <div class="form-group">

                         <label for="gender">性别</label>

                         <input type="text" class="form-control item" id="gender" placeholder="gender">

                     </div>

                 </form>

             </div>

             <div class="modal-footer">

                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                 <button type="button" class="btn btn-primary queding">确定</button>

             </div>

         </div>

     </div>

 </div>

 <script src="jquery-3.2.1.min.js"></script>

 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

 <script>

     //添加信息

     $(".queding").on("click",function () {

         arr=[];

         $(".item").each(function () {

 //            console.log($(this).val()) //返回的是input框里面输入的内容

             var ele_v = $(this).val();

             arr.push(ele_v); //吧拿到的值添加到数组

         });

         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>';

         $("tbody").append(s);

         $("#myModal").modal("hide")

     });

     //删除信息

 //    方式一

     $("tbody").on("click",".delBtn",function (e) {  //事件委派

         if (e.target.className=='btn btn-danger delBtn'){

             //找到要删除的行

             // console.log(e.target.parentElement.parentElement);

            e.target.parentElement.parentElement.remove()

         }

     });

 //    方式二

        $("tbody").on("click",".delBtn",function () {  //事件委派

            $(this).parent().parent().remove()  //这里的

         });

     //编辑信息

     $("tbody").on("click",".editBtn",function () {

          var tds = $(this).parent().prevAll();

          tds.each(function () {

             $(this).html('<input type="text" value='+ $(this).text()+ '>')

         });

         $(this).text("保存");

         $(this).removeClass("btn btn-success editBtn");

         $(this).addClass("btn btn-info saveBtn")

     });

     $("tbody").on("click",".saveBtn",function () {

         var tds = $(this).parent().prevAll();

         console.log(tds);

         tds.each(function (){

 //            $(this).text(this.firstElementChild.value);

             $(this).text($(this).children().first().val());

             console.log()

         });

         $(this).text("编辑");

         $(this).removeClass("btn btn-info saveBtn");

         $(this).addClass("btn btn-success editBtn");

     });

 </script>

 </body>

 </html>

增删改1

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

 <!DOCTYPE html>

 <!-- saved from url=(0041)http://v3.bootcss.com/examples/dashboard/ -->

 <html lang="zh-CN">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

     <meta name="description" content="">

     <meta name="author" content="">

     <link rel="icon" href="http://v3.bootcss.com/favicon.ico">

     <title>Dashboard Template for Bootstrap</title>

     <!-- Bootstrap core CSS -->

     <link href="./Dashboard_files/bootstrap.min.css" rel="stylesheet">

     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->

     <link href="./Dashboard_files/ie10-viewport-bug-workaround.css" rel="stylesheet">

     <!-- Custom styles for this template -->

     <link href="./Dashboard_files/dashboard.css" rel="stylesheet">

     <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->

     <!--[if lt IE 9]>

     <script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

     <script src="Dashboard_files/ie-emulation-modes-warning.js"></script>

     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

     <!--[if lt IE 9]>

     //cdn导入css样式

     <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

     <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

     <![endif]

     <!--<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">-->

     <style>

         .menu {

             margin: 0 -20px;

             border-bottom: 1px solid #336699;

         }

         .head {

             padding: 15px;

         }

         .my-table-tool {

             margin-bottom: 15px;

         }

         .menu .nav-sidebar > li > a {

             padding-right: 40px;

             padding-left: 40px;

         }

     </style>

 </head>

 <body>

 <nav class="navbar navbar-inverse navbar-fixed-top">

     <div class="container-fluid">

         <div class="navbar-header">

             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"

                     aria-expanded="false" aria-controls="navbar">

                 <span class="sr-only">Toggle navigation</span>

                 <span class="icon-bar"></span>

                 <span class="icon-bar"></span>

                 <span class="icon-bar"></span>

             </button>

             <a class="navbar-brand" href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Project name</a>

         </div>

         <div id="navbar" class="navbar-collapse collapse">

             <ul class="nav navbar-nav navbar-right">

                 <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Dashboard</a></li>

                 <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Settings</a></li>

                 <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Profile</a></li>

                 <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Help</a></li>

             </ul>

             <form class="navbar-form navbar-right">

                 <input type="text" class="form-control" placeholder="Search...">

             </form>

         </div>

     </div>

 </nav>

 <!--左侧菜单-->

 <div class="container-fluid">

     <div class="row">

         <div class="col-sm-3 col-md-2 sidebar">

             <div class="menu">

                 <div class="head bg-primary">菜单一</div>

                 <ul class="nav nav-sidebar">

                     <li class=""><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Overview <span

                             class="sr-only">(current)</span></a>

                     </li>

                     <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Reports</a></li>

                     <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Analytics</a></li>

                     <li><a href="http://v3.bootcss.com/examples/dashboard/#左侧菜单.html">Export</a></li>

                 </ul>

             </div>

             <div class="menu">

                 <div class="head  bg-primary">菜单二</div>

                 <ul class="nav nav-sidebar">

                     <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">Nav item</a></li>

                     <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">Nav item again</a></li>

                     <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">One more nav</a></li>

                     <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">Another nav item</a></li>

                     <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">More navigation</a></li>

                 </ul>

             </div>

             <div class="menu">

                 <div class="head  bg-primary">菜单三</div>

                 <ul class="nav nav-sidebar">

                     <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">Nav item again</a></li>

                     <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">One more nav</a></li>

                     <li><a href="http://v3.bootcss.com/examples/dashboard/左侧菜单.html">Another nav item</a></li>

                 </ul>

             </div>

         </div>

     </div>

 </div>

 <!--表格-->

 <div class="container">

     <div class="row">

         <div class="col-md-10 col-md-offset-2">

             <!-- Button trigger modal -->

             <button type="button" class="btn btn-primary btn-mg addBtn" data-toggle="modal" data-target="#myModal">

                 添加学生的信息

             </button>

             <table class="table table-striped">

                 <thead>

                 <tr>

                         <th>学号</th>

                         <th>姓名</th>

                         <th>年龄</th>

                         <th>性别</th>

                         <th>操作</th>

                     </tr>

                 </thead>

                 <tbody>

                     <tr>

                         <td  class="col-md-2">1</td>

                         <td  class="col-md-2">李欣</td>

                         <td  class="col-md-2">23</td>

                         <td  class="col-md-2">女</td>

                         <td>

                             <button class="btn btn-success editBtn">编辑</button>

                             <button class="btn btn-danger delBtn">删除</button>

                         </td>

                     </tr>

                     <tr>

                         <td>2</td>

                         <td>时时彩</td>

                         <td>24</td>

                         <td>女</td>

                         <td>

                             <button class="btn btn-success editBtn">编辑</button>

                             <button class="btn btn-danger delBtn">删除</button>

                         </td>

                     </tr>

                     <tr>

                         <td>3</td>

                         <td>刚强</td>

                         <td>13</td>

                         <td>男</td>

                         <td>

                             <button class="btn btn-success editBtn">编辑</button>

                             <button class="btn btn-danger delBtn">删除</button>

                         </td>

                     </tr>

                     <tr>

                     <td>4</td>

                     <td>杜康</td>

                     <td>25</td>

                     <td>男</td>

                     <td>

                         <button class="btn btn-success editBtn">编辑</button>

                         <button class="btn btn-danger delBtn">删除</button>

                     </td>

                 </tr>

                 </tbody>

             </table>

         </div>

     </div>

 </div>

 <!--模态框-->

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

                 </button>

                 <h4 class="modal-title" id="myModalLabel">学生信息</h4>

             </div>

             <div class="modal-body">

                 <form>

                     <div class="form-group">

                         <label for="modal-username">姓名</label>

                         <input type="text" class="form-control item" id="modal-username" placeholder="username">

                     </div>

                     <div class="form-group">

                         <label for="modal-age">年龄</label>

                         <input type="text" class="form-control item" id="modal-age" placeholder="age">

                     </div>

                     <div class="form-group">

                         <label for="modal-gender">性别</label>

                         <input type="text" class="form-control item" id="modal-gender" placeholder="gender">

                     </div>

                 </form>

             </div>

             <div class="modal-footer">

                 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                 <button type="button" class="btn btn-primary queding">确定</button>

             </div>

         </div>

     </div>

 </div>

 <!-- Bootstrap core JavaScript

 ================================================== -->

 <script src="jquery-3.2.1.min.js"></script>

 <!-- Placed at the end of the document so the pages load faster -->

 <!--<script src="Dashboard_files/jquery.min.js"></script>-->

 <!--<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>-->

 <!--<script src="Dashboard_files/bootstrap.min.js"></script>-->

 <!-- Just to make our placeholder images work. Don't actually copy the next line! -->

 <script src="Dashboard_files/holder.min.js"></script>

 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->

 <script src="Dashboard_files/ie10-viewport-bug-workaround.js"></script>

 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

 <script>

     //左侧菜单

     $(".head").on("click", function () {

         // 兄弟标签 紧挨着的ul标签 隐藏  addClass("hide")

         $(this).parent().siblings().children("ul").slideUp();

         // 把自己 紧挨着的ul标签显示  removeClass("hide")

 //        $(this).next().removeClass("hide");

         $(this).next().slideToggle();

     });

     //删除按钮

     $("tbody").on("click","td>.btn-danger",function () {

         $(this).parent().parent().remove()

     });

     //编辑

     $("tbody").on("click",".editBtn",function () {//事件委派

          //弹出模态框

         //alert(123)

         $("#myModal").modal("show");

         //给模态框赋值

         //1、先取值

         var tds = $(this).parent().parent().children();

         var username = tds.eq(1).text();

         var age = tds.eq(2).text();

         var danger = tds.eq(3).text();

         //2、后赋值

         $("#modal-username").val(username);

         $("#modal-age").val(age);

         $("#modal-gender").val(danger);

         //吧tds保存到myModal的data（先把数据保存下来）

         $("#myModal").data("tds",tds);

         console.log(tds);

 //        console.log($("#myModal").data("tds"));

         });

         //点击模态框中的确定按钮，增加事件

         $(".queding").on("click",function () {

             //1、隐藏模态框

             $("#myModal").modal("hide");

             //2、更新td的值0

             //取值

             var username = $("#modal-username").val();

             var age = $("#modal-age").val();

             var denger = $("#modal-gender").val();

 //                赋值

             //拿到你点击的哪一行

             var tds = $("#myModal").data("tds");

             console.log(tds);

             if (tds === undefined) {

                 //因为添加和编辑共用一个模态框，所以先分开判断一下

                 //当tds在模态框中没有值的时候，就实现添加的功能，如果有数据，就做编辑的功能

                 var tr1 = document.createElement("tr");

                 //第一个是td的序号

                 $(tr1).append("<td>" + $("tbody tr").length+1 + "</td>");

                 console.log($("tbody tr").length);

 //             第二个是username

                 $(tr1).append('<td>' + username + '</td>');

                 $(tr1).append('<td>' + age + '</td>');

                 $(tr1).append('<td>' + denger + '</td>');

 //             最后加按钮(找到tbody下的第一行，再从第一行中找到td最后一个td,然后克隆)

 //

                 var s = $("tbody tr:last").find("td").last();

                 var ss = s.clone(true);

                 $(tr1).append(ss);

                 $("tbody").append(tr1);

             } else {

                 console.log(tds);   //这里的tds就是上面用data保存下来的每一列里面的内容

                 tds.eq(1).text(username);

                 tds.eq(2).text(age);

                 tds.eq(3).text(denger);

                 $("#myModal").removeData("tds")

             }

         });

                  //给添加按钮增加事件

             $(".addBtn").on("click",function () {

                 //当点击添加按钮的时候把模态框里面的..内容清空

                 $("#myModal :input").val("");

             });

 </script>

 </body>

 </html>

增删改2

补充一个知识点 data

jQuery之jQuery扩展和事件

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

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

秒客网

jQuery之jQuery扩展和事件

相关文章