当前位置：首页 > news >正文

jQuery(二)

news 2026/2/9 6:27:02

文章目录

- 1.jQuery操作节点
- - - 1.查找节点，修改属性
    - - 1.基本介绍
      - 2.切换图片案例
    - 2.创建节点
    - - 1.基本介绍
      - 2.内部插入
      - 3.外部插入
      - 4.小结
      - 1.插入方法说明
        2.两种插入方法的区别
      - 5.插入元素实例
      - 6.移动元素实例
    - 3.删除节点
    - - 1.基本介绍
      - 2.代码实例
    - 4.复制节点
    - - 1.基本介绍
      - 2.代码实例
    - 5.替换节点
    - - 1.基本介绍
      - 2.代码实例
- 2.属性操作
- 3.`.class`样式操作
- - - 1.基本介绍
    - 2.代码实例
- 4.获取HTML文本和值
- - - 1.基本介绍
    - 2.案例
- 5.常用遍历节点方法
- - - 1.基本介绍
    - 2. 代码实例
- 6.CSS-DOM操作
- - - 1.基本介绍
    - 2.代码实例
- 7.多选框应用案例
- - - 1.题目
    - 2.代码
- 8.页面加载完毕触发方式
- 9.作业
- - - 1.作业一
    - 2.作业二
    - 3.作业三（处理布尔属性使用prop）
    - 4.作业四
    - - 1.添加
      - 2.删除

1.jQuery操作节点

1.查找节点，修改属性

1.基本介绍

2.切换图片案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>操作节点的属性</title><script type="text/javascript" src="./jquery/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function () {//为按钮绑定事件$("button").click(function () {//修改图片属性$("img").attr("src", "./image/1.png")})});</script>
</head>
<body>
<img src="./image/2.png" height="300"/>
<br/>
<button>点击切换图片</button>
</body>
</html>

2.创建节点

1.基本介绍

2.内部插入

3.外部插入

4.小结

1.插入方法说明

**A.append(B)：**A内部的最后添加B
**A.prepend(B)：**A内部的最前面添加B
**A.after(B)：**A的后面添加B
**A.before(B)：**A的前面添加B

2.两种插入方法的区别

在直接可以找到子元素的情况下，内部插入和外部插入的作用是相同的，建议使用外部插入
如果只能找到父元素，插入子元素只能使用内部插入法

