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。

相关文章

Java堆转储文件之1.6G大文件处理完整指南

Java堆转储文件之1.6G大文件处理完整指南

《Java堆转储文件之1.6G大文件处理完整指南》堆转储文件是优化、分析内存消耗的重要工具,：本文主要介绍Java堆转储文件之1.6G大文件处理的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言文件为什么这么大？如何处理这个文件？分析文件内容（推荐）删除文件（如果不需要）查看错误来源如何避
阅读更多...
SpringBoot整合Dubbo+ZK注册失败的坑及解决

SpringBoot整合Dubbo+ZK注册失败的坑及解决

《SpringBoot整合Dubbo+ZK注册失败的坑及解决》使用Dubbo框架时,需在公共pom添加依赖,启动类加@EnableDubbo,实现类用@DubboService替代@Service,配... 目录1.先看下公共的pom（maven创建的pom工程）2.启动类上加@EnableDubbo3.实
阅读更多...
SpringBoot整合(ES)ElasticSearch7.8实践

SpringBoot整合(ES)ElasticSearch7.8实践

《SpringBoot整合(ES)ElasticSearch7.8实践》本文详细介绍了SpringBoot整合ElasticSearch7.8的教程,涵盖依赖添加、客户端初始化、索引创建与获取、批量插... 目录SpringBoot整合ElasticSearch7.8添加依赖初始化创建SpringBoot项
阅读更多...
JAVA覆盖和重写的区别及说明

JAVA覆盖和重写的区别及说明

《JAVA覆盖和重写的区别及说明》非静态方法的覆盖即重写,具有多态性；静态方法无法被覆盖,但可被重写（仅通过类名调用）,二者区别在于绑定时机与引用类型关联性... 目录Java覆盖和重写的区别经常听到两种话认真读完上面两份代码JAVA覆盖和重写的区别经常听到两种话1.覆盖=重写。2.静态方法可andro
阅读更多...
SpringBoot中六种批量更新Mysql的方式效率对比分析

SpringBoot中六种批量更新Mysql的方式效率对比分析

《SpringBoot中六种批量更新Mysql的方式效率对比分析》文章比较了MySQL大数据量批量更新的多种方法,指出REPLACEINTO和ONDUPLICATEKEY效率最高但存在数据风险,MyB... 目录效率比较测试结构数据库初始化测试数据批量修改方案第一种 for第二种 case when第三种
阅读更多...
Java docx4j高效处理Word文档的实战指南

Java docx4j高效处理Word文档的实战指南

《Javadocx4j高效处理Word文档的实战指南》对于需要在Java应用程序中生成、修改或处理Word文档的开发者来说,docx4j是一个强大而专业的选择,下面我们就来看看docx4j的具体使用... 目录引言一、环境准备与基础配置1.1 Maven依赖配置1.2 初始化测试类二、增强版文档操作示例2.
阅读更多...
一文详解如何使用Java获取PDF页面信息

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸（宽高）四、获取页面旋转角度五、判断
阅读更多...
Ubuntu 24.04启用root图形登录的操作流程

Ubuntu 24.04启用root图形登录的操作流程

《Ubuntu24.04启用root图形登录的操作流程》Ubuntu默认禁用root账户的图形与SSH登录,这是为了安全,但在某些场景你可能需要直接用root登录GNOME桌面,本文以Ubuntu2... 目录一、前言二、准备工作三、设置 root 密码四、启用图形界面 root 登录1. 修改 GDM 配
阅读更多...
Spring Boot中的路径变量示例详解

Spring Boot中的路径变量示例详解

《SpringBoot中的路径变量示例详解》SpringBoot中PathVariable通过@PathVariable注解实现URL参数与方法参数绑定,支持多参数接收、类型转换、可选参数、默认值及... 目录一. 基本用法与参数映射1.路径定义2.参数绑定&nhttp://www.chinasem.cnbs
阅读更多...
JAVA中安装多个JDK的方法

JAVA中安装多个JDK的方法

《JAVA中安装多个JDK的方法》文章介绍了在Windows系统上安装多个JDK版本的方法,包括下载、安装路径修改、环境变量配置（JAVA_HOME和Path）,并说明如何通过调整JAVA_HOME在... 首先去oracle官网下载好两个版本不同的jdk（需要登录Oracle账号，没有可以免费注册）下载完
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2