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.创建tr
                var $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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/738787.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring中事务的传播机制

一、前言 首先事务传播机制解决了什么问题 Spring 事务传播机制是包含多个事务的方法在相互调用时&#xff0c;事务是如何在这些方法间传播的。 事务的传播级别有 7 个&#xff0c;支持当前事务的&#xff1a;REQUIRED、SUPPORTS、MANDATORY&#xff1b; 不支持当前事务的&…

中东文明史

转自&#xff1a;想要了解完整的中东文明史&#xff1f;这篇文章成全你 - 知乎 (zhihu.com) 写在前面 中东文明是人类历史上最古老的文明。人类祖先从东非大裂谷走出之后&#xff0c;首先选择定居在中东地区的新月沃土上&#xff0c;并建立了人类历史上有文字记载的第一个文明…

两个基因相关性细胞系(CCLE)(升级)

目录 单基因CCLE数据 ①细胞系转录组CCLE数据下载 ②单基因泛癌表达 CCLE两个基因相关性 ①进行数据整理 ②相关性分析 单基因CCLE数据 ①细胞系转录组CCLE数据下载 基因在各个细胞系表达情况_ccle expression 23q4-CSDN博客 rm(list = ls()) library(tidyverse) libra…

高性能并行计算课程论文:并行网络爬虫的设计与实现

目录 1.绪论 1.1 研究背景 1.2 研究意义 ​​​​​​​1.3 文章结构 2. 网络爬虫相关理论 ​​​​​​​2.1 URL地址格式 ​​​​​​​2.2 网页爬取策略 2.2.1 深度优先策略 2.2.2 广度优先策略 2.2.3 最佳优先策略 ​​​​​​​2.3 网页分析算法 ​​​​​​​2.3.1 正…

哈尔滨等保测评解读

哈尔滨的信息系统安全等级保护测评&#xff08;简称“等保测评”&#xff09;是中国网络安全法规的一部分&#xff0c;旨在确保关键信息基础设施和其他重要信息系统的安全。下面是对哈尔滨等保测评的解读&#xff1a; 测评目的 等保测评的主要目的是评估信息系统是否满足国家规…

机器学习周记(第四十四周:Robformer)2024.6.17~2024.6.23

目录 摘要ABSTRACT1 论文信息1.1 论文标题1.2 论文摘要1.3 论文引言1.4 论文贡献 2 论文模型2.1 问题描述2.2 Robformer2.2.1 Encoder2.2.2 Decoder 2.3 鲁棒序列分解模块2.4 季节性成分调整模块 摘要 本周阅读了一篇利用改进 Transformer 进行长时间序列预测的论文。论文模型…

【火猫体育】欧洲杯:苏格兰VS匈牙利焦点大战

北京时间6月24日&#xff0c;欧洲杯A组苏格兰VS匈牙利的焦点大战将正式打响。这场比赛对于苏格兰队来说不容有失&#xff0c;因为球队必须战胜对手才能有希望从小组赛出线&#xff0c;晋级本届欧洲杯16强。苏格兰在欧洲杯首战&#xff0c;就被东道主德国队上了一课。德国队在比…

“明天下班以后请假了,孩子中考“

「作者简介」&#xff1a;冬奥会网络安全中国代表队&#xff0c;CSDN Top100&#xff0c;就职奇安信多年&#xff0c;以实战工作为基础著作 《网络安全自学教程》&#xff0c;适合基础薄弱的同学系统化的学习网络安全&#xff0c;用最短的时间掌握最核心的技术。 前几天约服务器…

763. 划分字母区间

题目&#xff1a;给你一个字符串 s 。我们要把这个字符串划分为尽可能多的片段&#xff0c;同一字母最多出现在一个片段中。注意&#xff0c;划分结果需要满足&#xff1a;将所有划分结果按顺序连接&#xff0c;得到的字符串仍然是 s 。返回一个表示每个字符串片段的长度的列表…

高性能并行计算华为云实验五:

目录 一、实验目的 二、实验说明 三、实验过程 3.1 创建PageRank源码 3.2 makefile的创建和编译 3.3 主机配置文件建立与运行监测 四、实验结果与分析 4.1 采用默认的节点数量及迭代次数进行测试 4.2 分析并行化下节点数量与耗时的变化规律 4.3 分析迭代次数与耗时的变…

