jQuery

jQuery介绍

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

jQuery的优势

一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。

丰富的DOM选择器,jQuery的选择器用起来很方便，相对于js。

链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。

Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。

跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等

jQuery内容：

一 、jQuery的引入方式

// 本地文件引入
<script src="jquery-3.4.1.js"></script>
<script>
    jQuery代码
    原生js也可以写
</script>

// CDN引入(网络资源引入)
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

 

二 、jQuery和dom对象的转换方法:

dom---jquery  $(dom)
jquery--dom   jquery对象[0]

 

简单练习：                                  

 

三 、选择器

基本选择器（同css）

id选择器：$("#id")
标签选择器：$("tagName")
class选择器：$(".className")
所有元素选择器：$("*")
组合选择器：$("#id, .className, tagName")

 

层级选择器：（同css）

$("x y");    // x的所有后代y（子子孙孙）
$("x > y");  // x的所有儿子y（儿子）
$("x + y")   // 找到所有紧挨在x后面的y
$("x ~ y")   // x之后所有的兄弟y

 

基本筛选器（选择之后进行过滤）：

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

 

练习：

 

属性选择器

// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

练习：      

 

表单筛选器：

多用于找form表单里面出现的input标签，当然通过属性选择器找肯定也是没问题的，这样就是写着简单一些

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

 

表单对象属性:

:enabled
:disabled
:checked
:selected

 

练习：

          

 

 

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

 

筛选器方法（将来用的很多）

$("#id").next() 下一个元素
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它

$("#id").prev()  上一个元素
$("#id").prevAll()  # 注意找到的标签的顺序,倒叙
$("#id").prevUntil("#i2")

// 父亲元素
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，
// 这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。

 

// 儿子和兄弟元素
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选

// 查找 等价于 $("div p")
// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p")  找到的是p标签,找的是div后代中所有的p标签

// 筛选  等价于 $("div.c1")
// 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1")   找的是带有class=c1的div标签
// 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div，
// 和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签

 

补充（和前面使用冒号的一样 :first等，只不过冒号的那个是写在选择器里面的，而下面的这几个是方法）：

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

 

绑定点击事件

对象.click(function(){})

$('#d1').click(
    function(){
        ...
    }
)

 

四 、操作标签

样式操作

样式类（添加删除class类的值来修改样式）

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

 练习：

 

直接样式操作css

对象.css(属性名,属性值)
对象.css({'属性名':'属性值',...})

 

五 、位置操作

 

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移，不能设置位置

$(window).scrollTop()  //滚轮向下移动的距离
$(window).scrollLeft() //滚轮向左移动的距离

练习：

scrollTop 滚轮往下移动了多少了
    用法:$(window).scroll(function(){
        console.log($(window).scrollTop())
    })
    设置值:
        $(window).scrollTop(100) 将滚轮移动到100的位置
scrollLeft

 

尺寸

height()   // content的高度
width()    // content的宽度
innerHeight()   // content + 两个padding
innerWidth()
outHeight()      // content + 两个padding + 两个border
outerWidth()

练习：

 

 文本操作

.html()  // 获取标签和文本
.text()  // 获取文本
.html('xxx')  // 识别标签
.text('xxx')

值操作

val()
    
    input type=text  对象.val()
    input type=radio 选中对象.val()
    select   select标签对象.val()
    
    设置值
        input type=radio 对象.val(['1']) 对应着value属性的值
        select   select标签对象.val('1') 多选照样是数组,
    input type='checkbox' 
        选中对象.val()  $(':checked') 注意他会将select标签选中的标签也算上,想看多个值需要循环

    for(var i=0;i<$(':checkbox:checked').length;i++){console.log($(":checkbox:checked").eq(i).val())}
　　 // 使用for循环获得checkbox的内容
　　 $("select").val()
　　 // 获取select标签对象的value值

 练习：       设置值

 

 属性操作

设置
attr('age','18')
attr({'age':'18','name':'chao'})
查看
attr('age')
删除
removeAttr('age')

