Java零基础教学文档第五篇：jQuery

今日新篇章
【jQuery】
【主要内容】

jQuery简介
jQuery安装
jQuery语法
jQuery选择器
jQuery事件处理
jQueryDOM操作
jQuery元素遍历
jQuery过滤
jQuery其它方法

【学习目标】
在这里插入图片描述

1.jQuery简介

1.1 jQuery简介
jQuery 库可以通过一行简单的标记被添加到网页中。

1.2 需要具备的基础知识
在开始学习 jQuery 之前，应该对以下知识有基本的了解：

HTML

CSS

JavaScript

1.3 什么是 jQuery
jQuery是一个JavaScript函数库。安全性、效率性、简洁性

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

Ø HTML 元素选取

Ø HTML 元素操作

Ø CSS 操作

Ø HTML 事件函数

Ø JavaScript 特效和动画

Ø HTML DOM 遍历和修改

Ø AJAX

提示：除此之外，jQuery还提供了大量的插件。

1.4 为什么使用 jQuery
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行基于dom操作的 JS 框架，而且提供了大量的扩展。

很多大公司都在使用 jQuery，例如:

Google

阿里

腾讯

百度

Microsoft

IBM

Netflix

2.jQuery安装

2.1 官网
https://jquery.com/
在这里插入图片描述

2.2 下载

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。

Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从www.jquery.com中下载。
在这里插入图片描述

https://jquery.com/download/
在这里插入图片描述

https://code.jquery.com/jquery-3.5.1.min.js

在本在创建一个jquery-3.5.1.min.js的文件

复制网页里面的代码到这个文件里就OK了

或者直接上github上面下载

https://github.com/jquery/jquery/tags
在这里插入图片描述

3.jQuery 简单语法

3.1 JQuery作用**
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

3.2 jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

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

美元符号定义 jQuery

选择符（selector）“查询"和"查找” HTML 元素

jQuery 的 action() 执行对元素的操作

实例:

<script>

    $(this).hide() - 隐藏当前元素

    $("p").hide() - 隐藏所有 <p> 元素

    $("p.test").hide() - 隐藏所有 的 <p> 元素

    $("#test").hide() - 隐藏所有 id="test" 的元素

</script>

3.3 文档就绪事件

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

如果在文档没有完全加载之前就运行函数，操作可能失败。

3.3.1 方法一

<script>

    $(document).ready(function(){

        // 开始写 jQuery 代码...

    });

</script>

3.3.2 方法二

<script>

    $(function(){

        // 开始写 jQuery 代码...

    });

</script>

4.jQuery 选择器

4.1 什么是jQuery 选择器**
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

4.2 相关重点选择器【重点掌握】
4.2.1 元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 p 元素:

$(“p”)/jQuery(“p”)

实例

用户点击按钮后，所有 p 元素都隐藏：

实例

<script>

    $(function(){

        $("button").click(function(){

            $("p").hide();

        });

    });

</script>

4.2.2 #id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

