JQuery 测试内容(不保证内容完整性)

JQuery 基础

tags: `前端` `JQuery` `基础`

一什么是JQery

是一个轻量级的兼容多浏览器的JavaScript库(类库)

jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是："Write less, do more."

二为什么使用JQery

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

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

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

三怎么下载使用

版本选择

1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

版本下载

官方地址:http://jquery.com/download/
压缩的版本3.3.1 --->上线使用
未压缩的版本3.3.1 --->开发使用

安装两种方式

pass

优美胜于丑陋（Python 以编写优美的代码为目标）
明了胜于晦涩（优美的代码应当是明了的，命名规范，风格相似）
简洁胜于复杂（优美的代码应当是简洁的，不要有复杂的内部实现）
复杂胜于凌乱（如果复杂不可避免，那代码间也不能有难懂的关系，要保持接口简洁）
扁平胜于嵌套（优美的代码应当是扁平的，不能有太多的嵌套）
间隔胜于紧凑（优美的代码有适当的间隔，不要奢望一行代码解决问题）
可读性很重要（优美的代码是可读的）
即便假借特例的实用性之名，也不可违背这些规则（这些规则至高无上）
不要包容所有错误，除非你确定需要这样做（精准地捕获异常，不写 except:pass 风格的代码）
当存在多种可能，不要尝试去猜测
而是尽量找一种，最好是唯一一种明显的解决方案（如果不确定，就用穷举法）
虽然这并不容易，因为你不是 Python 之父（这里的 Dutch 是指 Guido ）
做也许好过不做，但不假思索就动手还不如不做（动手之前要细思量）
如果你无法向人描述你的方案，那肯定不是一个好方案；反之亦然（方案测评标准）
命名空间是一种绝妙的理念，我们应当多加利用（倡导与号召）

基础知识

基本语法

jquery的基础语法：

$(selector).action()

查找标签

:::info
本章节练习题基于:jQuery选择器筛选器练习.html
:::

基本选择器

$("#id的值")

id选择器

$("#id的值")

举例:找到本页面中id是i1的标签

$("#i1")
--------
-> Object [ div#i1.container
 ]

标签选择器

查找所有标签

$("*")
----------
Object { 0: html
, 1: head, 2: meta, 3: meta, 4: meta, 5: title, 6: link, 7: link, 8: style, 9: body, … }

查找

class选择器

$(".class")

$(".c1")
Object { 0: h1.c1
, 1: h1.c1, length: 2, prevObject: Object(1) }

配合使用

找到div的container类的标签

$("div.container")
----------
r.fn.init(6) [div.container, div.container, div.container, div#i1.container, div.container, div.container, prevObject: r.fn.init(1)]

层级选择器

练习：

自定义模态框，使用jQuery实现弹出和隐藏功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <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: 400px;
            height: 300px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
            z-index: 100;
        }

        .close {
            float: right;
            margin-right: 15px;
            cursor: pointer; /* 鼠标移上去光标显示类型 */
        }

        .hide {
            display: none;
        }

        /*#login {*/
        /*!*float: right;*!*/
        /*!*top: 0;*!*/
        /*!*right: 100%;*!*/
        /*}*/
    </style>
</head>
<body>
<div>
    <h1>《钗头凤》唐婉</h1>
    <p>世情薄</p>
    <p>人情恶</p>
    <p>雨送黄昏花易落</p>
    <p>晓风干</p>
    <p>泪痕残</p>
    <p>欲笺心事</p>
    <p>独语斜阑</p>
    <p>难 难 难</p>

    <p>人成各</p>
    <p>今非昨</p>
    <p>病魂长似秋千索</p>
    <p>角声寒</p>
    <p>夜阑珊</p>
    <p>怕人询问</p>
    <p>咽泪装欢</p>
    <p>瞒 瞒 瞒</p>
</div>

<button id="login">登录</button>
<div class="cover hide"></div>
<div class="modal hide">
    <div class="close">X</div>
</div>

<script src="jquery.js"></script>
<script>
    $("#login")[0].onclick = function () {
        //去掉cover和modal的hide样式类
        // 有两种方式
        // 方式一
        // $(".cover")[0].classList.remove('hide');
        // $(".modal")[0].classList.remove('hide');
        //方式二
        $(".cover,.modal").removeClass('hide')
    };
    // 找到close按钮绑定
    $(".close")[0].onclick = function () {
        //添加cover和modal的hide样式类
        // $(".cover")[0].classList.add('hide');
        // $(".modal")[0].classList.add('hide');
        $(".cover,.modal").addClass('hide')

    }

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

基本筛选器