prop()  用在input(type:radio,checkbox),select

prop('checked')  true--false

设置
想设置选中的input标签对象.prop('checked',true) 
取消选中:.prop('checked',false) 

prop和attr的区别：

　　　　　　attr全称attribute(属性) 

　　　　　　prop全称property(属性)

　　虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

总结一下：

　　1.对于标签上有的能看到的属性和自定义属性都用attr

　　2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

 

练习：

增删属性：checkbox增加属性（attr,prop）

 

文档处理练习：

// 添加到内部元素后面
$('div').append(a) 将a添加到div内部的后面
$(a).appendTo('div') 将a添加到div内部的后面
// 添加到内部元素前面
$('div').prepend(a) 将a添加到div内部的前面
$(a).prependTo('div') 将a添加到div内部的前面
// 添加到指定元素外部的后面
after
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
// 添加到指定元素外部的前面
before
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
// 移除和清空元素
empty() 清空标签中的所有内容,但是标签还在
remove() 删除整个标签
// 替换
$(a).replaceWith(p)
$(a).replaceAll(p)
扩展写法:重点 (直接添加a标签)
$('#d1').append('<a href="https://www.baidu.com">百度</a>')

练习：

                    

克隆clone

.clone()  
带事件克隆
.clone(true)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<button class="btn">屠龙宝刀,点击就送</button>


<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$('.btn').click(function () {
    var btnClone = $(this).clone(true); //
    $(this).after(btnClone);
})

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

 

 六、事件

 绑定事件的两种方式

标签对象.click(function(){})
标签对象.on('click',function(){})
input事件只能用on绑定

常用事件

click
hover
    对象.hover(
        1.鼠标进入
        function(){},
        2.鼠标移出
        function(){}
    )
blur   退出聚焦
focus  聚焦
change  文本内容改变
mouseenter   
mouseover
    mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象
keyup,keydown
$(window).keyup(function(e){
    e.keyCode;  e为事件对象,keyCode是获取用户按下了哪个键,数字表示
})

移除事件（不常用）

.off( events [, selector ][,function(){}])
// off() 方法移除用 .on()绑定的事件处理程序。
$("li").off("click")；就可以了
// 1.events： 事件
// 2.selector: 选择器（可选的）
// 3.function: 事件处理函数

阻止后续事件执行

1. return false; // 常见阻止表单提交等，如果input标签里面的值为空就组织它提交，就可以使用这两种方法

2. e.stopPropagation();

事件冒泡

冒泡的意思就是因为html可以嵌套，如果你给儿子标签绑定了点事件或者没有绑定点击事件，父级标签绑定了点击事件，
那么你一点击子标签，不管子标签有没有绑定事件，都会触发父级标签的点击事件，如果有，会先触发子标签的点击事件，
然后触发父级标签的点击事件，不管子标签有没有点击事件，都会一级一级的还往上找点击事件

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: #FD6C6C;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div class="cc">
    <div class="c1"></div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

<script>
    $(".cc").click(function () {
        alert("father")
    });
    $(".c1").click(function () {
        alert("son")
    });
</script>
</body>
</html>

阻止事件冒泡

    $('.cc').click(function () {
        alert('我是父级标签');
    });
    $('.c1').click(function (e) {
        alert('我是子标签');
       // $('.cc').off('click');  这个是移除事件，no
       //  return false;  方式1
        e.stopPropagation();  方式2
    })

return false

e.stopPropagation()

事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。

$(祖先标签).on('click','后代标签选择器',function(){})

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="d1">
    <button class="add">添加</button>
</div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

