JavaWeb系列二十: jQuery的DOM操作 下

2024-06-24 12:52
文章标签 java javascript 操作 web 系列 jquery frontend dom 二十

本文主要是介绍JavaWeb系列二十: jQuery的DOM操作 下，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

jQuery的DOM操作

  • CSS-DOM操作
  • 多选框案例
  • 页面加载完毕触发方法
  • 作业布置
    • jQuery获取选中复选框的值
    • jQuery控制checkbox被选中
    • jQuery控制(全选/全不选/反选)
    • jQuery动态添加删除用户

在这里插入图片描述

CSS-DOM操作

  1. 获取和设置元素的样式属性: css()
  2. 获取和设置元素透明度: opacity属性
  3. 获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是px; 如需要使用其它单位则需传递一个字符串, 例如 $(“p:first”).height(“2em”);
  4. 获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left, 该方法只对可见元素有效
<!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 () {$("#btn1").click(function () {var width = $("img").width();alert("img的width值= " + width);//offset()的使用var offset = $("img").offset();alert("img的top值= " + offset.top);alert("img的left值= " + offset.left);})})</script>
</head>
<body>
<br/>
&nbsp;&nbsp;<img src="../image/beautiful.jpg" width="200"/><br/>
<button id="btn1">获取图片信息</button>
</body>
</html>

多选框案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>多选框案例实现</title><style>div {text-align: center;}select {width: 80px;height: 170px;}</style><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script type="text/javascript">//思路://  (1)绑定事件 (2)选择对应的对象 (3)处理插入[内部插入/外部插入]$(function () {//1.点击--->把左边选中的移动到右边$("#btn01").click(function () {//方式①// $("#select1 > option:selected").appendTo($("#select2"));//方式② 层级选择器的 > 可以忽略// $("#select1 option:selected").appendTo($("#select2"));//方式③$("#select1").children().eq(0).appendTo($("#select2"));});//2.点击<---把右边选中的移动到左边$("#btn03").click(function () {//方式①$("#select2 > option:selected").appendTo($("#select1"));//方式② 层级选择器的 > 可以忽略// $("#select2 option:selected").appendTo($("#select1"));//方式③// $("#select2").children().eq(0).appendTo($("#select1"));});//3.点击===>把左边全部移动到右边$("#btn02").click(function () {//方式①// $("#select1").children().each(function () {//     $(this).appendTo($("#select2"));// })//方式②$("#select1 > option").appendTo($("#select2"));})//4.点击<===把右边全部移动到左边$("#btn04").click(function () {//方式①// $("#select2").children().each(function () {//     $(this).appendTo($("#select1"));// })//方式②$("#select2 > option").appendTo($("#select1"));})//双击左边的某个选项, 将其自动移动到右边//(1)绑定事件 ,没有绑定事件不行的$("#select1").dblclick(function () {$("#select1 option:selected").appendTo($("#select2"));});//双击右边的某个选项, 将其自动移动到左边$("#select2").dblclick(function () {$("#select2 option:selected").appendTo($("#select1"));})});</script>
</head>
<body>
<div><select id="select1" size="9" multiple="multiple"><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><option value="选项9">选项9~</option></select><button id="btn01">---></button><button id="btn02">===></button><button id="btn03"><---</button><button id="btn04"><===</button><select id="select2" size="9" multiple="multiple"/>
</div>
</body>
</html>

页面加载完毕触发方法

  1. 在页面加载完毕后, 浏览器会通过JavaScript为DOM元素添加事件
  2. 在常规的Javascript代码中, 通常使用 window.onload 方法, window.onload = function(){}
  3. 在jQuery中使用$(document).ready()方法
  4. 如图所示
方法window.onload$(document).ready()
执行时机必须等待网页中的所有内容(包括图片)加载完毕后才能执行网页中的所有DOM结构绘制完毕后就执行, 可能DOM元素关联的东西并没有加载完
编写个数不能同时编写多个能同时编写多个
简化写法无$()

测试代码
在这里插入图片描述

  1. window.onload() = function() {}
    在这里插入图片描述
  2. $(document).ready(function(){})
    在这里插入图片描述
  3. $(function)(){})
    在这里插入图片描述

作业布置

jQuery获取选中复选框的值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>作业1</title><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script type="text/javascript">$(document).ready(function () {//1.绑定事件$("#btn1").click(function () {//2.选择对象: 选择所有的checkbox -> 过滤 :checked$(":checkbox:checked").each(function () {//3.进行处理alert($(this).val());});alert("被选中的个数= " + $(":checkbox:checked").length);})});</script>
</head>
<body>
<input type="checkbox" name="sports" value="basketball"/>篮球
<input type="checkbox" name="sports" value="volleyball"/>排球
<input type="checkbox" name="sports" value="badminton"/>羽毛球
<input type="checkbox" name="sports" value="ping-pong"/>乒乓球
<input type="button" id="btn1" value="选中的个数"/>
</body>
</html>

jQuery控制checkbox被选中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>作业2</title><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script type="text/javascript">$(document).ready(function () {//1.使单选下拉框的2号被选中$("#btn1").click(function () {// $("#selectSingle option:eq(1)").attr("selected", true); 这样删除的时候比较麻烦,不推荐// $("#selectSingle option:eq(1)")[0].selected = true;$("#selectSingle").val("2号");})//2.使多选下拉框选中的2号和5号被选中$("#btn2").click(function () {// $("#selectMultiple option:eq(1)").attr("selected", true);//不推荐// $("#selectMultiple option:eq(4)").attr("selected", true);//不推荐// $("#selectMultiple option:eq(1)")[0].selected = true;// $("#selectMultiple option:eq(4)")[0].selected = true;$("#selectMultiple").val(["2号","5号"]);})//3.使复选框的'复选2'和'复选4'被选中$("#btn3").click(function () {// $(":checkbox:eq(1)").attr("checked", true);不推荐// $(":checkbox:eq(3)").attr("checked", true);不推荐// $(":checkbox:eq(1)")[0].checked = true;// $(":checkbox:eq(3)")[0].checked = true;$(":checkbox").val(["复选2", "复选4"]);})//4.使单选框的'单选2'被选中$("#btn4").click(function () {// $(":radio:eq(1)").attr("checked", true);不推荐// $(":radio:eq(1)")[0].checked = true;$(":radio").val(["单选2"]);//这里要传一个数组, 否则不生效})//5.打印已经被选中的值$("#btn5").click(function () {alert("单选下拉框被选中的值= " + $("#selectSingle option:selected").val());$("#selectMultiple option:selected").each(function () {alert("多选下拉框被选中的值= " + $(this).val());})$(":checkbox:checked").each(function () {alert("复选框被选中的值= " + $(this).val());})alert("单选框被选中的值= " + $(":radio:checked").val());})});</script>
</head>
<body>
<button id="btn1">使单选下拉框的2号被选中</button><br/>
<button id="btn2">使多选下拉框选中的2号和五号被选中</button><br/>
<button id="btn3">使复选框的'复选2'和'复选4'被选中</button><br/>
<button id="btn4">使单选框的'单选2'被选中</button><br/>
<button id="btn5">打印已经被选中的值</button><br/>
<select id="selectSingle"><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>
</select>
<select id="selectMultiple" size="9" multiple="multiple"><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>
</select><br/>
<input type="checkbox" name="checkbox" value="复选1">复选1
<input type="checkbox" name="checkbox" value="复选2">复选2
<input type="checkbox" name="checkbox" value="复选3">复选3
<input type="checkbox" name="checkbox" value="复选4">复选4<br/>
<input type="radio" name="radio" value="单选1"/>单选1
<input type="radio" name="radio" value="单选2"/>单选2
<input type="radio" name="radio" value="单选3"/>单选3
</body>
</html>

jQuery控制(全选/全不选/反选)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>作业3</title><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script type="text/javascript">$(document).ready(function () {//1.全选$("#btn01").click(function () {//方法一:循环$(":checkbox:gt(0)").each(function () {//我们不适用attr(), 容易出问题 --> prop//1.attr("checked",""), 如果没有checked就添加并设置为true;//2.如果有checked就不会再添加, 那么此时全选对取消勾选的复选框[此时checked为false]失效!$(this).attr("checked", "");//只会添加, 对checked为false的不能更改为true//1.如果没有checked就添加, 并设置为true//2.如果有checked, 就设置为true$(this).prop("checked", true);//不仅会添加,还会设置//dom方法this.checked = true;})//方式二:不用循环//把所有索引大于0的checkbox的状态设置为选中$(":checkbox:gt(0)").prop("checked", true);})//2.全不选$("#btn02").click(function () {//方法一:循环$(":checkbox:gt(0)").each(function () {//如果复选框有checked属性, 一律设置为false//如果没有, 即未被选中的情况下点击'全不选', 添加一个值为false的checked属性$(this).prop("checked", false);//dom方法this.checked = false;})//方法二:不用循环//把所有索引大于0的checkbox的状态设置为不选中$(":checkbox:gt(0)").prop("checked", false);});//3.反选$("#btn03").click(function () {//这里必须循环$(":checkbox:gt(0)").each(function () {//jquery方法$(this).prop("checked", !this.checked);//dom方法this.checked = !this.checked;})})//4.全选/全不选$("#all").click(function () {//判断当前这个对象(<input type="checkbox" id="all"/>)的checked是否为true或false$(":checkbox:gt(0)").prop("checked", this.checked);//这里不推荐使用循环, 比较麻烦$(":checkbox:gt(0)").each(function () {$(this).prop("checked", $("#all")[0].checked);})})})</script>
</head>
<body>
<h2>请选择您的爱好</h2>
<input type="checkbox" id="all"/>全选/全不选<br/>
<input type="checkbox" name="sports" value="football"/>足球
<input type="checkbox" name="sports" value="basketball"/>篮球
<input type="checkbox" name="sports" value="swim"/>游泳
<input type="checkbox" name="sports" value="sing"/>唱歌<br/>
<input type="button" id="btn01" value="全选"/>
<input type="button" id="btn02" value="全不选"/>
<input type="button" id="btn03" value="反选"/>
</body>
</html>

jQuery动态添加删除用户

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>作业4</title><style>div {text-align: center;}table {margin: auto;width: 500px;text-align: center;}</style><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script type="text/javascript">$(document).ready(function () {//我们将初始化的用户, 也绑定删除的事件$("a").click(function () {return deleteUser($(this));})$("#submit").click(function () {/*思路分析: <tr><td>tom</td><td>123@sohu.com</td><td>123456</td><td><a id="tom" href="deleteEmp?id=tom">Delete</a></td></tr>(1)使用到jquery dom技术(2)逐步构建td, usernameTd, emailTd, telTd, deleteTd,其中的文本从输入框获取到构建tr, 把前面的td加入到tr(3)添加内容/对象 到 table > tbody(层级选择器)*///1.创建username td节点var $usernameTd = $("<td/>");var usernameVal = $("#username").val();$usernameTd.append(usernameVal);//创建email td节点var $emailTd = $("<td/>");var emailVal = $("#email").val();$emailTd.append(emailVal);//创建tel td节点var $telTd = $("<td/>");var telVal = $("#tel").val();$telTd.append(telVal);//创建delete td节点// <td><a id="tom" href="deleteEmp?id=tom">Delete</a></td>var $deleteTd = $("<td/>");var $a = $("<a/>");$a.attr("id", usernameVal);$a.attr("href", "deleteEmp?id=" + usernameVal);$a.html("Delete");//完成点击删除功能$a.click(function () {//专门写一个函数, 完成删除任务//1.return false相当于终止符, return true相当于执行符//2.return false在js中一般是用来取消默认动作的,比如单击了一个超链接,//出发了onclick事件,以外还要触发一个默认的事件比如执行页面的跳转, 所以如果//想要取消默认事件的执行动作就可以return false//3.return false用来阻止表单提交或继续执行下面的代码return deleteUser($a);});$deleteTd.append($a);//2.创建trvar $tr = $("<tr/>");$tr.append($usernameTd);$tr.append($emailTd);$tr.append($telTd);$tr.append($deleteTd);//将tr添加到table > tbody$("#table tbody").append($tr);});//点击超链接, 完成删除某个用户的任务function deleteUser($a) {var b = window.confirm("你确认要删除" + $a.attr("id") + "的信息吗?");if (!b) {return false;}//继续处理删除//1.通过$a, 找到父元素的父元素 tr$a.parent().parent().remove();return false;}})</script>
</head>
<body>
<div><h3>添加用户:</h3>姓名: <input type="text" name="username" id="username"/>email: <input type="email" name="email" id="email"/>电话: <input type="tel" name="tel" id="tel"/><br/><input type="button" value="提交" id="submit"/><hr/>
</div>
<table id="table" border="1" cellspacing="0"><tr><th>姓名</th><th>email</th><th>电话</th></tr><tr><td>mary</td><td>123@sohu.com</td><td>123456</td><td><a id="mary" href="deleteEmp?id=mary">Delete</a></td></tr><tr><td>tom</td><td>123@sohu.com</td><td>123456</td><td><a id="tom" href="deleteEmp?id=tom">Delete</a></td></tr>
</table>
</body>
</html>

这篇关于JavaWeb系列二十: jQuery的DOM操作 下的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1090200。

相关文章

Python调用Orator ORM进行数据库操作

Python调用Orator ORM进行数据库操作

《Python调用OratorORM进行数据库操作》OratorORM是一个功能丰富且灵活的PythonORM库,旨在简化数据库操作,它支持多种数据库并提供了简洁且直观的API,下面我们就... 目录Orator ORM 主要特点安装使用示例总结Orator ORM 是一个功能丰富且灵活的 python O
阅读更多...
Java实现检查多个时间段是否有重合

Java实现检查多个时间段是否有重合

《Java实现检查多个时间段是否有重合》这篇文章主要为大家详细介绍了如何使用Java实现检查多个时间段是否有重合,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录流程概述步骤详解China编程步骤1：定义时间段类步骤2：添加时间段步骤3：检查时间段是否有重合步骤4：输出结果示例代码结语作
阅读更多...
Java中String字符串使用避坑指南

Java中String字符串使用避坑指南

《Java中String字符串使用避坑指南》Java中的String字符串是我们日常编程中用得最多的类之一,看似简单的String使用,却隐藏着不少“坑”,如果不注意,可能会导致性能问题、意外的错误容... 目录8个避坑点如下：1. 字符串的不可变性：每次修改都创建新对象2. 使用 == 比较字符串，陷阱满
阅读更多...
Java判断多个时间段是否重合的方法小结

Java判断多个时间段是否重合的方法小结

《Java判断多个时间段是否重合的方法小结》这篇文章主要为大家详细介绍了Java中判断多个时间段是否重合的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录判断多个时间段是否有间隔判断时间段集合是否与某时间段重合判断多个时间段是否有间隔实体类内容public class D
阅读更多...
IDEA编译报错“java: 常量字符串过长”的原因及解决方法

IDEA编译报错“java: 常量字符串过长”的原因及解决方法

《IDEA编译报错“java:常量字符串过长”的原因及解决方法》今天在开发过程中,由于尝试将一个文件的Base64字符串设置为常量,结果导致IDEA编译的时候出现了如下报错java:常量字符串过长,... 目录一、问题描述二、问题原因2.1 理论角度2.2 源码角度三、解决方案解决方案①：StringBui
阅读更多...
Java覆盖第三方jar包中的某一个类的实现方法

Java覆盖第三方jar包中的某一个类的实现方法

《Java覆盖第三方jar包中的某一个类的实现方法》在我们日常的开发中,经常需要使用第三方的jar包,有时候我们会发现第三方的jar包中的某一个类有问题,或者我们需要定制化修改其中的逻辑,那么应该如何... 目录一、需求描述二、示例描述三、操作步骤四、验证结果五、实现原理一、需求描述需求描述如下：需要在
阅读更多...
Java中ArrayList和LinkedList有什么区别举例详解

Java中ArrayList和LinkedList有什么区别举例详解

《Java中ArrayList和LinkedList有什么区别举例详解》：本文主要介绍Java中ArrayList和LinkedList区别的相关资料,包括数据结构特性、核心操作性能、内存与GC影... 目录一、底层数据结构二、核心操作性能对比三、内存与 GC 影响四、扩容机制五、线程安全与并发方案六、工程
阅读更多...
部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
JavaScript中的reduce方法执行过程、使用场景及进阶用法

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》：本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程
阅读更多...
如何使用Java实现请求deepseek

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2