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

jQuery(二)

news 文章来源：https://blog.csdn.net/m0_64637029/article/details/137358971 2024/11/1 20:35: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

ideaSSM图书借阅管理系统VS开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 SSM 图书借阅管理系统是一套完善的信息管理系统，结合SSM框架和bootstrap完成本系统，对理解JSP java编程开发语言有帮助系统采用SSM框架（MVC模式开发），系统具有完整的源代码和数据库，系统主…...

编程日记 2024/4/4 13:39:22

普联一面4.2面试记录

普联一面4.2面试记录文章目录普联一面4.2面试记录1.jdk和jre的区别2.java的容器有哪些3.list set map的区别4.get和post的区别5.哪个更安全6.java哪些集合类是线程安全的7.创建线程有哪几种方式8.线程的状态有哪几种9.线程的run和start的区别10.什么是java序列化11.redis的优…...

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

SQLite的架构（十一）

返回：SQLite—系列文章目录上一篇：SQLite下一代查询规划器(十） 下一篇：SQLite—系列文章目录介绍本文档介绍SQLite库的架构。这里的信息对那些想要了解或修改SQLite的内部工作原理。接口SQL 命令处理器虚拟机B-树…...

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

Vue2电商前台项目（一）：项目前的初始化及搭建

一、项目初始化创建项目：sudo vue create app 1.项目配置 （1）浏览器自动打开在package.json文件中，serve后面加上 --open "scripts": {"serve": "vue-cli-service serve --open","buil…...

编程日记 2024/4/4 13:35:17

4.6 offset指令，jmp short指令，far，dword ptr各种跳转指令

4.6 offset指令，jmp short指令，far，dword ptr各种跳转指令可以修改IP，或同时修改CS和IP的指令统称为转移指令。概括的讲，转移指令就是可以控制CPU执行内存中某处代码的指令 1. 转移指令 1.1 8086CPU的转移行为有以…...

编程日记 2024/4/4 13:34:16

【WEEK5】【DAY5】DML语言【中文版】

2024.3.29 Friday 目录 3.DML语言3.1.外键（了解）3.1.1.概念3.1.2.作用3.1.3.添加（书写）外键的几种方法3.1.3.1.创建表时直接在主动引用的表里写（被引用的表的被引用的部分）3.1.3.2.先创建表后修改表以添加…...

编程日记 2024/4/4 13:33:15

媒体偏见从何而来？--- 美国MRC（媒体评级委员会）为何而生？

每天当我们打开淘宝，京东，步入超市，逛街或者逛展会，各种广告铺天盖地而来。从原来的平面广告，到多媒体广告，到今天融合AR和VR技术的数字广告，还有元宇宙虚拟世界，还有大模型加持的智…...

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

Solana 线下活动回顾｜多方创新实践，引领 Solana“文艺复兴”新浪潮

Solana 作为在过去一年里实现突破式飞跃的头部公链，究竟是如何与 Web3 行业共振，带来全新的技术发展与生态亮点的呢？在 3 月 24 日刚结束的「TinTin Destination Moon」活动现场，来自 Solana 生态的的专家大咖和 Web3 行业的资深人…...

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

CSS3 实现文本与图片横向无限滚动动画

文章目录 1. 实现效果2.html结构3. css代码 1. 实现效果 gif录屏比较卡，实际很湿滑，因为是css动画实现的 2.html结构 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"…...

编程日记 2024/4/4 13:30:11

Android 性能优化之黑科技开道（一）

1. 缘起在开发电视版智家 App9.0 项目的时候，发现了一个性能问题。电视系统原本剩余的可用资源就少，而随着 9.0 功能的进一步增多，特别是门铃、门锁、多路视频同屏监控后等功能的增加，开始出现了卡顿情况。经过调研分析发现有…...

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

湖北网站建设服务/网络营销与市场营销的区别

https://blog.csdn.net/java_dotar_01/article/details/76942563 https://blog.csdn.net/jiuduan2009/article/details/51737004转载于:https://www.cnblogs.com/wangshaowei/p/10272467.html...

编程日记 2024/11/1 14:47:44

昌平区事业单位公共知识培训网站/百度关键词优化软件怎么样

B/S结构，即Browser/Server(浏览器/服务器)结构，是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。在这种结构下，用户界面完全通过WWW浏览器实现，一部分事务逻辑在前端实现，但是主要事务逻辑在…...

编程日记 2024/11/1 14:10:07

具有价值的微网站建设/今日热点新闻事件2022

原文是财经记者写的，有文学描述思维，所以容易形成兴冲冲读完过瘾了叫好了但就没有下文了。为了防止这个弊病，我是学理工科的，来解构的，给大家把骨头剔出来。一、郁亮CEO（登山与企业运作的相通性&#xff09…...

编程日记 2024/11/1 14:03:54

蒙山县网站建设/全媒体广告代理加盟

文章目录⚡前言一、面试题解析二、JVM 理论详解⛅JVM的位置❄️JVM的体系结构⏳类加载器三、JVM 双亲委派机制四、Native 关键字五、PC寄存器与方法区六、栈与堆七、三种JVM、新生区、老年区、永久区⛵小结⚡前言 JVM 是 Java 实现跨平台的基础，所有的Java 程序…...

编程日记 2024/11/1 13:44:34

珠海手机网站建设/站长之家关键词挖掘工具

在以下类中添加 description 字段后， class Colors(models.Model):colors models.CharField(u颜色, max_length10)description models.CharField(u描述, max_length10)def __str__(self):return self.colors执行以下初始化数据库的步骤，报错 C:\Pychar…...

编程日记 2024/11/1 13:09:52

怎样做网站的排名/企业网站优化价格

留个脚印，过两天总结。看到知乎上有人对于DI|IOC 的解释，满不错，收藏下先作者：OneNoodle链接：http://www.zhihu.com/question/23277575/answer/24259844来源：知乎著作权归作者所有。商业转载请联系作者获…...

编程日记 2024/11/1 9:56:54

文章目录

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