<script>
    // $(".add").click(function () {
    //     // 需求说明：点击添加按钮会在自己后面追加一个相同的标签
    //     var btnStr = "<button class=\"add\">添加</button>";
    //     $("#d1").append(btnStr)
    // })

    // 以上方法确实能够实现，不过点击新创建的按钮是没有绑定事件的，只能点击原始的那个按钮
    // 需要实现新增的每个按钮都可以点击新增就需要用到事件委托

    // 事件委托
    $("#d1").on("click",".add",function () {
        // console.log($(this));  这里的$(this)还是你点击的后代标签
        var btnStr = "<button class=\"add\">添加</button>";
        $("#d1").append(btnStr)
    })

</script>

</body>
</html>

 作业：

　　

作业代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .shadow{
            position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background-color: rgba(0,0,0,0.3);
            z-index: 10;
        }
        .mode{
            position: fixed;
            width: 400px;
            height: 300px;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -150px;
            background-color: white;
            z-index: 11;
        }
        .hide{
            display: none;
        }
        .error{
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>

<button id="add">新增</button>
<table border="1">
    <thead>
    <tr>
        <th>选择</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>小明</td>
        <td>篮球</td>
        <td><button class="del">删除</button></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>小刚</td>
        <td>足球</td>
        <td><button class="del">删除</button></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>小红</td>
        <td>吃饭</td>
        <td><button class="del">删除</button></td>
    </tr>
    </tbody>
</table>

<div class="shadow hide">

</div>
<div class="mode hide">
    <div>
        <input type="text" id="username">
        <span class="error"></span>
    </div>
    <div>
        <input type="text" id="hobby">
        <span class="error"></span>
    </div>
    <div>
        <button id="no">取消</button>
        <button id="yes">确定</button>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

<script>
    // 新增按钮绑定点击事件（点击后弹出模态对话框）
    $("#add").click(function () {
        $(".shadow,.mode").removeClass("hide");
    });
    // 取消按钮绑定点击事件（点击后隐藏模态对话框）
    $("#no").click(function () {
        $(".shadow,.mode").addClass("hide");
        // 清空用户输入内容
        $("#username").val("");
        $("#hobby").val("")
    });
    // 确定按钮绑定点击事件（点击后隐藏模态对话框）
    $("#yes").click(function () {
        // 获取用户输入内容
        var username = $("#username").val();
        var hobby = $("#hobby").val();
        // $(".error").text("");
        // 校验用户输入内容是否为空，做出相应的提示
        if (username.trim().length === 0){
            $("#username").next().text("用户名不能为空");
            return;
        }else {
            $("#username").next().text("");
        }
        if (hobby.trim().length === 0){
            $("#hobby").next().text("爱好不能为空");
            return;
        }else {
            $("#hobby").next().text("");
        }
        // 组合一个表格，追加到table标签中
        var addStr = "<tr><td><input type='checkbox'></td><td>"+username+"</td><td>"+hobby+
            "</td><td><button class='del'>删除</button></td></tr>";
        $('tbody').append(addStr);
        // 添加到表格中同时关闭对话框（隐藏模态对话框）
        $(".shadow,.mode").addClass("hide");
        // 清空用户输入内容
        $("#username").val("");
        $("#hobby").val("")
    });

    // ----------- 有bug -------------- 新增的删除不了

    // 删除按钮绑定点击事件（点击后删除整行内容）
    // $(".del").click(function () {
    //     // this就是点击的这个标签
    //     $(this).parent().parent().remove();
    // })

    // ---------- 解决方法 ------------ 使用事物委托

    // 新增的删除按钮没有被绑定上点击事件,因为绑定点击事件的动作已经过去了
    // 给新增删除按钮让他也具备点击事件,需要用到事件委托
    $("tbody").on("click",".del",function () {
        $(this).parent().parent().remove();
    })


</script>

</body>
</html>

 

 

页面载入

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

之前出现过一个问题，当js代码放在head标签里或者body标签的最上面时，如果你写了操作某个标签的内容的话，那个标签还没加载出来，先加载了你的js代码，就找不到这个标签，所以不会生效。

当时的解决方法两种：

1.写在body标签最下面

2.使用window.onload=function(){js的代码}，等页面上所有的元素都加载完

但是这个window.onload有个缺点，这个缺点就是这个操作时给window.onload赋值，如果你自己写了两个js文件，每个js文件中都有一个window.onload的话，那么后引入的文件会把前面引入的文件的window.onload里面的js代码全部覆盖掉，那么第一个文件的js代码就失去了效果，还有一个问题就是，window.onload会等到页面上的文档、图片、视频等所有资源都加载完才执行里面的js代码，导致有些效果的加载比较慢

第一种写法：

$(document).ready(function(){
// 在这里写你的JS代码...
})

简写（常用）

$(function(){
// 你在这里写你的代码
})

与window.onload的区别

window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用

jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

动画效果（了解）

// 基本
show([s,[e],[fn]])  $('.c1').show()  //show(5000),就是5秒之后显示出来这个标签，并且有一个动画效果，（搞个img图片看看效果），后面两个参数先不用管
hide([s,[e],[fn]])  $('.c1').hide()
toggle([s],[e],[fn])//这几个toggle的意思就是你原来是什么效果，我就反着来
// 滑动（拉窗帘一样）
slideDown([s],[e],[fn])  
//使用的时候别忘了给标签设置一个高度和宽度，其实就是控制你的标签高度，如果你写$('#di').slideUp(5000)；意思就是5秒内把你的高度变为0
//还有如果你直接操作的是img标签和操作img标签的父级标签，两个的效果是不同的
slideUp([s,[e],[fn]]) 
slideToggle([s],[e],[fn])
// 淡入淡出（控制透明度）
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])  o参数是透明度，0-1的区间，意思是淡入或者淡出到一个多大的透明读
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

 