:first ->第一个

举例:找到id值为f1的标签内部的第一个input标签

$("#f1:first")

Object { 0: form#f1
, length: 1, prevObject: Object(1) }

:last ->最后一个
找到id值为my-checkbox的标签内部最后一个input标签

举例:

$("#my-checkbox:last")

Object { 0: div#my-checkbox.panel-body
, length: 1, prevObject: Object(1) }

:eq(index) -->索引等于index的那个元素

举例:

属性选择器

[arribute]
[attribute=value] //属性等于
[attribute!=value] //属性不等于

表单筛选器

练习题

找到本页面中id是i1的标签
找到本页面中所有的h2标签
找到本页面中所有的input标签
找到本页面所有样式类中有c1的标签
找到本页面所有样式类中有btn-default的标签
找到本页面所有样式类中有c1的标签和所有h2标签
找到本页面所有样式类中有c1的标签和id是p3的标签
找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签
找到本页面中form标签中的所有input标签
找到本页面中被包裹在label标签内的input标签
找到本页面中紧挨在label标签后面的input标签
找到本页面中id为p2的标签后面所有和它同级的li标签
找到id值为f1的标签内部的第一个input标签
找到id值为my-checkbox的标签内部最后一个input标签
找到id值为my-checkbox的标签内部没有被选中的那个input标签
找到所有含有input标签的label标签

实例

垂直菜单
/Users/chery/Documents/LearnPython/E_前端/day51/垂直菜单.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vertical menu with CSS</title>
    <link rel="stylesheet" href="fonts/css/font-awesome.css">
    <style type="text/css">
        body{
            padding: 0;
            margin: 0;
        }
        .menu ul{
            list-style-type: none;
            margin: 0;
            padding: 0;

        }
        .menu ul li{
            padding: 15px;
            position: relative;
            width: 150px;
            vertical-align: middle;
            background-color: #2C3A47;
            cursor: pointer;
            /*border-right: 5px solid gold;*/
            border-top:1px solid silver;
            /* 颜色延迟显示 */
            -webkit-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
        }
        .menu ul li:hover {
           background-color: #2ecc71;
        }
        .menu > ul >li {
            border-right: 5px solid gold;
        }
        .menu ul ul{
            transition: all 0.3s;
            opacity: 0;
            position: absolute;
            border-left: 5px solid gold;
            visibility: hidden;
            left: 100%;
            top:-2%;
        }
        .menu ul li:hover>ul {
            opacity: 1;
            visibility: visible;
        }
        .menu ul li a{
            color: #fff;
            text-decoration: none;
        }
        span {
            margin-right: 15px;
        }
        .menu> ul >li:nth-of-type(2)::after{
            content: '+';
            position: absolute;
            margin-left: 40%;
            float: right;
            color: #fff;
            font-size: 20px;
        }
    </style>

</head>
<body>
    <div class="menu">
        <ul>
            <li><a href=""><span class="fa fa-home"></span>主页</a></li>
            <li><a href=""><span class="fa fa-users"></span>用户</a>
                <ul>
                    <li><a href=""><span class="fa fa-plus" ></span>添加</a></li>
                    <li><a href=""><span class="fa fa-edit" ></span>编辑</a></li>
                    <li><a href=""><span class="fa fa-remove" ></span>删除</a></li>
                </ul>
            </li>
            <li><a href=""><span class="fa fa-desktop"></span>设计</a></li>
            <li><a href=""><span class="fa fa-database"></span>数据</a></li>
            <li><a href=""><span class="fa fa-info"></span>关于我</a></li>
        </ul>
    </div>

</body>
</html>

效果:

[x] 延迟显示
[x] 多级菜单

操作元素(属性,css,文档处理)

文本操作

/E_前端/day51/文本操作.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本操作</title>
</head>
<body>
<div id="d1">
    《前出师表》
    <p>
        臣本布衣，躬耕于南阳。苟全性命于乱世，不求闻达于诸侯。
        先帝不以臣卑鄙，位子望去，三顾晨宇草湖之中，自衬衣党史知识
    </p>
</div>

<label for="i1"></label><input type="text" id="i1">
<label>
    <input type="checkbox" name="hobby" value="basketball">
</label>篮球🏀
<label>
    <input type="checkbox" name="hobby" value="football">️
</label>足球⚽
<label>
    <input type="checkbox" name="hobby" value="doublecolorball">️
</label>双色球

<input type="checkbox">是否七天免登录
<script src="jquery.js"></script>
</body>
</html>