$(“#test”)

实例

当用户点击按钮后，有 id=“test” 属性的元素将被隐藏：

实例

<body>

<div id="test"></div>

</body>

<script>

    $(function(){

        $("button").click(function(){

            $("#test").hide();

        });

    });

</script>

4.2.3 .class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(“.test”)

实例

用户点击按钮后所有带有属性的元素都隐藏：

实例

<body>

<div></div>

</body>

<script>

    $(function(){

        $("button").click(function(){

            $(".test").hide();

        });

    });

</script>

4.3 其它选择器【熟悉】

$(“*”)选取所有元素

$(this) 选取当前的html元素

$(“p.intro”) 选择class为intro的p元素

$(“p:first”) 选取第一个p元素

$(“p:last”) 选取最后一个p元素

$(“[href]”) 选取带有href属性的元素

$(“[href=]”) 选取带有href并属性值等于某个值的元素

$(“a[target=’_blank’]”) 选取a标签中有target属性并且属性值为_blank的元素

$(“:button”) 选取页面所有的button

$(“:checked”) 选取页面所有的被选中

$(“tr:even”) 选取偶数位的tr

$(“tr:odd”)选取奇数位的tr

$(“:selected”)选取select中被选中的元素

5.jQuery 事件

5.1 什么是事件？**
页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

5.1.1 实例：

在元素上移动鼠标。

选取单选按钮

点击元素

在事件中经常使用术语"触发"（或"激发"）例如： “当您按下按键时触发 keypress 事件”。

5.1.2 常见 DOM 事件：

5.2 简单用法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$(“p”).click();

下一步是定义什么时间触发事件。可以通过一个事件函数实现：

$(“p”).click(function(){

// 动作触发后执行的代码!!

});

5.3 常用的 jQuery 事件方法
要想使用事件是必须使用文档就绪的方法的

$()

$() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 简单语法中已经提到过。

5.3.1 单击事件

事件描述

             click                                     鼠标点击某个对象

实例：给文档中的 id=“box” 元素添加点击事件。

<script>

    $(function () {

        $("#box").click(function () {

            alert("单击事件");

        })

    })

</script>

在jQuery的事件中，我们也可以主动的响应对应的事件。

$(“#box”).click();

5.3.2 双击事件

事件描述

            dblclick                  鼠标双击某个对象

实例：给文档中的 id=“btn” 元素添加点击事件。

<script>

    $(function () {

        $("#box").dblclick(function () {

            console.log("双击事件");

        });

    })

</script>

5.3.3 焦点事件

事件描述

 focus                       元素获得焦点时触发

 blur                       元素失去焦点时触发

实例：给文档中的input元素添加点击事件。

<script>

    $(function () {

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

            console.log("获得焦点");

        });

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

            console.log("失去焦点");

        });

    })

</script>

5.3.4 改变事件

       事件                                  描述

change 域的内容被改变触发，用于input、select和textarea标签。

当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 input 或 textarea 时，该事件会在元素失去焦点时发生。

实例：给文档中的select和input元素添加改变事件。

<body>

故乡：<select name="city" id="city">

    <option value="1">北京</option>

    <option value="2">上海</option>

    <option value="3">广州</option>

    <option value="4">武汉</option>

</select>

密码：<input type="password" placeholder="请输入密码">

<script>

    $("select").change(function () {

        console.log("选中的城市：" + $(this).val());

    });

    $("input").change(function () {

        console.log("输入的内容：" + $(this).val());

    });

</script>

</body>

5.3.5 鼠标事件

当鼠标指针穿过元素时，会发生 onmouseenter 事件。该事件大多数时候会与 onmouseleave 事件一起使用。onmouseover 事件和 onmouseout 事件一起使用。

与 onmouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 onmouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 onmouseover 事件。

实例：给文档中的id="box"元素添加鼠标事件。

<script>

    $(function () {

        $("#box").mouseenter(function () {

            console.log("鼠标进入");

        });

        $("#box").mouseleave(function () {

            console.log("鼠标离开")

        });

        $("#box").mousedown(function () {

            console.log("鼠标按下");

        });

        $("#box").mouseup(function () {

            console.log("鼠标抬起");

        });

        $("#box").mousemove(function () {

            console.log("鼠标移动");

        });

    })

</script>

5.3.6 hover事件

语法: hover([fnOver,] fnOut)

                          参数                                       描述

fnOver 鼠标移到元素上要触发的函数。

fnOut 鼠标移出元素要触发的函数。

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。

当鼠标移动到一个匹配的元素上面时(mouseenter)，会触发指定的第一个函数。当鼠标移出这个元素时(mouseleave)，会触发指定的第二个函数。

<script>

    $(function () {

        $("#box").hover(function () {

            console.log("鼠标进入");

        }, function () {

            console.log("鼠标离开");

        });

    })