each循环

.each(function(index, Element))：

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

$.each(数组/{自定义对象},function(k,v){}) k索引 v值
$('div').each(function(k,v){}) k索引,v是dom标签对象

return false;结束循环
return;结束本次循环

1.遍历元素

jQuery.each(collection, callback(indexInArray, valueOfElement))
一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

li =[10,20,30,40]
$.each(li,function(i, v){  
  console.log(i, v);//function里面可以接受两个参数，i是索引，v是每次循环的具体元素。
})

循环自定义对象也是可以的：
// var d1 = {'name':'chao','age':18}
// $.each(d1,function(k,v){console.log(k,v)})

2.遍历jQuery对象

.each(function(index, Element))
遍历一个jQuery对象，为每个匹配元素执行一个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>窗前明月光</li>
    <li>地上鞋两双</li>
    <li>举头望明月</li>
    <li>杨家有女初长成</li>
    <li>后宫佳丽三千人</li>
</ul>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $("li").each(function (k, v) {
        console.log(k, v)
    });
</script>
</html>

结果：v 返回的是DOM对象

v值是dom对象，所以需要取值：

分别使用dom对象.innerText取值，和转换成jquery对象.text()取值。

3.终止each循环

return false;
结束循环

return;
结束本次循环
可以return 除了false以外的任何值，一般不写

 

练习及总结：
       

.data()

任意jQuery对象都有data方法，可以保存任意值，可以用来代替全局变量

 

$('div').data('name','值')  // 设置值
// 描述：在匹配的元素上存储任意相关数据。
$('div').data('name')  // 取值
// 取到name相对于的值
$('div').removeData('name')  // 移除
// 描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

作业：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 99;
        }

        .modal {
            width: 300px;
            height: 200px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
            z-index: 1000;
        }

        .hide {
            display: none;
        }

        .input-box {
            margin: 40px;
        }
    </style>
</head>
<body>

<button id="add">新增</button>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>金老板</td>
        <td>开车</td>
        <td>
            <button class="fire">开除</button>
            <button class="edit">编辑</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>景女神</td>
        <td>茶道</td>
        <td>
            <button class="fire">开除</button>
            <button class="edit">编辑</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>苑昊（苑局）</td>
        <td>不洗头、不翻车、不要脸</td>
        <td>
            <button class="fire">开除</button>
            <button class="edit">编辑</button>
        </td>
    </tr>
    </tbody>
