第15/16天，jQuery

@(Web前端)[笔记]

一、jQuery是什么？
二、什么是jQuery对象？
三、查找元素（选择器和筛选器）
    3.1 选择器
        3.1.1 基本选择器
        3.1.2 层级选择器
        3.1.3 基本筛选器
        3.1.4 属性选择器
        3.1.5 表单选择器
    3.2 筛选器
        3.2.1 过滤筛选器
        3.2.2 查找筛选器
四、操作元素
    4.1 事件
        4.1.1 页面载入
        4.1.2 事件绑定
        4.1.3 事件委派
    4.2 属性操作
    4.3 each循环
    4.4 文档节点处理

第16天补充
    4.5 动画效果
        4.5.1 显示与隐藏
        4.5.2 滑动
        4.5.3 淡入淡出
        4.5.4 回调函数
        4.5.5 stop()
    4.6 CSS操作
        4.6.1 位置操作
        4.6.2 尺寸操作
五、jQuery练习
    5.1 table正反选
    5.2 复制样式条
    5.3 注册验证
    5.4 拖动面板
    5.5 轮播图
    5.6 表格编辑

一、jQuery是什么？

［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

［3］它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

二、什么是jQuery对象？

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $("#test").html();

jquery的基础语法：$(selector).action()

jQuery语法释译：

$("#test").html() 
   
         意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

         这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 

         虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

         约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]：jquery对象转为dom对象      $("#msg").html();  转换为DOM方式：$("#msg")[0].innerHTML

三、查找元素（选择器和筛选器）

3.1 选择器

3.1.1 基本选择器

$("") 内和CSS查找标签方式基本保持一致

$("*")              //匹配所有标签
$("#id")            //id选择器
$(".class")         //class类选择器
$("element")        //标签选择器
$(".class,p,div")   //逗号表示“或”的意思，满足其一即可

3.1.2 层级选择器

$(".outer div")     //后代选择器
$(".outer>div")     //子代选择器
$(".outer+div")     //毗邻选择器
$(".outer~div")     //普通兄弟选择器

3.1.3 基本筛选器

$("li:first")       //筛选出第一个li标签
$("li:eq(2)")       //筛选出索引为2的li标签
$("li:even")        //筛选出索引为偶数的li标签
$("li:odd")         //筛选出索引为奇数的li标签
$("li:gt(1)")       //筛选出索引值大于1的li标签

3.1.4 属性选择器

$('[id="div1"]')        //选择有id属性且id="div1"的标签
$('["alex="sb"][id]')   //选择有alex(自定义属性)属性，其值为"sb",并且有id属性的标签

3.1.5 表单选择器

$("[type='text']") 也可以简写为 $(":text")
这种方法只适用于input标签：$("input:checked")

$(":enabled")
$(":disabled")
$(":checked")
$(":selected")

$("input:not(:checked)")  //去除所有与给定选择器匹配的元素

在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）

3.2 筛选器

3.2.1 过滤筛选器

$("li").eq(2)       //选择索引值为2的li标签
$("li").first()     //选择第一个li标签
$("ul li").hasClass("test")  //判断所选标签有没有类名为test。

3.2.2 查找筛选器

$("div").children(".test")  //查找子标签
$("div").find(".test")      //查找后代标签

//查找所有兄弟标签
$("div").siblings()         

//向下查找兄弟标签
$(".test").next()           //查找下一个兄弟标签
$(".test").nextAll()        //查找下面所有兄弟标签
$(".test").nextUntil(selector)      //向下查找，截止到符合条件的标签为止


//向上查找兄弟标签
$("div").prev()             //查找上一个兄弟标签
$("div").prevAll()          //查找上面所有兄弟标签
$("div").prevUntil(selector)        //向上查找，截止到符合条件的标签为止 



$(".test").parent()         //查找父标签
$(".test").parents()        //查找所有父级标签
$(".test").parentUntil(selector)    //查找父级标签，截止到符合条件的标签为止

四、操作元素

4.1 事件

4.1.1 页面载入

ready(fn) 相当于原生JS中的onload事件

ready(fn)  // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){})可以简写为$(function(){})

4.1.2 事件绑定

语法：标签对象.事件(函数)
$("p").click(function(){})

4.1.3 事件委派

$("祖先元素").on("事件","后代元素",函数)

$("ul").on("click","li",function(){})

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //引入jQuery文件
    <script src="../../day15_homework/js/jquery-3.2.1.js"></script>
</head>
<body>
<p><button>添加</button></p>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>