</script>

5.4 event事件对象
5.4.1 event属性
在这里插入图片描述

5.4.2 event方法

方法描述事件

stopPropagation() 阻止事件冒泡。任意事件

preventDefault() 阻止事件的默认动作。任意事件

事件冒泡：是因为事件会按照DOM的层次结构像水泡一样不多向上直至顶端。

实例：阻止文档中class=“child” 的元素事件派发。

<body>

<div>

    <div>点击我</div>

</div>

<script>

    $(".child").on("click", function (event) {

        console.log("子元素响应事件");

        event.stopPropagation();

    });

    $(".parent").on("click", function (event) {

        console.log("父元素响应事件");

    });

</script>

</body>
 

 

实例：阻止文档中 元素的默认行为。

<body>

<a href="https://www.baidu.com">百度一下,你就知道</a>

<script>

    $(".link").on("click", function (event) {

        // 阻止事件的默认动作。

        event.preventDefault();

    })

</script>

</body>

6.jQuery DOM操作【重中之中】

6.1 jQuery 捕获**
jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

DOM = Document Object Model（文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。

6.1.1 获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<p id="test">这是段落中的 <b>粗体</b> 文本。</p>

<button id="btn1">显示文本</button>

<button id="btn2">显示 HTML</button>

</body>

<script>

    $(function(){

        $("#btn1").click(function(){

            alert("Text: " + $("#test").text());

        });

        $("#btn2").click(function(){

            alert("HTML: " + $("#test").html());

        });

    });

</script>

</html>
下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<p>名称: <input type="text" id="test" value="jQuery教程"></p>

<button>显示值</button>

</body>

<script>

    $(function(){

        $("button").click(function(){

            alert("值为: " + $("#test").val());

        });

    });

</script>

</html>

6.1.2 获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

实例

<script>

    $(function(){

        $("button").click(function(){

            alert($("#powernode").attr("href"));

        });

    });

</script>

</head>

<body>

<p><a href="http://www.runoob.com" id="powernode">jQuery教程</a></p>

<button>显示 href 属性的值</button>

</body>

</html>

6.1.3 获取属性 - prop()

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

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

注意：在select和radio和checkbox中我们取selected checked属性应使用prop

6.2 jQuery 设置
6.2.1 设置内容 - text()、html() 以及 val()【重点】

我们将使用前一章中的三个相同的方法来设置内容：

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

实例

$("#btn1").click(function(){

    $("#test1").text("Hello world!");

});

$("#btn2").click(function(){

    $("#test2").html("<b>Hello world!</b>");

});

$("#btn3").click(function(){

    $("#test3").val("powernode");

});

6.2.2 text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html()：

$("#btn1").click(function(){

    $("#test1").text(function(i,origText){

        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";

    });

});

$("#btn2").click(function(){

    $("#test2").html(function(i,origText){

        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";

    });

});

【注意】：html(function(index, html)) index为元素在集合中的索引位置，html为原先的HTML值

6.2.3 设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：

$(“button”).click(function(){

$("#powernode").attr("href","http://www.whpowernode.com");

});

attr() 方法也允许您同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性：

实例

$("button").click(function(){

    $("#powernode").attr({

        "href" : "http://www.whpowernode.com",

        "title" : "武汉动力节点"

    });

});

6.2.4 attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 attr() 方法：

$("button").click(function(){

    $("#powernode").attr("href", function(i,origValue){

        return origValue + "/java";

    });

});

6.2.5 设置属性 - prop()

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

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

注意：在select和radio和checkbox中我们取selected checked属性应使用prop

6.3 jQuery 添加元素
添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的内部结尾插入内容

prepend() - 在被选元素的内部开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

6.3.1 jQuery append() 方法

jQuery append() 方法在被选元素的内部结尾插入内容。

实例

$(“p”).append(“追加文本”);

6.3.2 jQuery prepend() 方法