flex 弹性布局还不懂?一篇文章带你了解一下

flex 是什么 Flex布局&#xff0c;全称为Flexible Box布局&#xff0c;或简称Flexbox&#xff0c;是一种由W3C提出用于网页设计的新型布局模式。它旨在提供一个更加有效且灵活的方式来布局、对齐和分配容器内项目的空间&#xff0c;无论是行还是列方向。Flex布局特别适用于响应…

头歌——机器学习——决策树案例

第1关&#xff1a;基于决策树模型的应用案例 任务描述 本关任务&#xff1a;使用决策树算法完成成人收入预测。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a;1.数据特征处理&#xff0c;2.使用决策树算法完成成人收入预测。 数据处理及特征工程 本次任务…

Adaptive Server Connection Failed on Windows

最近在使用pymssql &#xff08;版本2.3.0&#xff09;连接SQL Server2012遇到如下问题&#xff1a; pymssql._mssql.MSSQLDatabaseException: (20002, bDB-Lib error message 20002, severity 9:\nAdaptive Server connection failed (localhost)\nDB-Lib error message 2000…

Linux如何远程访问?

远程访问是现代计算机网络中非常重要的一个功能&#xff0c;它允许用户通过网络连接到远程计算机&#xff0c;并在远程计算机上执行操作。对于使用Linux操作系统的用户来说&#xff0c;Linux远程访问是非常常见的需求。本文将介绍如何实现Linux远程访问&#xff0c;并简要介绍一…

GUI Guider(V1.7.2) 设计UI在嵌入式系统上的应用(N32G45XVL-STB)

目录 概述 1 使用GUI Guider 设计UI 1.1 创建页面 1.2 页面切换事件实现 1.3 生成代码和仿真 1.3.1 生成和编译代码 1.3.2 仿真UI 2 GUI Guider生成的代码结构 2.1 代码结构介绍 2.2 Project目录下的文件 3 板卡上移植UI 3.1 加载代码至工程目录 3.2 主函数中调…

高职人工智能专业实训课之“自然语言处理”

一、前言 在人工智能领域&#xff0c;自然语言处理&#xff08;NLP&#xff09;技术日益成为研究和应用的热点。为了满足高职院校对NLP专业实训课程的需求&#xff0c;唯众人工智能教学实训凭借其前沿的教育技术平台&#xff0c;特别是GPU虚拟化技术&#xff0c;为学生提供了高…

C语言转义序列的含义和用法

基础理论 在C语言中&#xff0c;转义序列是一种特殊的字符组合&#xff0c;以反斜杠\开头&#xff0c;后面跟着一个或多个字符&#xff0c;用于表示不能直接输入的字符或者控制字符。转义序列允许程序员在字符串中包含那些不易直接输入的字符&#xff0c;如换行符、制表符或特…

2-3KW户储、家储逆变器设计资料

储能电源方案双向逆变器板资料&#xff0c;原理文件&#xff0c;PCB文件&#xff0c;源代码&#xff0c;bom清单。 bom表&#xff1a; PCB&#xff1a; 变压器电感 2-3KW户储、家储逆变器设计通常需要考虑以下几个方面&#xff1a; 输入电压范围&#xff1a;逆变器需要能够适应…

“人工智能+”带来新变化

以生成式人工智能&#xff08;AIGC&#xff09;为代表的新一代人工智能技术创新加速演进&#xff0c;相关商业化应用成果也不断涌现&#xff0c;行业应用范围不断拓展&#xff0c;深度赋能实体经济&#xff0c;为行业提质增效与实现减排提供助力。 自主航运初创公司OrcaAI于6月…

帕金森患者营养补充指南:维生素的重要性与选择

帕金森病&#xff0c;在众多营养素中&#xff0c;维生素对于帕金森病患者来说尤为重要。本文将详细介绍帕金森患者应该补充哪些维生素&#xff0c;以及这些维生素的重要性。 一、维生素B组 维生素B组在帕金森病患者中扮演着重要的角色。其中&#xff0c;维生素B6是神经递质多…