$('#d1').text(); //只能识别文本

    《前出师表》
    
        臣本布衣，躬耕于南阳。苟全性命于乱世，不求闻达于诸侯。
        先帝不以臣卑鄙，位子望去，三顾晨宇草湖之中，自衬衣党史知识

$('#d1').html(); //


    《前出师表》
    <p>
        臣本布衣，躬耕于南阳。苟全性命于乱世，不求闻达于诸侯。
        先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事
    </p>
"

属性操作

方法	描述
addClass()	向匹配的元素添加指定的类名。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
toggleClass()	从匹配的元素中添加或删除一个类。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
attr()	设置或返回匹配元素的属性和值。
attr(attrName)	返回第一个匹配元素的属性值
removeAttr()	从所有匹配的元素中移除指定的属性。
attr(attrName, attrValue)	为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})	为所有匹配元素设置多个属性值
~~removeAttr()~~	从每一个匹配的元素中删除一个属性
val()	设置或返回匹配元素的值。

演示html代码

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

<div id="d1" title="歧视计划" qs="歧视计划">div</div>

<label>
    <input type="checkbox" name="" checked="checked">
</label>
<script src="jquery.js"></script>
</body>
</html>

操作演示

$("#d1"); //获取id=d1
Object [div#d1]

$("#d1").attr('qs');
"歧视计划"

$("#d1").attr('id');
"d1"

$("#d1").attr('tittle');
undefined

$("#d1").attr('title');
"歧视计划"

$("#d1").attr('title','哈哈');
Object [ div#d1
]

$("#d1").attr('title');
"哈哈"

$("#d1").removeAttr('title');
Object [ div#d1
]

$("#d1").attr('title');
undefined

用于 checkbox 和 radio 布尔值

prop() // 获取属性
removeProp() // 移除属性

$("#i1").prop('checked')
true

如图

$("#i1").prop('checked',false)

Object [ input#i1
 ]

如图:

$("#i1").prop('checked',true)

Object [ input#i1
]

如图:

文档处理

css操作

事件

事件的概述

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

通常会把 jQuery 代码放到 <head>部分的事件处理方法中：

阻止事件的后续的发生

Footnote 1 link¹.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止后续事件的执行</title>
</head>
<body>
<form action="">
    <input type="text" name="name" id="i1">
    <input type="submit" value="提交" id="b1">
</form>
<script src="jquery.js"></script>
<script>
    $("#b1").on('click', function () {
        var value = $("#i1").val().trim();
        if (!value) {
            //阻止表单的提交
            // 阻止后面的事件执行
            return false;
        }
    })
</script>
</body>
</html>

截图

冒泡🐱

jQuery event.stopPropagation() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <p>
        <button id="b1">点我</button>
    </p>
</div>

<script src="jquery.js"></script>
<script>
    $('div').click(function () {
        alert('我是div标签')
    });
    $('p').click(function () {
        alert('我是一个p标签')
    });
    $('#b1').click(function (e) { // e 是形参
        alert("我就是那个按钮");
        e.stopPropagation(); //event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。
        // return false;   //也可以用这个方式
    });
    // 上面的按钮就是逐级冒泡触发的
</script>
</body>
</html>

结果显示

事件的委托

事件委托是通过事件冒泡的原理,利用父标签区捕获子标签的事件.

所谓的事件的委托,就是借助冒泡的性质,给其父级元素添加动作,然后等待未来事件触发(绑定事件),不然后续添加的按钮是不会再触发点击事件的.我说的是真的,不是假的.因为上面的绑定事件是先发现的,然后才是这个添加动作.所以这个不会被触发的.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
</head>
<body>
<div>
    <p id="p1">
        <button class="c1">点我</button>

    </p>
</div>
<script src="jquery.js"></script>
<script>
    $("#p1").on('click','.c1',function () {
        console.log(this);
        console.log('我是一个按钮呢')
    });

    // 在页面上添加一个.c1样式类的按钮
    $('#p1').append('<button class="c1">点我2</button>')
    //所谓的事件的委托,就是借助冒泡的性质,给其父级元素添加动作,然后等待未来事件触发(绑定事件)
    //不然 后续添加的按钮是不会再触发点击事件的.我说的是真的,不是假的.因为上面的绑定事件是先发现的
    //然后才是这个添加动作.所以这个不会被触发的.
</script>
</body>
</html>

结果

按键反馈

事件代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery.js"></script>
<script>
    $(window).keydown(function (e) {
        if (e.keyCode === 16){
            console.log("SHiFT被按下了")
        }

    });
</script>
</body>
</html>

结果显示:

再次

JQuery总结论

由于JQuery是为处理HTML事件而特别设计的,那么应该这样操作才能便于维护:

把所有JQuery代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把JQuery代码置于单独的.js中
如果存在名称冲突,则重命名JQuery库

JQuery:hover方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            height: 20px;
            width: 100%; /* 如果宽度不够 列表就无法显示成一行,display 是没有用的 */
            background-color: #3d3d3d;
            position: fixed;
            top: 0;
        }

        .nav ul {
            list-style-type: none;
            line-height: 20px;
        }

        .nav li {
            float: left;
            padding: 0 10px;
            color: #9999;
            position: relative;
            display: block;
            /*height: 40px;*/

            /*display: inline;*/
        }

        .nav li:hover {
            background-color: #7EC0EE;
            color: white;
        }

        .clearfix:after {
            content: "";
            /*display: block;*/
            clear: both;
        }

        .son {
            position: absolute;
            top: 40px;
            right: 0;
            height: 50px;
            width: 100px;
            background-color: #00a9ff;
            display: none;
        }

        .hover .son {
            display: block;
        }


    </style>
