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

时间 2019-11-08

标签 jquery 测试内容保证完整性栏目 JQuery 繁體版

原文原文链接

JQuery 基础

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

一什么是JQery

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

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

二为何使用JQery

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

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

<5>jQuery还有一个比较大的优点是，它的文档说明很全，并且各类应用也说得很详细，同时还有许多成熟的插件可供选择。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 --->开发使用web

安装两种方式

pass编程

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

基础知识

基本语法

jquery的基础语法：bootstrap

$(selector).action()

查找标签

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

基本选择器

$("#id的值")

id选择器

$("#id的值")

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

$("#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 事件方法

效果-动画

扩展方法(插件机制)

实践小做业

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

一什么是JQery

二为何使用JQery

三怎么下载使用