今日新篇章
【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, 例如:
阿里
腾讯
百度
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 = v=(“#v”) ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
如:var v = v= v=(“#v”); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
7.2 DOM对象转成jQuery对象
对于已经是一个DOM对象,只需要用
(
)
把
D
O
M
对象包装起来,就可以获得一个
j
Q
u
e
r
y
对象了。
()把DOM对象包装起来,就可以获得一个jQuery对象了。
()把DOM对象包装起来,就可以获得一个jQuery对象了。(DOM对象)
如:var v=document.getElementById(“v”); //DOM对象
var v = v= 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>