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。

相关文章

HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
Java实现删除文件中的指定内容

Java实现删除文件中的指定内容

《Java实现删除文件中的指定内容》在日常开发中,经常需要对文本文件进行批量处理,其中,删除文件中指定内容是最常见的需求之一,下面我们就来看看如何使用java实现删除文件中的指定内容吧... 目录1. 项目背景详细介绍2. 项目需求详细介绍2.1 功能需求2.2 非功能需求3. 相关技术详细介绍3.1 Ja
阅读更多...
springboot项目中整合高德地图的实践

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》：本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一：高德开放平台的使用二：创建数据库（我是用的是mysql）三：Springboot所需的依赖（根据你的需求再
阅读更多...
spring中的ImportSelector接口示例详解

spring中的ImportSelector接口示例详解

《spring中的ImportSelector接口示例详解》Spring的ImportSelector接口用于动态选择配置类,实现条件化和模块化配置,关键方法selectImports根据注解信息返回... 目录一、核心作用二、关键方法三、扩展功能四、使用示例五、工作原理六、应用场景七、自定义实现Impor
阅读更多...
SpringBoot3应用中集成和使用Spring Retry的实践记录

SpringBoot3应用中集成和使用Spring Retry的实践记录

《SpringBoot3应用中集成和使用SpringRetry的实践记录》SpringRetry为SpringBoot3提供重试机制,支持注解和编程式两种方式,可配置重试策略与监听器,适用于临时性故... 目录1. 简介2. 环境准备3. 使用方式3.1 注解方式 基础使用自定义重试策略失败恢复机制注意事项
阅读更多...
SpringBoot整合Flowable实现工作流的详细流程

SpringBoot整合Flowable实现工作流的详细流程

《SpringBoot整合Flowable实现工作流的详细流程》Flowable是一个使用Java编写的轻量级业务流程引擎,Flowable流程引擎可用于部署BPMN2.0流程定义,创建这些流程定义的... 目录1、流程引擎介绍2、创建项目3、画流程图4、开发接口4.1 Java 类梳理4.2 查看流程图4
阅读更多...
一文详解如何在idea中快速搭建一个Spring Boot项目

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热
阅读更多...
全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...
Java对异常的认识与异常的处理小结

Java对异常的认识与异常的处理小结

《Java对异常的认识与异常的处理小结》Java程序在运行时可能出现的错误或非正常情况称为异常,下面给大家介绍Java对异常的认识与异常的处理,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参... 目录一、认识异常与异常类型。二、异常的处理三、总结 一、认识异常与异常类型。（1）简单定义-什么是
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2