</head>
<body>
<div class="nav">
    <ul class="clearfix">
        <li>登陆</li>
        <li>注册</li>
        <li>购物车
            <p class="son hide">空空如也</p>
        </li>
    </ul>
</div>
<script src="jquery.js"></script>
<script>
    $(".nav li").hover(
        function () {
            $(this).addClass("hover");
        },
        function () {
            $(this).removeClass("hover");
        }
    );

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

演示效果

window.onload 和 JQuery.reary

window.onload()函数有覆盖现象,必须等待着图片等==所有资源加载完成之后==才能调用.
JQuery的这个入口函数没有函数覆盖现象,文档加载完成之后就可以调用(建议使用此函数)

jQuery 事件方法

下面是 jQuery 中事件方法的一些例子：

Event函数	绑定函数至
&dollar;(document).ready(function)当然也可以简写$(function(){绑定事件的操作...})	将函数绑定到文档的就绪事件(当文档完成加载时)
&dollar;(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dbclick(function)	触发或将函数绑定到被选中元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

模拟输入动态显示:
xyh.js

$(document).ready(function () {
    // input框失去焦点才触发
    $("#i1").on('blur', function () {
        var value = $(this).val();
        console.log(value);
    });
    //input框只要值发生变化就触发
    $('#i1').on('input', function () {
        var value = $(this).val();
        console.log(value);
    })
});

ws.js

$(document).ready(function () {
    alert(123);
});

input.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input事件</title>

    <script src="jquery.js"></script>
    <script src="xyh.js"></script>
    <script src="ws.js"></script>
    <!--<script>-->
        <!--window.onload = function () {-->
            <!--// input框失去焦点才触发-->
            <!--$("#i1").on('blur', function () {-->
                <!--var vablue = $(this).val();-->
                <!--console.log(vablue);-->
            <!--});-->
            <!--$("#i1").on("input", function () {-->
                <!--var value = $(this).val();-->
                <!--console.log(value);-->
            <!--})-->
        <!--}-->
    <!--</script>-->
</head>
<body>
<input type="text" id="i1">
</body>
</html>

文档就绪函数
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小

效果-动画

基本参考:
jQuery 参考手册 - 效果
jQuery 效果函数

方法	描述
animate()	对被选元素应用“自定义”的动画
clearQueue()	对被选元素移除所有排队的函数（仍未运行的)
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()	运行被选元素的下一个排队函数
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
hide()	隐藏被选的元素
queue()	显示被选元素的排队函数
show()	显示被选的元素
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	对被选元素进行滑动隐藏和滑动显示的切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止在被选元素上运行动画
toggle()	对被选元素进行隐藏和显示的切换

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

举例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1 {
            height: 400px;
            width: 600px;
        }
    </style>
</head>
<body>
<div id="d1">
    <img  id="i1" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539932278336&di=c64dcea4c09666e637cdcabf20c00d70&imgtype=0&src=http%3A%2F%2Fpic.eastlady.cn%2Fuploads%2Ftp%2F201705%2F19%2F28st.jpg" alt="">
</div>
<script src="jquery.js"></script>
</body>
</html>

简单演示

$("#i1").show(1000); //1秒之内显示

