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， 例如:
阿里
腾讯
百度
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("Hello world!");
});
$("#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 world! (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="文本。
"; // 使用 HTML 标签创建文本
var txt2=$("").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="I "; // 使用 HTML 创建元素
var txt2=$("").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="ID NAME SEX SAL 操作 "+item.id+" "+item.name+" "+item.sex+" "+item.sal+"