<script>
    $("button").click(function () {
        $("ul").append("<li>666</li>")
    });

    //不做事件委派
    //$("ul li").click(function () {
    //    $(this).css("color","red")
    //})    

    $("ul").on("click","li",function () {
        $(this).css("color","red")
    })
</script>
</body>
</html>

注意：如果不对li标签做事件委派，那么新添加的li标签就不会绑定对应的事件

4.2 属性操作

属性

//添加或删除类
$("").addClass(class|fn)
$("").removeClass([class|fn])


//属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();

注意：

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自定义的DOM属性，在处理时，使用attr方法。

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

$("").html()    //括号中加入一个值，是给对象设置内容，可以是文本，也可以是标签。括号为空的话，则是取值。

$("").text()    //获取或设置文本内容

$("").val()     //获取或设置input标签的value值

添加CSS样式

//一次性设置多个样式
$("#c1").css({"color":"red","fontSize":"35px"})

//设置一个样式
$("#c1").css("color","red")

4.3 each循环

$("p").css("color","red")

以上代码是将css操作加到所有的p标签上，内部维持一个循环；但如果对于选中标签进行不同处理，这时就需要对所有标签数组进行循环遍历啦。

jquery支持两种循环方式：

方式一：

格式：$.each(obj,fn)

li=[10,20,30,40];
dic={name:"yuan",sex:"male"};
$.each(li,function(i,x){
    console.log(i,x)
});

方式二：

格式： $("").each(fn)

$("tr").each(function(){
    console.log($(this).html())
})

注意：其中,$(this)代指当前循环标签。

each扩展

function f(){
    for(var i=0;i<4;i++){
        if (i==2){
            return    //会直接跳出循环
        }
        console.log(i)
    }
}
f();



li=[11,22,33,44];
$.each(li,function(i,v){
    if (v==22){
        return;   //  ===试一试 return false会怎样?
    }
    console.log(v)
});
//function里的return只是结束了当前的函数,并不会影响后面函数的执行.
//本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,希望后面的函数也不再执行了!

//那就可以这样做：
    // <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true
    // <2>如果你不想return后下面循环函数继续执行,那么就直接写return false

4.4 文档节点处理

//创建一个标签对象
    $("<p>")


//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>"); 在父标签中插入子标签前父后子
    $("").appendTo(content)       ----->$("p").appendTo("div"); 将子标签插入父标签中，前子后父 
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");  与append()相同，不同的是append插入在末尾，prepend插入在开始位置（第一位）。
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除
    $("").empty()
    $("").remove([expr])

//复制
    $("").clone([Even[,deepEven]])

第16天补充

4.5 动画效果

4.5.1 显示与隐藏

$(selector).show(1000)  //显示，延迟1000毫秒
$(selector).hide(1000)  //隐藏，延迟1000毫秒
$(selector).toggle(1000)    //在显示与隐藏之间切换，延迟1000毫秒

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../day15/day15/jquery/jquery-3.1.1.js"></script>
</head>
<body>

<h1>Hello World</h1>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="qiehuan">切换</button>

<script>
    $("#show").click(function () {
        $("h1").show(1000);   //显示
    });

    $("#hide").click(function () {
        $("h1").hide(1000);   //隐藏
    });

    $("#qiehuan").click(function () {
        $("h1").toggle(1000);  //切换
    })
</script>
</body>
</html>

4.5.2 滑动

$(selector).slideDown(1000);    //滑动出现
$(selector).slideUp(1000);      //滑动隐藏
$(selector).slideToggle(1000);  //滑动切换

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../day15/day15/jquery/jquery-3.1.1.js"></script>
    <script>
    $(document).ready(function(){
     $("#slideDown").click(function(){
         $("#content").slideDown(1000);   //出现
     });
      $("#slideUp").click(function(){
         $("#content").slideUp(1000);   //隐藏
     });
      $("#slideToggle").click(function(){
         $("#content").slideToggle(1000);  //切换
     })
  });
    </script>
    <style>

        #content{
            text-align: center;
            background-color: lightblue;
            border:solid 1px red;
            display: none;
            padding: 50px;
        }
    </style>
</head>
<body>

    <button id="slideDown">出现</button>
    <button id="slideUp">隐藏</button>
    <button id="slideToggle">toggle</button>

    <div id="content">helloworld</div>

</body>
</html>

4.5.3 淡入淡出