Object [ img#i1 ]

$("#i1").hide(1000); //1秒之内隐藏

Object [ img#i1 ]

$("#i1").toggle(1000); //1秒切换状态

Object [ img#i1 ]

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
动画方法

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

扩展方法(插件机制)

实践小作业

任务状态
[x] 使用了bootstrap
[x] 实现了新增
[x] 实现了编辑
[ ] 不知道

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
    <!--css样式开始-->
    <style>
        /*.hide {*/
            /*display: none;*/
        /*}*/
    </style>
</head>
<body>

<table class="table table-bordered table-hover" > <!-- 表一个 一个表头 三行内容 四行内容-->
    <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="edit btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-sm">编辑</button>
            <button class="fire btn btn-danger">开除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>景女神</td>
        <td>茶道</td>
        <td>
            <button class="edit btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-sm">编辑</button>
            <button class="fire btn btn-danger">开除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>苑昊</td>
        <td>翻车 不怂</td>
        <td>
            <button class="edit btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-sm">编辑</button>
            <button class="fire btn btn-danger" data-dismiss="alert" aria-label="Close">开除
            </button>
        </td>
    </tr>
    </tbody>
</table>
<!-- Large modal -->
<button type="button"  id="add" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">新增</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content" style="text-align: center">
            <p>操作页面(点灰色背景即退出,默认记住输入)</p>
            <div >
                <label>姓名：
                    <input type="text" id="name">
                </label>
            </div>
            <div>
                <label>爱好：
                    <input type="text" id="hobby">
                </label>
            </div>
            <button id="cancel" class="btn  btn-default" type="button">重置</button>
            <button id="submit" class="btn btn-default" type="button">提交</button>
        </div>
    </div>
</div>
<!--<button id="add" class="btn btn-default">新增</button>-->
<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<!--基本Jquery操作 开始-->
<script>
    function hideModal () {
        $('#name,#hobby').val("");
        // $('.modal,.cover').addClass('hide')  //由于bootstrap不需要手动隐藏,所以不需要这个了
    }
// 点击modal中的cancel按钮
    $("#cancel").click(function () {
        hideModal()
    });

    //点击开除按钮
    $("table").on('click','.fire',function () {
        $(this).parent().parent().remove();
    });
    // 点击提交按钮的功能

    // 获取用户输入值
    // var name = $("#name").val();
    // var hobby = $("#hobby").val();
    $('#submit').on('click',(function () {
        var name = $("#name").val();
        var hobby = $("#hobby").val();
        // 判断是添加操作还是编辑操作
        var $editTr = $(this).data('xyh');
        if ( $editTr=== undefined) {
            // 创建一个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>\n' +
                '            <button class="edit btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-sm">编辑</button>\n' +
                '            <button class="fire btn btn-danger" data-dismiss="alert" aria-label="Close">开除\n' +
                '            </button>\n' +
                '        </td>');
            // 把上一步的tr追加到表格的tbody后面
            $('tbody').append(trEle);

        } else {
            $editTr.children().eq(1).text(name);
            $editTr.children().eq(2).text(hobby);

            $('#submit').removeData('yxh');

        }
            hideModal();
    }));
    //点击编辑按钮要做的事情
        $('body').on('click','.edit',function () {
            // $('.modal,.cover').show();
            var $currentTr = $(this).parent().parent();
            var nameValue = $currentTr.children().eq(1).text();
            var hobbyValue = $currentTr.children().eq(2).text();
            // 把上一步获取的值设置给input标签
            $('#name').val(nameValue);
            $('#hobby').val(hobbyValue);
            // 给模态框中的提交男裤绑定一个data
            $('#submit').data('xyh', $currentTr);

        })


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

演示部分
主体页面

新增页面

编辑页面

Footnote can have markup ↩

JQuery 测试内容(不保证内容完整性)

JQuery 基础

tags: 前端 JQuery 基础

一 什么是JQery

二 为什么使用JQery

三 怎么下载使用

版本选择

版本下载

安装两种方式

基础知识

基本语法

查找标签

基本选择器

id选择器

标签选择器

class选择器

配合使用

层级选择器

基本筛选器

属性选择器

表单筛选器

练习题

操作元素(属性,css,文档处理)

文本操作

属性操作

文档处理

css操作

事件

事件的概述

阻止事件的后续的发生

冒泡🐱

事件的委托

按键反馈

JQuery总结论

JQuery:hover方法

window.onload 和 JQuery.reary

jQuery 事件方法

效果-动画

扩展方法(插件机制)

实践小作业

lemonblue

引用和评论

2025年最新反编译微信小程序的教程及工具

手写一个动态海洋和天空效果的vue hooks

你可能不知道的图片加载相关知识

原生JS大揭秘—JS代码执行原理解刨

原生electron起步-从零到一完成构建和打包

LRU算法，你别跑，我就要吃透你

亚像素渲染：浏览器如何处理小数像素的渲染？

tags: `前端` `JQuery` `基础`

一什么是JQery

二为什么使用JQery

三怎么下载使用