jQuery prepend() 方法在被选元素的内部开头插入内容。

实例$(“p”).prepend(“在开头追加文本”);

通过 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

实例

function appendText()

{

    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本

    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本

    var txt3=document.createElement("p");

    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM

    $("body").append(txt1,txt2,txt3);        // 追加新元素

}

6.3.3 jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

实例

$(“img”).after(“在后面添加文本”);

$(“img”).before(“在前面添加文本”);

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

function afterText()

{

    var txt1="<b>I </b>";                    // 使用 HTML 创建元素

    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素

    var txt3=document.createElement("big");  // 使用 DOM 创建元素

    txt3.innerHTML="jQuery!";

    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本

}

6.4 jQuery 删除元素
通过 jQuery，可以很容易地删除已有的 HTML 元素。

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

6.4.1 jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素。

实例 $(“#div1”).remove();

6.4.2 jQuery empty() 方法

jQuery empty() 方法删除被选元素的子元素。

实例 $(“#div1”).empty();

3，过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除的所有

元素：

实例

$(“p”).remove(“.italic”);

6.5 jQuery CSS 类
jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

实例样式表

下面的样式表将用于本页的所有例子：

.important

{

      font-weight:bold;

      font-size:xx-large;

}

.blue

{

      color:blue;

}

6.5.1 jQuery addClass() 方法

下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：

实例

$("button").click(function(){

    $("h1,h2,p").addClass("blue");

    $("div").addClass("important");

});

也可以在 addClass() 方法中规定多个类：实例

$("button").click(function(){

    $("#div1").addClass("important blue");

});

6.5.2 jQuery removeClass() 方法

下面的例子演示如何在不同的元素中删除指定的 class 属性：

$("button").click(function(){

    $("h1,h2,p").removeClass("blue");

});

6.5.3 jQuery toggleClass() 方法

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：

$("button").click(function(){

    $("h1,h2,p").toggleClass("blue");

});

6.6 jQuery css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

6.6.1 返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：

css(“propertyname”);

下面的例子将返回首个匹配元素的 background-color 值：

实例

$(“p”).css(“background-color”);

6.6.2 设置 CSS 属性

如需设置指定的 CSS 属性，请使用如下语法：

css(“propertyname”,“value”);

下面的例子将为所有匹配元素设置 background-color 值：

实例

$(“p”).css(“background-color”,“yellow”);

6.6.3 设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

css({“propertyname”:“value”,“propertyname”:“value”,…});

下面的例子将为所有匹配元素设置 background-color 和 font-size：

实例

$(“p”).css({“background-color”:“yellow”,“font-size”:“200%”});

7.jQuery和DOM对象互转【重点】

7.1 jQuery对象转成DOM对象**
两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：var $v =$ (“#v”) ; //jQuery对象

var v=$v[0]; //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：var $v =$ (“#v”); //jQuery对象

var v=$v.get(0); //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

7.2 DOM对象转成jQuery对象
对于已经是一个DOM对象，只需要用 $() 把 D OM 对象包装起来，就可以获得一个 j Q u ery 对象了。$ (DOM对象)

如：var v=document.getElementById(“v”); //DOM对象

var $v =$ (v); //jQuery对象

转换后，就可以任意使用jQuery的方法了。

通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。

8.【掌握】表单处理

8.1 解决表单提交的冒泡问题**

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery.min.js" charset="UTF-8"></script>



</head>

<body>

<h1>添加用户</h1>

<form action="#" method="get" id="frm">

    ID:<input type="text" id="id" name="id"><br>

    NAME:<input type="text" id="name" name="name"><br>

    gender:<input type="text" id="gender" name="gender"><br>

    SAL:<input type="text" id="sal" name="sal"><br>

    <input type="button" id="doSubmit" value="提交">

    <input type="button" id="doReset" value="重置">

</form>

</body>





<script>

    $(function () {

        $("#doSubmit").on("click", function () {

           console.log("doSubmit的点击事件被触发")

            // $("#frm").submit();



        })

        $("#doReset").on("click", function () {

            //通过js去重置  在jquery里面的表单对象没有reset()方法  原生的js里面的reset()方法

            $("#frm")[0].reset();

        })



    });

</script>



</html>

8.2 serializeArray()与serialize()的区别
serializeArray()返回一个JSON数组，里面是表单属性的name的属性值和value

serialize()返回的是一个查询参数id=1&name=2&gender=3&sal=4

9.掌握】jQuery each()方法

9.1 语法**
$(selector).each(function(index,element))
在这里插入图片描述

9.2 案例
在这里插入图片描述

<input type="checkbox" name="music" value="1" />爱你一万年<br />

<input type="checkbox" name="music" value="2" />忘情水<br />

<input type="checkbox" name="music" value="3" />天意<br />

<input type="checkbox" name="music" value="4" />冰雨<br />

<input type="checkbox" name="music" value="5" />成都<br />

<input type="checkbox" name="music" value="6" />武汉<br />

<input type="checkbox" name="music" value="7" />北京北京<br />

<input type="checkbox" name="music" value="8" />海阔天空<br />

<input type="checkbox" name="music" value="9" />真的爱你<br />

<input type="checkbox" name="music" value="10" />光辉岁月<br />

<input type="checkbox" name="music" value="11" />红日<br />

<input type="checkbox" name="music" value="12" />小苹果<br />

9.3 循环JSON数组生成无刷新的table并能删除和添加
在这里插入图片描述

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>01表单处理.html</title>

    <!--引入jquery-->

    <script src="../js/jquery-3.6.0.js" charset="UTF-8"></script>



</head>

<body>

<h1>添加用户</h1>

<form id="userAddFrm" action="#" method="get">

    ID:<input type="text" name="id">

    NAME:<input type="text" name="name">

    SEX:<input type="radio" name="sex" checked value="男">男 <input type="radio" value="女" name="sex">女

    SAL:<input type="text" name="sal">

    <input type="button" id="doSubmit" value="添加">

    <input type="reset" value="重置">

</form>

<hr>

<h1>用户列表</h1>

<table id="userTable" width="100%" border="1" cellspacing="3" cellpadding="3" style="border: 1px solid green">



</table>

</body>

<script>

    //声明一个json数组的容器

    let users=[{"id":1,"name":"小明","sex":"男","sal":5998.00}

    ,{"id":2,"name":"小红","sex":"女","sal":1998.00}

    ,{"id":3,"name":"小丽","sex":"女","sal":2998.00}

    ,{"id":4,"name":"小芳","sex":"女","sal":3998.00}]



    //数据初始化的方法

    function  initTableData(){

        let userTable=$("#userTable");

        let html="<tr><th>ID</th><th>NAME</th><th>SEX</th><th>SAL</th><th>操作</th></tr>"

        $.each(users,function (index,item){

            html+="<tr><th>"+item.id+"</th><th>"+item.name+"</th><th>"+item.sex+"</th><th>"+item.sal+"</th><th><input type='button' οnclick='del("+item.id+")' value='删除'></th></tr>"

        })

        userTable.html(html)

    }

    initTableData();



    //监听添加按钮的事件

    $("#doSubmit").click(function (){

        let userAddFrm=$("#userAddFrm");

        let arrays=userAddFrm.serializeArray()

        let jsonObj={};

        $.each(arrays,function (index,item){

            jsonObj[item.name]=item.value;

        })

        //把组装好的json对象放到users数组里面

        users.push(jsonObj);

        //刷新表格

        initTableData()

    })

    function del(id){

        //循环users找到id=传入id这个对象，再删除

        $.each(users,function (index,item){

            if(item.id==parseInt(id)){

                //删除

                users.splice(index, 1);

                //刷新表格

                initTableData()

                return;

            }

        })

    }



</script>