5.插入元素实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>创建节点-应用实例</title><style type="text/css">div, span {width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float: left;font-size: 17px;font-family: Roman;}div.mini {width: 30px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family: Roman;}</style><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function () {//添加重庆li到上海下(使用dom的传统方法)$("#b1").click(function () {//创建重庆livar cq_li = document.createElement("li");//添加内容cq_li.setAttribute("id", "cq")cq_li.setAttribute("name", "chongqing")cq_li.innerText = "重庆";//拿到上海var elementById = document.getElementById("sh");//上海的下面添加节点elementById.append(cq_li);})//*****添加重庆li到 上海下-jquery完成添加节点$("#b2").click(function () {//创建重庆节点var $li = $("<li id=\"cq\" name=\"chongqing\">重庆</li>");//添加节点//内部插入// $("ul li[id='sh']").append($li);//外部插入$("ul li[id='sh']").after($li);})//*** 添加成都li到 北京前$("#b3").click(function () {//设置成都livar $cd = $("<li id=\"cd\" name=\"chengdu\">成都</li>");$("#bj").before($cd)})//*** 添加成都li到 北京和上海之间$("#b4").click(function () {//设置成都livar $cd = $("<li id=\"cd\" name=\"chengdu\">成都</li>");$("#bj").after($cd)})//*** 添加成都li到 吉林前面$("#b5").click(function () {//设置成都livar $cd = $("<li id=\"cd\" name=\"chengdu\">成都</li>");$("#jl").before($cd)})})</script>
</head>
<body>
<ul id="city"><li id="bj" name="beijing">北京</li><li id="sh" name="shanghai">上海</li><li id="jl" name="jilin">吉林</li><li id="my" name="mianyang">绵阳</li>
</ul><input type="button" id="b1" value="添加重庆li到 上海下(使用dom的传统方法)"/><br/><br/>
<input type="button" id="b2" value="添加重庆li到 上海下"/><br/><br/>
<input type="button" id="b3" value="添加成都li到 北京前"/><br/><br/>
<input type="button" id="b4" value="添加成都li到 北京和上海之间"/><br/><br/>
<input type="button" id="b5" value="添加成都li到 吉林前面"/><br/></body>
</html>

6.移动元素实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>移动节点</title><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function () {//****使用外部插入法 把反恐li移动天津后$("#b1").click(function () {//直接找到天津并插入$("#tj").after($("#fk"));})//****使用内部插入法 把反恐li移动天津后$("#b2").click(function () {//找到city这个父元素，将反恐添加到内部的最后$("#city").append($("#fk"))})})</script>
</head>
<body>
您喜欢的城市:<br>
<ul id="city"><li id="bj" name="beijing">北京</li><li id="sh" name="shanghai">上海</li><li id="tj" name="tianjin">天津</li>
</ul>您爱好的游戏:<br>
<ul id="game"><li id="fk" name="fakong">反恐</li><li id="cq" name="chuangqi">传奇</li>
</ul>
<input type="button" id="b1" value="使用after插入法 把反恐li移动天津后"/><br/><br/>
<input type="button" id="b2" value="使用append插入法 把反恐li移动天津后"/><br/><br/>
</body>
</html>

3.删除节点

1.基本介绍

2.代码实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>删除节点-应用实例</title><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function () {//*****删除所有p$("#b1").click(function () {$("p").remove();})//***所有p清空$("#b2").click(function () {$("p").empty();})//****删除上海这个li$("#b3").click(function (){$("#sh").remove();})});</script>
</head>
<body>
您喜欢的城市:<br>
<ul id="city"><li id="bj" name="beijing">北京</li><li id="sh" name="shanghai">上海</li><li id="tj" name="tianjin">天津</li>
</ul>您爱好的游戏:<br>
<ul id="game"><li id="fk" name="fakong">反恐</li><li id="cq" name="chuangqi">传奇</li>
</ul><p>Hello</p> how are <p>you?</p><p name="test">Hello, <span>Person</span> <a href="#">and person</a></p><input type="button" value="删除所有p" id="b1"/>
<input type="button" value="所有p清空" id="b2"/>
<input type="button" value="删除上海这个li" id="b3"/>
</body>
</html>

4.复制节点

1.基本介绍

2.代码实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>复制节点-应用实例</title><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script>$(function () {//点击p, 弹出文本信息$("p").click(function () {//隐式的传入this->p的dom对象alert("段落的内容= " + $(this).text())})//克隆p, 插入到按钮后面//1. $("p").clone() 表示克隆p元素，但是没有复制事件//2. $("p").clone(true) 表示克隆p元素，同时复制事件$("p").clone(true).insertAfter($("button"))})</script>
</head>
<body>
<button>保存</button>
<br><br><br><br><br>
///<br>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</body>
</html>

5.替换节点

1.基本介绍

2.代码实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>替换节点-应用实例</title><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function () {$("#1").click(function () {//将p使用超链接替换$("p").replaceWith("<a href=\"www.baidu.com\">点击跳转到百度</a><br>")})$("#2").click(function () {//将p使用dom对象替换var $button = $("<button>dom对象按钮</button><br>");$("p").replaceWith($button)})});</script>
</head>
<body>
<h1>节点替换</h1>
<p>Hello</p>
<p>jquery</p>
<p>World</p>
<button id="1">点击使用超链接替换</button>
<button id="2">点击使用dom对象替换</button>
</body>
</html>

2.属性操作

3.`.class`样式操作

1.基本介绍

2.代码实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>查找节点</title><style type="text/css">div {width: 140px;height: 140px;margin: 20px;float: left;border: #000 1px solid;background: red;}.one {width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float: left;font-size: 17px;font-family: Roman;}</style><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function () {//获取 class 和设置 class 都可以使用 attr() 方法来完成.(给id 为first添加 .one 样式)$("#b1").click(function () {$("#first").attr("class", "one");})//追加样式: addClass()$("#b2").click(function () {$("#first").addClass("one");})//移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class$("#b3").click(function () {$("#first").removeClass("one");})//切换样式: toggleClass()  --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它$("#b4").click(function () {$("#first").toggleClass("one");})//判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false$("#b5").click(function () {alert($("#first").hasClass("one"))})});</script>
</head>
<body>
<input type="button" value="获取 class 和设置 class 都可以使用 attr() 方法来完成(给id 为first添加 .one 样式)"id="b1"/><br/><br/>
<input type="button" value="追加样式: addClass() (给id 为first添加 .one 样式)" id="b2"/><br/><br/>
<input type="button"value="移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class(给id 为first删除 .one 样式) "id="b3"/><br/><br/>
<input type="button"value="切换样式: toggleClass() (给id 为first切换 .one 样式) --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它"id="b4"/><br/><br/>
<input type="button"value="判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false"id="b5"/><br/><br/>
<div id="first">first</div>
<div id="second">second</div>
</body>
</html>

4.获取HTML文本和值

1.基本介绍

2.案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- 确保添加了jQuery库 --><script>$(function () {//input绑定失去焦点事件，检查用户是否填写信息了$("input").blur(function () {if ($(this).val() == "") { //没有信息则填入value="请输入用户名"$(this).val("请输入用户名");}})//input绑定获取焦点事件，清空value$("input").focus(function () {if ($(this).val() == "请输入用户名") {//清空val$(this).val("");}})})</script>
</head>
<body>
<input type="text" value="请输入用户名">
<button>登录</button>
</body>
</html>

5.常用遍历节点方法

1.基本介绍

2. 代码实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常用遍历节点方法-应用实例</title><style type="text/css">div, span {width: 140px;height: 60px;margin: 20px;background: #9999CC;border: #000 1px solid;float: left;font-size: 17px;font-family: Roman;}</style><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function () {//**查找所有子元素中的一个（class 为 one 的div的子元素)$("#b1").click(function () {var $children = $("div[class='one']").children().eq(1);//这里的$children是方法返回的，不是自己遍历的，所以返回的是jquery对象而不是dom对象alert($children.text())})//***获取后面的同辈div元素（class 为 two 的div的)$("#b2").click(function () {var nextAll = $("div[class='one']").nextAll();//自己遍历一下，返回的就是dom对象了$(this)转化成jquery对象nextAll.each(function () {console.log($(this).text())})})//**获取前面的同辈div元素（class 为 one 的div的)$("#b3").click(function () {var prevAll = $("div[class='one']").prevAll();//获取紧邻前面的一个同辈元素var prev = $("div[class='one']").prev();alert(prev.text())prevAll.each(function () {console.log($(this).text())})})//**获取所有的同辈div元素（class 为 one 的div的)$("#b4").click(function () {$("div[class='one']").siblings().filter("div").each(function () { //filter可以过滤console.log($(this).text())})})})</script>
</head>
<body>
<input type="button" value="查找所有子元素 (class 为 one 的div的)" id="b1"/><br/><br/>
<input type="button" value="获取后面的同辈元素 (class 为 one 的div的)" id="b2"/><br/><br/>
<input type="button" value="获取前面的同辈元素 (class 为 one 的div的)" id="b3"/><br/><br/>
<input type="button" value="获取所有的同辈元素 (class 为 one 的div的)" id="b4"/>
<hr/>
<div>ccccccc
</div><p class="one">ccccccc
</p><div class="one">dfsd<div id="one">XXXXXXXXX one</div><div id="two">XXXXXXXXX two</div><div id="three">XXXXXXXXX three</div><div id="four">XXXXXXXXX four</div>
</div>
<div>tttttttttt
</div>
<div>aaaaaaa
</div>
<div>bbbbbb</div>
<p>hello, pp</p>
</body>
</html>

6.CSS-DOM操作

1.基本介绍

2.代码实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css-dom操作</title><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function () {$("#b1").click(function () {//获取图片widthvar width = $("img").width();alert(width)//获取偏移对象，从而获取偏移量var offset = $("img").offset();alert("top=" + offset.top)alert("left=" + offset.left)})})</script>
</head>
<body>
<br/><br/><br/>
hello,world~<img src="../image/1.png" width="200">
<button id="b1" type="button">获取图片信息</button>
</body>
</html>

7.多选框应用案例

1.题目

2.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>多选框应用</title><style type="text/css">BODY {font-size: 12px;margin: 0px 0px 0px 0px;overflow-x: auto;overflow-y: auto;background-color: #B8D3F4;}.default_input {border: 1px solid #666666;height: 18px;font-size: 12px;}.default_input2 {border: 1px solid #666666;height: 18px;font-size: 12px;}.nowrite_input {border: 1px solid #849EB5;height: 18px;font-size: 12px;background-color: #EBEAE7;color: #9E9A9E;}.default_list {font-size: 12px;border: 1px solid #849EB5;}.default_textarea {font-size: 12px;border: 1px solid #849EB5;}.nowrite_textarea {border: 1px solid #849EB5;font-size: 12px;background-color: #EBEAE7;color: #9E9A9E;}.wordtd5 {font-size: 12px;text-align: center;vertical-align: top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #b8c4f4;}.wordtd {font-size: 12px;text-align: left;vertical-align: top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #b8c4f4;}.wordtd_1 {font-size: 12px;vertical-align: top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #516CD6;color: #fff;}.wordtd_2 {font-size: 12px;text-align: right;vertical-align: top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #64BDF9;}.wordtd_3 {font-size: 12px;text-align: right;vertical-align: top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #F1DD34;}.inputtd {font-size: 12px;vertical-align: top;padding-top: 3px;padding-right: 3px;padding-bottom: 3px;padding-left: 3px;}.inputtd2 {text-align: center;font-size: 12px;vertical-align: top;padding-top: 3px;padding-right: 3px;padding-bottom: 3px;padding-left: 3px;}.tablebg {font-size: 12px;}.tb {border-collapse: collapse;border: 1px outset #999999;background-color: #FFFFFF;}.td2 {line-height: 22px;text-align: center;background-color: #F6F6F6;}.td3 {background-color: #B8D3F4;text-align: center;line-height: 20px;width: 100px;}.td4 {background-color: #F6F6F6;line-height: 20px;}.td5 {border: #000000 solid;border-right-width: 0px;border-left-width: 0px;border-top-width: 0px;border-bottom-width: 1px;}.tb td {font-size: 12px;border: 2px groove #ffffff;}.noborder {border: none;}.button {border: 1px ridge #ffffff;line-height: 18px;height: 20px;width: 45px;padding-top: 0px;background: #CBDAF7;color: #000000;font-size: 9pt;}.textarea {font-family: Arial, Helvetica, sans-serif, "??";font-size: 9pt;color: #000000;border-bottom-width: 1px;border-top-style: none;border-right-style: none;border-bottom-style: solid;border-left-style: none;border-bottom-color: #000000;background-color: transparent;text-align: left}</style><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function () {//为所有option绑定双击事件$("select option").dblclick(function () {//根据父元素决定插入到哪个地方var attr = $(this).parent().attr("id");if (attr == "first") {$("#second").append($(this))}if (attr == "second") {$("#first").append($(this))}});//绑定第一个按钮$("#add").click(function () {//找到被选中的按钮，内部插入到右边var $first = $("#first option:checked");$first.each(function () {//找到右边的下拉框，内部插入$("#second").append($(this))})})//绑定第二个按钮$("#add_all").click(function () {//找到左边的所有子元素var $children = $("#first").children()//遍历插入到右边的下拉框$children.each(function () {$("#second").append($(this))})})//绑定第三个按钮$("#remove").click(function () {//找到右边被选中的按钮，内部插入到左边var $second = $("#second option:checked");$second.each(function () {$("#first").append($(this))})})//绑定第四个按钮$("#remove_all").click(function () {//找到所有右边的元素，遍历内部插入左边var $children = $("#second").children();$children.each(function () {$("#first").append($(this))})})})</script>
</head>
<body>
<div style="border:1px dashed #E6E6E6;margin:50px 0px 0px 50px; width:350px; height:260px; background-color:#E6E6E6;"><table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0"style="margin:15px 0px 0px 15px;"><tr><td width="126"><!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度--><select name="first" size="10" multiple="multiple" class="td3" id="first"><option value="选项1">选项1</option><option value="选项2">选项2</option><option value="选项3">选项3</option><option value="选项4">选项4</option><option value="选项5">选项5</option><option value="选项6">选项6</option><option value="选项7">选项7</option><option value="选项8">选项8</option></select></td><td width="69" valign="middle"><input name="add" id="add" type="button" class="button" value="-->"/><input name="add_all" id="add_all" type="button" class="button" value="==>"/><input name="remove" id="remove" type="button" class="button" value="&lt;--"/><input name="remove_all" id="remove_all" type="button" class="button" value="&lt;=="/></td><td width="127" align="left"><select name="second" size="10" multiple="multiple" class="td3" id="second"><option value="选项9">选项9</option></select></td></tr></table>
</div>
</body>
</html>

8.页面加载完毕触发方式

9.作业

1.作业一

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script>$(function () {//为按钮绑定点击事件$("button").click(function () {//返回选中的个数以及选中的信息var $input = $("input[name='sport']:checked");var res = "您选中的信息是："; //将信息存储在这个String里//遍历选中的信息if ($input) { //只要不是空就遍历$input.each(function () {res += $(this).val();})res += "，个数是：" + $input.length;alert(res)}})})</script></head>
<body>
<input type="checkbox" name="sport" value="篮球">篮球<br>
<input type="checkbox" name="sport" value="排球">排球<br>
<input type="checkbox" name="sport" value="羽毛球">羽毛球<br>
<input type="checkbox" name="sport" value="乒乓球">乒乓球<br>
<button>选中的个数</button>
</body>
</html>

2.作业二

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script>$(function () {//绑定第一个按钮$("button").eq(0).click(function () {//使单选下拉框的2号被选中$("select[name='sel1'] option[value='se2']").attr("selected", true);})//绑定第二个按钮$("button").eq(1).click(function () {//使多选下拉框的2号和5号被选中$("select[name='sel2'] option").eq(1).attr("selected", true)$("select[name='sel2'] option").eq(4).attr("selected", true)})//绑定第三个按钮$("button").eq(2).click(function () {//使复选框的复选2和复选4被选中$(":checkbox:odd").attr("checked", true) //过滤checkbox和偶数})//绑定第四个按钮$("button").eq(3).click(function () {//使单选框的单选2被选中$(":radio:eq(1)").attr("checked", true)})//绑定第五个按钮$("button").eq(4).click(function () {//打印已经选中的值var $selected = $(":selected");$selected.each(function () {console.log($(this).text())})var $checked = $("input:checked");$checked.each(function () {console.log($(this).val())})})})</script>
</head>
<body>
<button>使单选下拉框的2号被选中</button>
<br>
<button>使多选下拉框的2号和5号被选中</button>
<br>
<button>使复选框的复选2和复选4被选中</button>
<br>
<button>使单选框的单选2被选中</button>
<br>
<button>打印已经选中的值</button>
<br><br>
<select name="sel1"><option value="se1">1号</option><option value="se2">2号</option><option value="se3">3号</option><option value="se4">4号</option><option value="se5">5号</option>
</select><br><br>
<select name="sel2" multiple="multiple" style="height: 100px"><option value="sem1">1号</option><option value="sem2">2号</option><option value="sem3">3号</option><option value="sem4">4号</option><option value="sem5">5号</option>
</select><br><br>
<input type="checkbox" value="复选1" name="ch">复选1
<input type="checkbox" value="复选2" name="ch">复选2
<input type="checkbox" value="复选3" name="ch">复选3
<input type="checkbox" value="复选4" name="ch">复选4<br><br>
<input type="radio" name="ra" value="单选1">单选1
<input type="radio" name="ra" value="单选2">单选2
<input type="radio" name="ra" value="单选3">单选3
</body>
</html>

3.作业三（处理布尔属性使用prop）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script>$(function () {//绑定第一个按钮$("button:eq(0)").click(function () {$("input").prop("checked", true)})//绑定第二个按钮$("button:eq(1)").click(function () {$("input").prop("checked", false)})//绑定第三个按钮$("button:eq(2)").click(function () {//遍历按钮，反选$("input").each(function () {if ($(this).prop("checked")) {$(this).prop("checked", false)}else {$(this).prop("checked", true)}})})})</script>
</head>
<body>
<h4>请选择您的爱好</h4>
<input type="checkbox" name="ch" value="ch1">足球
<input type="checkbox" name="ch" value="ch2">篮球
<input type="checkbox" name="ch" value="ch3">游泳
<input type="checkbox" name="ch" value="ch4">唱歌<br>
<button>全选</button>&nbsp;&nbsp;
<button>全不选</button>&nbsp;&nbsp;
<button>反选</button>
</body>
</html>

4.作业四

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script>$(function () {//绑定提交按钮$("input[type='submit']").click(function () {//获取三个按钮信息var name = $("input:eq(0)").val();var email = $("input:eq(1)").val();var num = $("input:eq(2)").val();//创建一个table记录var $tr = $("<tr><td>" + name + "</td><td>" + email + "</td><td>" + num + "</td><td><a href='#'>delete</a></td></tr>");//内部插入$("table").append($tr);})// 使用事件委托绑定动态生成的超链接点击事件$("table").on("click", "a", function () {var $name = $(this).closest("tr").find("td:first").text();//找到名字var isConfirmed = confirm("是否要删除名字为 " + $name + " 的行？");if(isConfirmed) {// 执行删除操作，例如移除当前行$(this).closest("tr").remove();}});})</script>
</head>
<body>
<h4>用户前台管理系统</h4>
姓名：<input type="text">
email：<input type="text">
电话：<input type="text">
<input type="submit" value="提交">
<hr>
<table width="700" border="2px" style="background: #b3d4fc;"><tr><th>姓名</th><th>email</th><th>电话</th><th>删除操作</th></tr>
</table>
</body>
</html>

1.添加

2.删除

jQuery(二)

文章目录 1.jQuery操作节点1.查找节点，修改属性1.基本介绍2.切换图片案例 2.创建节点1.基本介绍2.内部插入3.外部插入4.小结1.插入方法说明2.两种插入方法的区别 5.插入元素实例6.移动元素实例 3.删除节点1.基本介绍2.代码实例 4.复制节点1.基本介绍2.代码实例 5.替…...

编程日记 2024/4/4 14:20:01

Thanks：mit6.828环境搭建 - 人云我不亦云的文章 - 知乎 https://zhuanlan.zhihu.com/p/489921553 sudo make && make install install -d -m 0755 "/share/qemu" install: 无法创建目录 “/share”: 权限不够 make: *** [Makefile:382&#xff1a…...

编程日记 2024/4/4 14:17:58

一文彻底搞清 Iterator（遍历器）概念及用法

目录一、由来及意义二、具体实现流程三、具有默认 Iterator 接口的数据结构四、调用 Iterator 接口的场合五、总结一、由来及意义 Javascript中表示“集合”的数据结构，主要是 Array、Object、Map、Set 这四种数据集合，除此之外，…...

编程日记 2024/4/4 14:15:56

稀疏矩阵的三元组表表示法及其转置

1. 什么是稀疏矩阵稀疏矩阵是指矩阵中大多数元素为零的矩阵。从直观上讲，当元素个数低于总元素的30%时，这样的矩阵被称为稀疏矩阵。由于该种矩阵的特点，我们在存储这种矩阵时，如果直接采用二维数组，就会十分浪费…...

编程日记 2024/4/4 14:14:55

docker安装rabbitMQ,并且创建账号

# 创建docker容器启动,挂到后台运行 docker run -d --name rabbitmq -p 5672:5672 -p 15672:15672 rabbitmq:3.13-management # 打开防火墙 sudo firewall-cmd --zonepublic --add-port5672/tcp --permanent sudo firewall-cmd --zonepublic --add-port15672/tcp --permanent s…...

编程日记 2024/4/4 14:13:54

wireshark解析grpc/protobuf的方法

1，wireshark需要安装3.20以上下载地址：https://www.wireshark.org/ 2，如果版本不对，需要卸载，卸载方法： sudo rm -rf /Applications/Wireshark.app sudo rm -rf $HOME/.config/wireshark sudo rm -rf /…...

编程日记 2024/4/4 14:12:53

软件测试用例(2)

具体的设计方法 -- 黑盒测试因果图因果图是一种简化的逻辑图, 能直观地表明程序的输入条件(原因)和输出动作(结果)之间的相互关系. 因果图法是借助图形来设计测试用例的一种系统方法, 特别适用于被测试程序具有多种输入条件, 程序的输出又依赖于输入条件的各种情况. 因果图…...

编程日记 2024/4/4 14:11:51

集群式无人机仿真环境和数据集

仿真环境和数据集 Quick StartAcknowledgementsSwarmSim Quick Start Compiling tests passed on 20.04 with ros installed. You can just execute the following commands one by one. # Download the Simulator and run it wget https://cloud.tsinghua.edu.cn/library/34…...

编程日记 2024/4/4 14:09:50

IPSec VPN

IP Security，IP安全 1、特点 L3的VPN 缺：不支持组播、配置复杂、延迟增加、资源消耗较多优：具备访问控制、密码学四个维度、抗重放打击 2、组件 ①安全协议 1）验证头技术（AH） IP协议号51 提供数据完整性检查，身份验证，抗重放攻击无法做数据的机密性 AH的完…...

编程日记 2024/4/4 14:07:48

docker部署nacos，单例模式(standalone)，使用内置的derby数据库，简易安装

文章目录前言安装创建文件夹docker指令安装docker指令安装-瘦身版制作docker-compose.yaml文件查看页面前言 nacos作为主流的服务发现中心和配置中心，广泛应用于springcloud框架中，现在就让我们一起简易的部署一个单例模式的nacos，版本可…...

编程日记 2024/4/4 14:05:46

systemd监听服务配置文件更新自动重启服务

背景&需求需要频繁更改一个服务的配置文件进行测试实现配置服务的systemd文件 vim /lib/systemd/system/xxx.service [Unit] Descriptionxxx daemon, A rule-based proxy in Go.[Service] Typesimple ExecStart/opt/xxx/xxx-d /etc/xxx/ Restartalways[Install] Wan…...

编程日记 2024/4/4 14:04:45

【yy讲解PostCSS是如何安装和使用】

🎥博主：程序员不想YY啊 💫CSDN优质创作者，CSDN实力新星，CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益，如有不足之处，欢迎在评论区提出…...

编程日记 2024/4/4 14:01:42

YOLO电动车检测识别数据集：12617张图像，yolo标注完整

YOLO电动车检测识别数据集：12617张图像，电动车一类，yolo标注完整，部分图像应用增强。适用于CV项目，毕设，科研，实验等需要此数据集或其他任何数据集请私信...

编程日记 2024/4/4 13:55:38

从汇编看函数调用

文章目录函数调用流程栈相关寄存器及的作用简介寄存器功能指令功能栈函数的括号{}正括号反括号参数传递传值，变量不可改传指针，变量可改C 传引用函数调用实例函数调用流程目标：函数调用前后栈保持不变保存main函数的寄存器上下文移…...

编程日记 2024/4/4 13:54:37

node.js的错误处理

当我打开一个不存在的文件时，错误如下： 在读取文件里面写入console.log（err），在控制台中可以看到我的错误代码类型：文件不存在的错误代码 ENOENT。见更多错误代码---打开node.js官方API文档Error 错误 | N…...

编程日记 2024/4/4 13:53:36

shell的编写

文章目录 1.框架2.命令行3.获取用户命令字符串4.命令行字符串分割5.执行命令和内建命令6.完整代码： 1.框架我们知道shell是一直存在的，所以首先我们第一步就是要搭建一个框架，使其一直存在。那么也很简单，一个while循环就可以完…...

编程日记 2024/4/4 13:48:31

css心跳动画

图标引入 <img class"icon" src"heart.svg" alt"" srcset""> CSS代码 <style>.icon {animation:bpm 1s linear,pulse 0.75s 1s linear infinite;}keyframes pulse {from,75%,to {transform: scale(1);}25% {transform:…...

编程日记 2024/4/4 13:47:31

在 Amazon Timestream 上通过时序数据机器学习进行预测分析

由于不断变化的需求和现代化基础设施的动态性质，为大型应用程序规划容量可能会非常困难。例如，传统的反应式方法依赖于某些 DevOps 指标（如 CPU 和内存）的静态阈值，而这些指标在这样的环境中并不足以解决问题。在这篇文…...

编程日记 2024/4/4 13:44:27

【智能排班系统】快速消费线程池

文章目录线程池介绍线程池核心参数核心线程数（Core Pool Size）最大线程数（Maximum Pool Size）队列（Queue）线程空闲超时时间（KeepAliveTime）拒绝策略（RejectedExecutionH…...

编程日记 2024/4/4 13:43:26

C语言——内存函数

前言： C语言中除了字符串函数和字符函数外，还有一些函数可以直接对内存进行操作，这些函数被称为内存函数，这些函数与字符串函数都属于<string.h>这个头文件中。一.memcpy（）函数 memcpy是C语言中的…...

编程日记 2024/4/4 13:41:24

循环冗余码校验CRC码算法步骤+详细实例计算

通信过程：（白话解释） 我们将原始待发送的消息称为 M M M，依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)（意思就是 G （ x ) G（x) G（x) 是已知的）&#xff0…...

编程新知 2026/2/8 8:16:14

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2026/1/28 9:04:29

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日，中天合创屋面分布式光伏发电项目顺利并网发电，该项目位于内蒙古自治区鄂尔多斯市乌审旗，项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站，总装机容量为9.96MWp。项目投运后，每年可节约标煤3670…...

编程新知 2026/1/30 2:45:51

html-＜abbr＞缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词，它可以帮助用户更好地理解缩写的含义，尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时，会显示一个提示框。示例&#x…...

编程新知 2026/1/24 19:22:03

Linux离线（zip方式）安装docker

目录基础信息操作系统信息docker信息安装实例安装步骤示例遇到的问题问题1：修改默认工作路径启动失败问题2 找不到对应组基础信息操作系统信息 OS版本：CentOS 7 64位内核版本：3.10.0 相关命令： uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用引言随着无人机（无人驾驶飞行器，UAV）技术的快速发展，其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统，无人机的“黑飞”&…...

编程新知 2026/1/26 6:01:03

【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...

编程新知 2026/1/28 9:00:05

MySQL 主从同步异常处理

阅读原文：https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主，遇到的这个错误： Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一，通常表示&#xff…...

编程新知 2025/11/7 10:02:17

Vue 模板语句的数据来源

🧩 Vue 模板语句的数据来源：全方位解析 Vue 模板（<template> 部分）中的表达式、指令绑定（如 v-bind, v-on）和插值（{{ }}）都在一个特定的作用域内求值。这个作用域由当前组件…...

编程新知 2026/2/1 6:18:18

云原生安全实战：API网关Envoy的鉴权与限流详解

🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】一、基础概念 1. API网关作为微服务架构的统一入口，负责路由转发、安全控制、流量管理等核心功能。 2. Envoy 由Lyft开源的高性能云原生…...

编程新知 2026/2/8 3:38:05

文章目录

1.jQuery操作节点

1.查找节点，修改属性

1.基本介绍

2.切换图片案例

2.创建节点

1.基本介绍

2.内部插入

3.外部插入

4.小结

1.插入方法说明

2.两种插入方法的区别

5.插入元素实例

6.移动元素实例

3.删除节点

1.基本介绍

2.代码实例

4.复制节点

1.基本介绍

2.代码实例

5.替换节点

1.基本介绍

2.代码实例

2.属性操作

3..class样式操作

1.基本介绍

2.代码实例

4.获取HTML文本和值

1.基本介绍

2.案例

5.常用遍历节点方法

1.基本介绍

2. 代码实例

6.CSS-DOM操作

1.基本介绍

2.代码实例

7.多选框应用案例

1.题目

2.代码

8.页面加载完毕触发方式

9.作业

1.作业一

2.作业二

3.作业三（处理布尔属性使用prop）

4.作业四

1.添加

2.删除

相关文章：

3.`.class`样式操作