$(selector).fadeIn(1000);       //淡入，延迟1000毫秒
$(selector).fadeOut(1000);      //淡出，延迟1000毫秒
$(selecotr).fadeToggle(1000);   //淡入淡出切换，延迟1000毫秒
$(selector).fadeTo(1000,0.5);   //淡入，延迟1000毫秒，颜色深浅度为0.5

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../day15/day15/jquery/jquery-3.1.1.js"></script>
    <script>
        $(document).ready(function(){
           $("#in").click(function(){
               $("#id1").fadeIn(1000);    //淡入  
           });
           
            $("#out").click(function(){
               $("#id1").fadeOut(1000);   //淡出
           });
            
            $("#toggle").click(function(){
               $("#id1").fadeToggle(1000);  //切换
           });
            
            $("#fadeto").click(function(){
               $("#id1").fadeTo(1000,0.4);  //淡出，并设置淡出后的颜色深浅度为0.4
           });
        });
    </script>

</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>
      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
</body>
</html>

4.5.4 回调函数

事件执行完成后，再调用这个回调函数执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>

</head>
<body>
  <button>hide</button>
  <p>helloworld helloworld helloworld</p>
  
 <script>
   $("button").click(function(){
       $("p").hide(1000,function(){
           alert($(this).html())
       })
   })
    </script>
</body>
</html>

4.5.5 stop()

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

jQuery停止动画

4.6 CSS操作

jQuery 参考手册 - CSS操作

4.6.1 位置操作

**offset() **

获取或设置匹配元素在当前窗口（body标签）的相对偏移，返回的对象包含两个整形属性：top和left，以像素计，此方法只对可见元素有效。

//获取相对偏移量
var $ofs=$(".outer").offset();    //结果是{top:8, left:8}
console.log("上：",$ofs.top);     //获取顶部偏移量
console.log("左：",$ofs.left);      //获取左边偏移量

//设置偏移量
$(".outer").offset({top:50,left:200});  //只能设置顶部和左边，不能设置底部和右边；

offsetParent()

返回最近的定位祖先元素。

$("button").click(function(){
  $("p").offsetParent().css("background-color","red");
});

position()

获取匹配元素相对于已定位的父级元素的偏移。
返回的对象包含两个整形属性：top和left，以像素计。