</table>

<div class="cover hide"></div>
<div class="modal hide">
    <div class="input-box">
        <div>
            <label>姓名：
                <input type="text" id="name">
            </label>
        </div>
        <div>
            <label>爱好：
                <input type="text" id="hobby">
            </label>
        </div>
        <button id="cancel" type="button">取消</button>
        <button id="submit" type="button">提交</button>
    </div>


</div>
<script src="jquery.js"></script>
<script>
    // 定义一个清空输入框并且隐藏模态框的方法
    function hideModal() {
        // 1. 清空input的值
        $("#name,#hobby").val('');
        // 2. 隐藏起来
        $(".cover,.modal").addClass('hide');
    }

    // 定义一个显示模态框的方法
    function showModal() {
        // 1. 移除cover和modal的hide样式
        $(".cover,.modal").removeClass('hide');
    }

    // 开除按钮的功能
    $("table").on('click', '.fire', function () {
        // 点击开除按钮要做的事儿
        // 把当前行移除掉
        //this  --> 触发当前点击事件的DOM对象
        $(this).parent().parent().remove();  // 链式操作
    });
    // 新增按钮的功能
    $("#add").click(function () {
        // 点击新增按钮要做的事儿
        showModal();
    });
    // 点击modal中的cancel按钮
    $("#cancel").click(function () {
        hideModal();
    });

    // 点击modal中的submit按钮
    $("#submit").click(function () {
            // 1. 获取用户输入的值
            var name = $("#name").val();
            var hobby = $("#hobby").val();
        // 判断是添加操作还是编辑操作
        var $editTr = $(this).data('xyh');
        if ( $editTr === undefined) {
            // 3. 创建一个tr标签，把数据塞进去
            var trEle = document.createElement("tr");
            $(trEle).append('<td><input type="checkbox"></td>');
            $(trEle).append('<td>' + name + '</td>');
            var tdTmp = document.createElement('td');
            tdTmp.innerText = hobby;
            $(trEle).append(tdTmp);
            $(trEle).append('<td><button class="fire">开除</button> <button class="edit">编辑</button></td>')
            // 4. 把上一步的tr追加到表格的tbody后面
            $('tbody').append(trEle);
        } else {
            // 进入编辑模式
            // 1. 取出用户之前编辑的那一行
            // 2. 修改对应td的文本
            $editTr.children().eq(1).text(name);
            $editTr.children().eq(2).text(hobby);
            // 3. 清空submit 按钮身上的data
            $('#submit').removeData('xyh');
        }
        // 2. 隐藏模态框，清空输入框
        hideModal();
    });
    // 点击编辑按钮要做的事儿
    $('body').on('click', '.edit', function () {
        // 1. 弹出模态框
        showModal();
        // 2. 把当前行的信息显示到模态框的input中
        // 2.1 获取当前行的姓名和爱好
        var $currentTr = $(this).parent().parent();
        var nameValue = $currentTr.children().eq(1).text();
        var hobbyValue = $currentTr.children().eq(2).text();
        // 第二种方式：
        // var name = $(this).parent().prev().prev().text();
        // var hooby = $(this).parent().prev().text();
        // 2.2 把上一步获取的值设置给input标签
        $('#name').val(nameValue);
        $('#hobby').val(hobbyValue);
        // 3. 给模态框中的提交按钮绑定一个data
        $('#submit').data('xyh', $currentTr);
    })
</script>

</body>
</html>

 

插件(了解即可)

jQuery.extend(object)

jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

<script>
jQuery.extend({ //$.extend({})
  min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function
  max:function(a, b){return a > b ? a : b;}
});
$.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>

jQuery.fn.extend(object)

一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。 

<script>
  jQuery.fn.extend({  //给任意的jQuery标签对象添加一个方法
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>

单独写在文件中的扩展

(function(jq){
  jq.extend({
    funcName:function(){
    ...
    },
  });
})(jQuery);