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。

相关文章

mysql表操作与查询功能详解

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE
阅读更多...
SpringBoot整合liteflow的详细过程

SpringBoot整合liteflow的详细过程

《SpringBoot整合liteflow的详细过程》：本文主要介绍SpringBoot整合liteflow的详细过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋...  liteflow 是什么？ 能做什么？总之一句话：能帮你规范写代码逻辑 ，编排并解耦业务逻辑，代码
阅读更多...
JavaSE正则表达式用法总结大全

JavaSE正则表达式用法总结大全

《JavaSE正则表达式用法总结大全》正则表达式就是由一些特定的字符组成,代表的是一个规则,：本文主要介绍JavaSE正则表达式用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录常用的正则表达式匹配符正则表China编程达式常用的类Pattern类Matcher类PatternSynta
阅读更多...
Spring Security中用户名和密码的验证完整流程

Spring Security中用户名和密码的验证完整流程

《SpringSecurity中用户名和密码的验证完整流程》本文给大家介绍SpringSecurity中用户名和密码的验证完整流程,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定... 首先创建了一个UsernamePasswordAuthenticationTChina编程oken对象，这是S
阅读更多...
java实现docker镜像上传到harbor仓库的方式

java实现docker镜像上传到harbor仓库的方式

《java实现docker镜像上传到harbor仓库的方式》：本文主要介绍java实现docker镜像上传到harbor仓库的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 前 言2. 编写工具类2.1 引入依赖包2.2 使用当前服务器的docker环境推送镜像2.2
阅读更多...
Java easyExcel实现导入多sheet的Excel

Java easyExcel实现导入多sheet的Excel

《JavaeasyExcel实现导入多sheet的Excel》这篇文章主要为大家详细介绍了如何使用JavaeasyExcel实现导入多sheet的Excel,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录1.官网2.Excel样式3.代码1.官网easyExcel官网2.Excel样式3.代码
阅读更多...
Java MQTT实战应用

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级（QoS0/1/2）,以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端（Clien
阅读更多...
Java中调用数据库存储过程的示例代码

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示
阅读更多...
Spring 框架之Springfox使用详解

Spring 框架之Springfox使用详解

《Spring框架之Springfox使用详解》Springfox是Spring框架的API文档工具,集成Swagger规范,自动生成文档并支持多语言/版本,模块化设计便于扩展,但存在版本兼容性、性... 目录核心功能工作原理模块化设计使用示例注意事项优缺点优点缺点总结适用场景建议总结Springfox 是
阅读更多...
在Spring Boot中集成RabbitMQ的实战记录

在Spring Boot中集成RabbitMQ的实战记录

《在SpringBoot中集成RabbitMQ的实战记录》本文介绍SpringBoot集成RabbitMQ的步骤,涵盖配置连接、消息发送与接收,并对比两种定义Exchange与队列的方式:手动声明(... 目录前言准备工作1. 安装 RabbitMQ2. 消息发送者（Producer）配置1. 创建 Spr
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2