注： 已定位的父级元素是指设置了绝对定位position:absolute;的父级元素。当所有父级元素没有设置绝对定位时，默认参照body标签取偏移量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../day15/day15/jquery/jquery-3.1.1.js"></script>
    <style>
        *{
            margin:0;
        }
        .outer{
            width: 500px;
            height: 500px;
            background: #7fff0c;
            margin-top: 50px;
            margin-left: 50px;
            position: absolute;    /*父元素设置绝对定位*/
            top: 0;
            left: 0;
        }
        .title{
            width: 100px;
            height: 100px;
            background: #204982;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="title"></div>
</div>

<script>
    //获取偏移量
    var $position=$(".title").position();    //结果是{top:0,left:0}
    console.log("上：",$position.top);
    console.log("左：",$position.left);
</script>
</body>
</html>

scrollLeft()与scrollTop()

当页面水平方向或垂直方向内容较多，当前窗口无法全部显示，出现滚动条时：

scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时，位置是 0。
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。滚动条的垂直位置是指垂直滚动条相对于其顶部的偏移，以像素计。

$(".btn1").click(function(){
  $("div").scrollLeft(100);   //将水平滚动条定位在距离最左边100像素的位置。

  $("div").scrollTop(100);   //将垂直滚动条定位在距离其顶部100像素的位置。
});

4.6.2 尺寸操作

height([val|fn])
设置或获取盒子元素本身的高度；

width([val|fn])
设置或获取盒子元素本身的宽度；

innerHeight()
获取元素本身的高度加上padding-top和padding-bottom

innerWidth()
获取元素本身的宽度加上padding-left和padding-right

outerHeight()
元素本身的高度加上padding-top和padding-bottom，再加上边框的上下高度（即border-top和border-bottom）

outerWidth()
元素本身的宽度加上padding-left和padding-right，再加上边框的上下高度（即border-left和border-right）

outerHeight(true)
在outerHeight()基础上再加上margin-top和margin-bottom

outerWidth(true)同上

五、jQuery练习

5.1 table正反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <button>全选</button>
     <button>取消</button>
     <button>反选</button>
     <hr>
     <table border="1">
         <tr>
             <td><input type="checkbox"></td>
             <td>111</td>
             <td>111</td>
             <td>111</td>
             <td>111</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>222</td>
             <td>222</td>
             <td>222</td>
             <td>222</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>333</td>
             <td>333</td>
             <td>333</td>
             <td>333</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>444</td>
             <td>444</td>
             <td>444</td>
             <td>444</td>
         </tr>
     </table><script src="jquery.min.js"></script>
     <script>
            $("button").click(function(){
               if($(this).text()=="全选"){    // $(this)代指当前点击标签
                   $("table :checkbox").prop("checked",true)
               }
                else if($(this).text()=="取消"){
                   $("table :checkbox").prop("checked",false)
               }
                else {
                    $("table :checkbox").each(function(){
                        $(this).prop("checked",!$(this).prop("checked"));
                 });
               }
            });
     </script>
</body>
</html>

5.2 复制样式条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../day15/day15/jquery/jquery-3.1.1.js"></script>
</head>
<body>
<div class="outer">
    <div class="item">
        <button class="add">+</button>
        <input type="text">
    </div>
</div>

<script>
    $(".add").click(function () {
        var $copy=$(this).parent().clone();
        $copy.children("button").html("-").removeClass("add").addClass("rm");
        $(".outer").append($copy);
    });

    $(".outer").on("click",".rm",function () {
        $(this).parent().remove();
    })
</script>
</body>
</html>

5.3 注册验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../day15/day15/jquery/jquery-3.1.1.js"></script>
</head>
<body>
<form class="Form" id="form">
    <p><input class="v1" type="text" name="username" mark="用户名"></p>
    <p><input class="v1" type="text" name="email" mark="邮箱"></p>
    <p><input type="submit" value="submit"></p>
</form>
<script>
    $("#form :submit").click(function(){
          flag=true;
          $("#form .v1").each(function(){
              $(this).next("span").remove();// 防止对此点击按钮产生多个span标签
              var value=$(this).val();
              if (value.trim().length==0){
                     var mark=$(this).attr("mark");
                     var ele=document.createElement("span");
                     ele.innerHTML=mark+"不能为空!";
                     $(this).after(ele);
                     $(ele).prop("class","error");// DOM对象转换为jquery对象
                     flag=false;
                     return false ; //-------->引出$.each的return false注意点
              }
          });
          return flag
    });
</script>
</body>
</html>

5.4 拖动面板

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../../day15/day15/jquery/jquery-3.1.1.js"></script>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;color: white;">
            标题
        </div>
        <div style="height: 300px;">
            内容
        </div>
    </div>
<script>
    $(function(){
        // 页面加载完成之后自动执行
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        }).mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            // 原始鼠标横纵坐标位置
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $(this).on('mousemove', function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');
            })
        }).mouseup(function(){
            $(this).off('mousemove');
        });
    })
</script>
</body>
</html>

5.5 轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../day15/day15/jquery/jquery-3.1.1.js"></script>
    <title>Title</title>
    <style>
        .outer{
            width: 790px;
            height: 340px;
            margin: 80px auto;
            position: relative;
        }
        .img li{
            position: absolute;
            list-style: none;
            top: 0;
            left: 0;
            display: none;
        }
        .num{
            position: absolute;
            bottom: 18px;
            left: 270px;
            list-style: none;
        }
        .num li{
            display: inline-block;
            width: 18px;
            height: 18px;
            background-color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 18px;
            margin-left: 4px;
        }
        .btn{
            position: absolute;
            top:50%;
            width: 30px;
            height: 60px;
            background-color: lightgrey;
            color: white;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
            opacity: 0.7;
            margin-top: -30px;
            display: none;
        }
        
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .outer:hover .btn{
            display: block;
        }
        .num .active{
            background-color: red;
        }
    </style>
</head>
<body>
      <div class="outer">
          <ul class="img">
              <li style="display: block"><a href="">![](img/1.jpg)</a></li>
              <li><a href="">![](img/2.jpg)</a></li>
              <li><a href="">![](img/3.jpg)</a></li>
              <li><a href="">![](img/4.jpg)</a></li>
              <li><a href="">![](img/5.jpg)</a></li>
              <li><a href="">![](img/6.jpg)</a></li>
          </ul>

          <ul class="num">
              <!--通过JS生成-->
              <!--<li class="active"></li>-->
              <!--<li></li>-->
          </ul>

          <div class="left  btn"> < </div>
          <div class="right btn"> > </div>
      </div>
<script>
    var i=0;
//  通过jquery自动创建按钮标签
    var img_num=$(".img li").length;
    for(var j=0;j<img_num;j++){
        $(".num").append("<li></li>")
    }

    $(".num li").eq(0).addClass("active");

