【前端基础--7】
DOM操作
DOM，全称(Document Object Model)，文档对象模型。
提供操作HTML的方法（操作页面元素）
获取节点 --- 操作元素标签
<body><div id="box">我是盒子标签</div><p class="text">p标签</p><ul><li>第一个</li><li>第二个</li><li>第三个</li></ul><div class="box">用类名的盒子1</div><div class="box">用类名的盒子2</div><script>// 打印document 全局对象console.log(document);// 通过元素id,定义变量来获取对应标签let box = document.getElementById('box');console.log(box);// 通过类名,定义变量来获取对应标签let text = document.getElementsByClassName('text');console.log(text);// 通过标签名，定义变量来获取对应let list = document.getElementsByTagName('li'); //获取页面中所有的li标签 得到的数据是一个集合console.log(list);console.log(list[0]); //打印第一个li标签// 如果想看到每一项，可以通过循环遍历出来for (let i = 0; i < list.length; i++) {// i对应获取到的元素数组的下标console.log(list[i]);}// 通过css选择器来获取元素// 通过选择接收let wrap = document.querySelector('.box');console.log(wrap); //控制台中只打印了第一个// 获取多个相同的元素 集合 let wrap1 = document.querySelectorAll('.box');console.log(wrap1);</script>
</body>操作html元素内容
<body><div id="box"><span>不开心</span></div><p class="text">好多内容</p><script>// innerHTML 获取元素的内容（包括标签）let Box = document.getElementById('box');console.log(Box.innerHTML); //<span>不开心</span>let Span = document.getElementsByTagName('span');console.log(Span[0].innerHTML);// 标签[0]被替换Span[0].innerHTML='GO！';// 通过赋值方法，在标签后面添加Span[0].innerHTML += 'come on';let text = document.querySelector('.text');console.log(text);text.innerHTML='123';// 插入标签 innerHTML会解析标签text.innerHTML='<a href="https://www.baidu.com/">点我</a>'// innertext 不解析标签text.innertext='<a href="https://www.baidu.com/">点我</a>'</script>
</body>操作标签属性
<body><div id="box" class="text" title="你好">加油</div><img src="../11.jpg" alt="" class="pic"><script>let Box = document.querySelector('#box');// 截取id名console.log(Box.id);// 获取标题描述console.log(Box.title);// 获取类名 class是关键字，获取classNameconsole.log(Box.className);// 标签自带属性要合理合法（id class title src alt name等）let pic = document.querySelector('.pic');console.log(pic.src);// 赋值修改其他路径pic.src='../22.jpg';</script>
</body>操作样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.tit1{color: antiquewhite;font-size: 20px;background-color: blue;}.wrap{width: 200px;height: 300px;background-color: aqua;}.wr{background-color: brown;width: 100px;height: 100px;}</style>
</head>
<body><h1 class="tit1">不想学习</h1><div class="box text1">123</div><script>let title = document.querySelector('.tit1');// 修改文字颜色title.style.color='skyblue';
// 需要访问元素节点 style属性 先获取样式对象 里面包含css属性// 更改文字大小title.style.fontSize='30px';
// 如果css属性包含连接符- 都删除掉，连接的首字母大写（小驼峰写法）title.style.backgroundColor='aquamarine';// 类名操作let box = document.querySelector('.box');// 使用.className 新加类名，删除类名都会比较麻烦// box.className='wrap';
// 推荐用classList来操作类名// 添加类名box.classList.add('wrap');// 删除类名box.classList.remove('text1');// 有则删 无则加box.classList.toggle('wrap');box.classList.toggle('wr');</script>
</body>
</html>操作节点
<div class="wrap"><p>hello</p></div><script>/*动态操作节点1.创建节点 createElement()2.添加节点 appendChild() 末尾插入3.在某个元素的子节点前添加节点 insertBefore()4.替换节点 replaceChild(替换的值，被替换的值)5.删除节点 removeChild*/let wrap = document.querySelector('.wrap');console.log(wrap);// 创建节点let newP = document.createElement('p');// 添加节点wrap.appendChild(newP);// 在创建的标签里面添加文本内容let text = document.createTextNode('welcome!');// 给newP添加创建的文本内容newP.appendChild(text);// 创建一个新的节点let box = document.createElement('a');box.innerHTML = 'good!'; // wrap.appendChild(box);// 在wrap上第二个子节点前插入 wrap.insertBefore(box,wrap.children[1]);// 打印元素子节点集合console.log(wrap.children);// 替换节点// 创建一个新的节点let bo = document.createElement('h2');// 插入文字在新的h2上bo.innerHTML='一花';// 把wrap第一个子节点替换掉 replaceChild(要替换的，被替换的)wrap.replaceChild(bo,wrap.children[0]);// 删除节点// 把wrap的第三个子节点删除wrap.removeChild(wrap.children[2]);</script>监听事件
| 事件 | 描述 |
| onclick | 点击鼠标左键时触发事件 |
| onmouseover | 鼠标移动到某个元素时触发事件 |
| onmouseout | 鼠标离开某个元素范围时触发事件 |
| onblur | 当前元素失去焦点时触发事件 |
| onfocus | 当某个元素获得焦点时触发事件 |
| onscroll | 当滚动浏览器的滚动条时触发事件 |
绑定事件：触发事件元素.监听事件=function(){ }
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0px;padding: 0px;}.box {width: 100px;height: 100px;background-color: antiquewhite;}/* .box:active{background-color: aquamarine;} */.advertisement{width: 100px;height: 200px;background-color: brown;}.x-code{width: 20px;height: 20px;border: 1px solid palegoldenrod;float: right;text-align: center;}#btn{width: 60px;height: 30px;outline:none;}.wrap{width: 500px;height: 400px;background-color: cadetblue;margin: 20px auto;}</style>
</head><body><div class="box">我是盒子</div><div class="advertisement"><p class="x-code">x</p>广告</div><button id="btn">按钮</button><div class="wrap">盒子</div><div class="wrap">盒子</div><div class="wrap">盒子</div><script>let box = document.querySelector('.box');// 点击事件box.onclick = function () {// console.log(box.innerText);box.style.backgroundColor = 'pink';}// 关闭广告let close = document.querySelector('.x-code'),adv = document.querySelector('.advertisement');// 点击close类名标签close.onclick = function(){// 修改样式 把display属性变成noneadv.style.display = 'none';}// 当鼠标移动到某个元素时触发事件box.onmouseover = function(){console.log('鼠标移进盒子了');}// 当鼠标移出某个元素范围时触发事件box.onmouseout = function(){console.log('鼠标移出盒子了');}// 点击input 获取焦点触发事件btn.onfocus = function(){btn.style.border='1px solid pink';}// 失去焦点触发事件btn.onblur = function(){console.log('失去焦点了');}let wrap = document.querySelector('.wrap')// 滚动滚动条触发事件window.onscroll = function(){console.log('正在滚动滚动条');wrap.style.backgroundColor='pink';}</script>
</body></html>BOM
BOM，全称(Browser Object Model)，浏览器对象模型。
定时器
<body><!-- 定时器 --><script>function fn(){console.log('打印文字中');}// setTimeout 循环一次// 第一个参数：接收回调函数// 第二个参数：延迟时间(ms) 1s=1000mssetTimeout(fn,1000);// setTnterval() 循环多次let time = setInterval(()=>{console.log('呀吼！')},2000) // 每隔两秒执行一次// 清除多次定时器clearInterval(time)// 代码执行十次就暂停let sum = 0;let set = setInterval(()=>{console.log('打印');sum++;// 判断代码是否执行十次 清除定时器if (sum==10){clearInterval(set)}},1000)</script>
</body>重要对象
<script>// 用户当前的url信息console.log(location);// 点击页面文档，跳转对应的地址document.onclick = function(){location.href='https://www.baidu.com/'}// 返回当前窗口上一条历史记录history.back();// 返回下一条历史记录history.forward();// 获取浏览器相关信息console.log(navigator);</script>math对象
<script>// 用户当前的url信息console.log(location);// 点击页面文档，跳转对应的地址document.onclick = function(){location.href='https://www.baidu.com/'}// 返回当前窗口上一条历史记录history.back();// 返回下一条历史记录history.forward();// 获取浏览器相关信息console.log(navigator);// math对象// 圆周率console.log(Math.PI);// Math对象具有数学常数 具有数学属性和方法console.log(Math);// Math.abs() 返回指定数值的绝对值console.log(Math.abs(-10)); //10console.log(Math.abs(null)); //0// 伪随机数 范围：0~1console.log(Math.random()); //0.3485665674792038// 取0~100的随机数let num = Math.random()*100; //88.0133275792085console.log(num);// 取整数 parseIntconsole.log(parseInt(num)); //88// 四舍五入 Math.round()console.log(Math.round(11.5)); //12console.log(Math.round(-22.5)); //-22// 向下取整Math.floorconsole.log(Math.floor(11.5)); //11console.log(Math.floor(-12.6)); //-13// 向上取整Math.ceilconsole.log(Math.ceil(13.5)); //14console.log(Math.ceil(-22.5)); //-22</script>
相关文章：
【前端基础--7】
DOM操作 DOM，全称(Document Object Model)，文档对象模型。 提供操作HTML的方法（操作页面元素） 获取节点 --- 操作元素标签 <body><div id"box">我是盒子标签</div><p class"text"&g…...
微信小程序如何搜索iBeacon设备
1.首先在utils文件夹下创建bluetooth.js和ibeacon.js 2.在 bluetooth.js文件中写入 module.exports {initBluetooth: function () {// 初始化蓝牙模块wx.openBluetoothAdapter({success: function (res) {console.log(蓝牙模块初始化成功);},fail: function (res) {console.l…...
JVM篇：垃圾回收算法
标记清除 通过遍历GC Root后得到不再被引用的对象，对没被引用的对象做一个标记处理，然后对其进行清除。 优点：速度快 缺点：会产生内存碎片，可能会导致空闲的内存足够保存对象，但由于不连续而保存失败。 标…...
2024年数学建模美赛 分析与编程
2024年数学建模美赛 分析与编程 1、本专栏将在2024年美赛题目公布后，进行深入分析，建议收藏； 2、本专栏对2023年赛题，其它题目分析详见专题讨论； 2023年数学建模美赛A题（A drought stricken plant communi…...
05-Nacos-配置中心接入
1、pom依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId></dependency> 2、配置文件 spring:application:name: nacos-config## 当前环境，这个和…...
服务端开发小记02——Maven
这里写目录标题 Maven简介Maven在Linux下的安装Maven常用命令 Maven简介 Apache Maven Project是一个apache的开源项目，是用于构建和管理Java项目的工具包。 用Maven可以方便地创建项目，基于archetype可以创建多种类型的java项目；Maven仓库…...
DjangoURL调度器（一）
一、介绍 当一个用户请求 Django 站点的一个页面，下面是 Django 系统决定执行哪个 Python 代码使用的算法： Django确定要使用的根URLconf模块，一般是在settings中的ROOT_URLCONF设置的值，但是如果传入 HttpRequest 对象具有一个ur…...
Typora 无法导出 pdf 问题的解决
目录 问题描述 解决困难 解决方法 问题描述 我的 Windows 下，以前（Windows 11） Typora 可以顺利较快地由 .md 导出 .pdf 文件，此功能当然非常实用与重要。 然而，有一次电脑因故重装了系统（刷机&#x…...
uniapp封装公共的方法或者数据请求方法
仅供自己参考，不是每个页面都用到这个方法，所以我直接在用到的页面引用该公用方法： 1、新建一个util.js文件 export const address function(options){return new Promise((resolve,reject)>{uni.request({url:"https://x.cxniu.…...
SpringBoot AOP应用（公共字段填充）
背景 在很多场景下，我们对需要对一些公共字段进行赋值操作，如果我们每一个公共字段都进行代码赋值那无疑会增加很多重复无用代码，都会导致我们的 代码臃肿，所以我们使用AOP切面编程，实现功能增强，来完成公…...
NIO案例-聊天室
NIO案例-聊天室 1. 聊天室服务端编写 package com.my.io.chat.server; import java.io.IOException; import java.net.InetSocketAddress; import java.nio.ByteBuffer; import java.nio.channels.*; import java.nio.charset.StandardCharsets; import java.util.Iterato…...
文心一言情感关怀之旅
【AGIFoundathon】文心一言情感关怀之旅，让我们一起来体验吧！ 上传一张照片，用ernie-bot生成专属于你的小故事! 此项目主要使用clip_interrogator获取图片的关键信息，然后将此关键信息用百度翻译API翻译成中文后，使用封装了⼀⾔API的Ernie Bot SDK（ernie-bot）生成故事…...
mac电脑安卓文件传输工具：Android File Transfer直装版
Android File Transfer（AFT）是一款用于在Mac操作系统上与Android设备之间传输文件。它允许用户将照片、音乐、视频和其他文件从他们的Android手机或平板电脑传输到Mac电脑，以及将文件从Mac上传到Android设备。 下载地址：https://w…...
第九篇【传奇开心果系列】beeware的toga开发移动应用示例：人口普查手机应用
传奇开心果博文系列 系列博文目录beeware的toga开发移动应用示例系列博文目录一、项目目标二、安装依赖三、实现应用雏形示例代码四、扩展功能和组件的考量五、添加更多输入字段示例代码六、添加验证功能示例代码七、添加数据存储功能示例代码八、添加数据展示功能示例代码九、…...
14.5 Flash查询和添加数据库数据
14.5 Flash查询和添加数据库数据 在Flash与数据库通讯的实际应用中，如何实现用户的登录与注册是经常遇到的一个问题。登录实际上就是ASP根据Flash提供的数据查询数据库的过程，而注册则是ASP将Flash提供的数据写入数据库的过程。 1.启动Access2003&…...
[C#]winform部署yolov7+CRNN实现车牌颜色识别车牌号检测识别
【官方框架地址】 https://github.com/WongKinYiu/yolov7.git 【框架介绍】 Yolov7是一种目标检测算法，全称You Only Look Once version 7。它是继Yolov3和Yolov4之后的又一重要成果，是目标检测领域的一个重要里程碑。 Yolov7在算法结构上继承了其前…...
VBA技术资料MF111：将表对象转换为正常范围
我给VBA的定义：VBA是个人小型自动化处理的有效工具。利用好了，可以大大提高自己的工作效率，而且可以提高数据的准确度。我的教程一共九套，分为初级、中级、高级三大部分。是对VBA的系统讲解，从简单的入门，到…...
Nginx代理服务器、HTTP调度、TCP/UDP调度、Nginx优化、HTTP错误代码、状态页面、压力测试
1 案例1：Nginx反向代理 1.1 问题 使用Nginx实现Web反向代理功能，实现如下功能： 后端Web服务器两台，可以使用httpd实现Nginx采用轮询的方式调用后端Web服务器两台Web服务器的权重要求设置为不同的值最大失败次数为2，…...
从 React 到 Qwik：开启高效前端开发的新篇章
1. Qwik Qwik 是一个为构建高性能的 Web 应用程序而设计的前端 JavaScript 框架，它专注于提供即时启动性能，即使是在移动设备上。Qwik 的关键特性是它采用了称为“恢复性”的技术，该技术消除了传统前端框架中常见的 hydration 过程。 恢复性是一种序列化和恢复应用程序状态…...
【lodash.js】非常好用高性能的 JavaScript 实用工具库，防抖，深克隆，排序等
前言：lodash是一款前端必须要知道的js库，它里面提供了许多常用的功能和实用的工具函数 基本上我参与的项目中都有lodash，只能说lodash太强大了，lodash.js 提供了超过 300 个实用的工具函数，涵盖了很多常见的编程任务 l…...
未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？
编辑：陈萍萍的公主一点人工一点智能 未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业，其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进，需提前预防假检、错检、漏检，推动智慧生产运维系统数据的流动和现场赋能应用。同时，…...
ESP32读取DHT11温湿度数据
芯片：ESP32 环境：Arduino 一、安装DHT11传感器库 红框的库，别安装错了 二、代码 注意，DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...
Python爬虫（一）：爬虫伪装
一、网站防爬机制概述 在当今互联网环境中，具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类： 身份验证机制：直接将未经授权的爬虫阻挡在外反爬技术体系：通过各种技术手段增加爬虫获取数据的难度…...
Robots.txt 文件
什么是robots.txt？ robots.txt 是一个位于网站根目录下的文本文件（如：https://example.com/robots.txt），它用于指导网络爬虫（如搜索引擎的蜘蛛程序）如何抓取该网站的内容。这个文件遵循 Robots…...
Python Ovito统计金刚石结构数量
大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...
基于Java+VUE+MariaDB实现（Web）仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意：运行前…...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效，稳定，易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...
安卓基础（Java 和 Gradle 版本）
1. 设置项目的 JDK 版本 方法1：通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分，设置 Gradle JDK 方法2：通过 Settings File → Settings... (或 CtrlAltS)…...