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

jQuery(二)

news 2026/3/27 0:04:30

文章目录

- 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

跨语言沟通的革命性突破：FunASR语音翻译系统全解析

跨语言沟通的革命性突破：FunASR语音翻译系统全解析你是否还在为国际会议中的语言障碍而烦恼？是否因跨国团队协作中的沟通不畅而效率低下？FunASR语音翻译系统将彻底改变这一现状，让跨语言交流如母语般自然流畅。读完本文&#xf…...

编程新知 2026/3/26 23:32:58

COMSOL—超声相控阵聚焦仿真模型介绍：激励函数是由高斯波和正弦波组成的脉冲函数

COMSOL—超声相控阵聚焦仿真模型介绍：激励函数是由高斯波和正弦波组成的脉冲函数超声相控阵这玩意儿在工业检测和医学影像里玩得可溜了，今天咱们整点硬核的——用COMSOL搞个带高斯调制的超声聚焦仿真。先看这个模型的灵魂所在：激励信号设计。…...

编程新知 2026/3/26 22:08:05

职场“对错陷阱“：为什么你越是讲理，领导越不待见你？

导语：小时候老师教我们"明辨是非"，长大后却发现——在职场里太较真的人，往往混得最差。一、拍桌子的代价2023年春天，我亲眼看见林哥在会议室拍了桌子。"这需求根本不合理！数据库设计违反第三范式&#…...

编程新知 2026/3/26 22:02:04

基于CYBER-VISION零号协议构建智能技术文档翻译与摘要系统

基于CYBER-VISION零号协议构建智能技术文档翻译与摘要系统 1. 引言对于很多开发者来说，阅读英文技术文档是件挺头疼的事。尤其是遇到一些前沿的开源项目，官方文档全是英文，里面还夹杂着大量的专业术语和复杂的配置说明。有时候&#xff0c…...

编程新知 2026/3/26 21:56:03

深度解析：汇率结算下的货代对账困局，如何利用 AI 与 RPA 构建底层逻辑？

【前言】在国际物流与货运代理行业，财务对账向来是一块“硬骨头”。尤其是涉及跨国业务时，汇率的实时波动与多币种结算的交叉影响，使得原本复杂的账目核对工作呈几何倍数增加。传统的人工对账模式不仅效率低下，且在面对分位数的四…...

编程新知 2026/3/26 21:54:03

不止于仿真：用COMSOL LiveLink玩转超声相控阵动态聚焦与参数化扫描

超越静态仿真：COMSOL LiveLink在超声相控阵动态聚焦中的高阶应用当超声相控阵技术遇上COMSOL的多物理场仿真能力，工程师们便获得了一把打开声波精准操控之门的钥匙。不同于传统静态仿真，动态聚焦与参数化扫描技术让声场控制如同探照灯般灵活…...

编程新知 2026/3/26 21:11:52

2024 0xGame Web安全挑战：从SQLite注入到RCE实战解析

1. SQLite注入基础与实战技巧 SQLite作为轻量级数据库，在CTF题目中经常出现。与MySQL注入相比，SQLite少了information_schema等常用表，但核心注入逻辑相通。以2024 0xGame的ez_sql题为例，我们来看具体操作： 闭合方式差…...

编程新知 2026/3/26 21:09:51

League-Toolkit英雄联盟辅助工具完全指南：从配置到精通的高效使用手册

League-Toolkit英雄联盟辅助工具完全指南：从配置到精通的高效使用手册【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit …...

编程新知 2026/3/26 21:09:51

终极指南：Windows虚拟磁盘驱动器的完整解决方案ImDisk深度解析

终极指南：Windows虚拟磁盘驱动器的完整解决方案ImDisk深度解析【免费下载链接】ImDisk ImDisk Virtual Disk Driver 项目地址: https://gitcode.com/gh_mirrors/im/ImDisk ImDisk Virtual Disk Driver是一款专为Windows系统设计的虚拟磁盘驱动解决方案&…...

编程新知 2026/3/26 20:45:48

Defects4J实战：如何利用这个强大的Java缺陷数据库进行自动化测试

Defects4J深度实战：解锁Java缺陷数据库的自动化测试潜能在当今快节奏的软件开发环境中，质量保障已成为决定项目成败的关键因素。对于Java开发者而言，Defects4J这个开源的缺陷数据库正逐渐成为提升代码质量的秘密武器。不同于普通的测试框架&…...

编程新知 2026/3/26 19:55:33

文章目录

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`样式操作