// 手动轮播
    $(".num li").mouseover(function () {
        i=$(this).index();
        $(this).addClass("active").siblings().removeClass("active");

        $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)

    });

// 自动轮播
    var c=setInterval(GO_R,1500);
    function GO_R() {
        if(i==img_num-1){
            i=-1
        }
         i++;
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
    }

    function GO_L() {
        if(i==0){
            i=img_num
        }
         i--;
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);  // fadeIn,fadeOut单独另开启的线程
    }

    $(".outer").hover(function () {
        clearInterval(c)
    },function () {
        c=setInterval(GO_R,1500)
    });

// button 加定播
    $(".right").click(GO_R);
    $(".left").click(GO_L)
</script>
</body>
</html>

5.6 表格编辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="../../day15/day15/jquery/jquery-3.1.1.js"></script>
    <script src="bootstrap.js"></script>
    <style>
        .container .row td{
            padding: 10px;
        }
        #box{
          padding-top:50px;
        }
       .add{
           margin:20px 0;
       }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-7 col-lg-offset-3" id="box" >
            <div>
                <button type="button" class="btn btn-success add" data-toggle="modal" data-target="#myModal">
                添加员工信息
                </button>
            </div>

            <table class="table table-striped">
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>部门</th>
                    <th>薪水</th>
                    <th>操作</th>
                </tr>

                <tr>
                    <td>张三</td>
                    <td>23</td>
                    <td>销售部</td>
                    <td>3000</td>
                    <td>
                        <button class="btn btn-danger btn-sm del">删除</button>
                        <button class="btn btn-info btn-sm edit">编辑</button>
                        <button class="btn btn-primary btn-sm">查看</button>
                    </td>
                </tr>

                 <tr class="handle">
                    <td>李四</td>
                    <td>32</td>
                    <td>保安部</td>
                    <td>5000</td>
                    <td>
                        <button class="btn btn-danger btn-sm del">删除</button>
                        <button class="btn btn-info btn-sm edit">编辑</button>
                        <button class="btn btn-primary btn-sm">查看</button>
                    </td>
                </tr>
            </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">
          <div class="row">
              <div class="col-md-5 col-lg-offset-3">
                <form class="add_form edit_form">
                      <div class="form-group">
                        <label for="username">姓名</label>
                        <input type="text" class="form-control" id="username" placeholder="username">
                      </div>
                      <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" id="age" placeholder="age">
                      </div>
                      <div class="form-group">
                        <label for="dep">部门</label>
                        <input type="text" id="dep" placeholder="dep" class="form-control">

                      </div>

                       <div class="form-group">
                        <label for="salary">薪水</label>
                        <input type="text" class="form-control" id="salary" placeholder="salary">
                      </div>
                  </form>
              </div>
          </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary add_save">Save changes</button>
        <button type="button" class="btn btn-primary edit_save" style="display: none">Save changes</button>
      </div>
    </div>
  </div>
</div>


<script>
         // 提炼出一个创建tr的函数
         function createTr(){
             var $tr=$("<tr>");
             $(".add_form :text").each(function(){
                 $tr.append($("<td>").html($(this).val()))
             });
             $handle=$(".handle td:last").clone();
             $tr.append($handle);
             return $tr
         }

         // 添加按钮
         $(".add_save").click(function(){
             $("#myModal").modal("hide");
             var $tr=createTr();
             $(".table tbody").append($tr)
         });

         // 删除按钮
         $("table").on("click",".del",function(){
            $(this).parent().parent().remove()
         });

         //编辑按钮
         $("table").on("click",".edit",function(){
             var $edit_obj=$(this).parent().parent();
             var arr=[];
             $(this).parent().siblings().each(function(){
                 arr.push($(this).text())
             });

             $(".edit_form :text").each(function(i){
                  $(this).val(arr[i])
             });

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

              $(".edit_save").show().prev().hide();
              $(".edit_save").click(function(){
                  $("#myModal").modal("hide");
                  // 创建tr标签
                 var $tr=createTr();
                 $edit_obj.replaceWith($tr);
                 $(".edit_save").hide().prev().show();
             });

          })

</script>
</body>
</html>

最后编辑于：2017.12.11 05:54:10

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 202,980评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,178评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,868评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,498评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,492评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,521评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,910评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,569评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,793评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,559评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,639评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,342评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,931评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,904评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,144评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,833评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,350评论 2赞 342