【web APIs】1、(学习笔记)有案例!

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、概念
  • 二、使用步骤
    • 1.获取DOM对象
    • 2.操作元素内容
    • 3.属性修改
      • 3.1.常用属性修改
      • 3.2.控制样式属性
      • 3.3.操作类名(className) 操作CSS
      • 3.4.操作表单元素属性
      • 3.5.自定义属性
    • 4.间歇函数
    • 5.案例举例
      • 5.1.随机抽奖
      • 5.2.用户注册倒计时
      • 5.3.轮播图定时版播放
  • 总结


前言

ECMAScript 简称 ES 它提供了一套语言标准规范,如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现,并且在此基础上又扩展一些实用的功能,这些被扩展出来的内容我们称为 Web APIs。

一、概念

1.ECMAScript 与 JavaScript 的关系
在这里插入图片描述
ECMAScript 运行在浏览器中然后再结合 Web APIs 才是真正的 JavaScript,Web APIs 的核心是 DOM 和 BOM。

2.DOM 树
在这里插入图片描述

  • 【元素节点】其实就是 HTML 标签,如上图中 head、div、body 等都属于元素节点。

  • 【属性节点】是指 HTML 标签中的属性,如上图中 a 标签的 href 属性、div 标签的 class 属性。

  • 【文本节点】是指 HTML 标签的文字内容,如 title 标签中的文字。

  • 【根节点】特指 html 标签。

  • 其它…

二、使用步骤

1.获取DOM对象

  1. querySelector 满足条件的第一个元素

  2. querySelectorAll 满足条件的元素集合 返回伪数组

  3. 了解其他方式
    getElementById
    getElementsByTagName

代码如下(示例):

const p = document.querySelector('p')  // 获取第一个p元素
const lis = document.querySelectorAll('li')  // 获取第一个p元素

2.操作元素内容

通过修改 DOM 的文本内容,动态改变网页的内容。

  1. innerText 将文本内容添加/更新到任意标签位置,文本中包含的标签不会被解析。
  2. innerHTML 将文本内容添加/更新到任意标签位置,文本中包含的标签会被解析。

代码如下(示例):

intro.innerHTML = '嗨~ 我叫韩梅梅!'
intro.innerHTML = '<h4>嗨~ 我叫韩梅梅!</h4>'

3.属性修改

3.1.常用属性修改

  • 直接能过属性名修改,最简洁的语法
 pic.src = './images/lion.webp'pic.width = 400;pic.alt = '图片不见了...'

3.2.控制样式属性

  • 应用【修改样式】,通过修改行内样式 style 属性,实现对样式的动态修改。如要遇到 css 属性中包含字符 - 时,要将 -
    去掉并将其后面的字母改成大写,如 background-color 要写成 box.style.backgroundColor
// 获取 DOM 节点const box = document.querySelector('.intro')box.style.color = 'red'box.style.width = '300px'
// css 属性的 - 连接符与 JavaScript 的 减运算符
// 冲突,所以要改成驼峰法box.style.backgroundColor = 'pink'

3.3.操作类名(className) 操作CSS

// 获取 DOM 节点const box = document.querySelector('.intro')box.className = 'pink'let box = document.querySelector('div')
// add是个方法 添加  追加box.classList.add('active')
// remove() 移除 类box.classList.remove('one')
// 切换类box.classList.toggle('one')

3.4.操作表单元素属性

  • 获取:DOM对象.属性名
  • 设置:DOM对象.属性名= 新值
// 1. 获取元素let input = document.querySelector('input')
// 2. 取值或者设置值  得到input里面的值可以用 value// console.log(input.value)input.value = '小米手机'input.type = 'password'// 2. 启用按钮let btn = document.querySelector('button')
// disabled 不可用   =  false  这样可以让按钮启用btn.disabled = false// 3. 勾选复选框let checkbox = document.querySelector('.agree')checkbox.checked = false

3.5.自定义属性

  • 标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如:
    disabled、checked、selected
  • 自定义属性:
    -在html5中推出来了专门的data-自定义属性
  • 在标签上一律以data-开头
    -在DOM对象上一律以dataset对象方式获取
 <div data-id="1"> 自定义属性 </div><script>// 1. 获取元素let div = document.querySelector('div')// 2. 获取自定义属性值console.log(div.dataset.id)</script>

4.间歇函数

setInterval 是 JavaScript 中内置的函数,它的作用是间隔固定的时间自动重复执行另一个函数,也叫定时器函数。

<script>// 1. 定义一个普通函数function repeat() {console.log('不知疲倦的执行下去....')}// 2. 使用 setInterval 调用 repeat 函数// 间隔 1000 毫秒,重复调用 repeatsetInterval(repeat, 1000)
</script>

5.案例举例

5.1.随机抽奖

<body><div class="wrapper"><strong>传智教育年会抽奖</strong><h1>一等奖:<span id="one">???</span></h1><h3>二等奖:<span id="two">???</span></h3><h5>三等奖:<span id="three">???</span></h5></div><script>//1.随机函数function randam1(n, m) {return Math.floor(Math.random() * (m - n + 1) + n)}//已知数组长度Nfunction randam2(N) {return Math.floor(Math.random() * N)}console.log(randam1(1, 4));                          //M  floor//2.获取元素const arr = ['张飞', '关羽', '刘备', '黄忠', '诸葛亮', '周瑜']const h1 = document.querySelector('h1')const h3 = document.querySelector('h3')const h5 = h3.nextElementSibling//3.调用函数并在数组中删除已选内容,再在页面中更改内容 重复此步骤let a1 = randam2(arr.length)                      //leth1.innerHTML = `一等奖:${arr[a1]}`arr.splice(a1, 1)let a3 = randam2(arr.length)h3.innerHTML = `二等奖:${arr[a3]}`arr.splice(a3, 1)let a5 = randam2(arr.length)h5.innerHTML = `三等奖:${arr[a5]}`//可以获取 one two three 然后更改内容one.innerHTML=arr[a1]</script>
</body>

5.2.用户注册倒计时

<body><textarea name="" id="" cols="30" rows="10">用户注册协议欢迎注册成为京东用户!在您注册过程中,您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议,请您务必仔细阅读、充分理解协议中的条款内容后再点击同意(尤其是以粗体或下划线标识的条款,因为这些条款可能会明确您应履行的义务或对您的权利有所限制)。【请您注意】如果您不同意以下协议全部或任何条款约定,请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息,阅读并点击同意上述协议且完成全部注册流程后,即表示您已充分阅读、理解并接受协议的全部内容,并表明您同意我们可以依据协议内容来处理您的个人信息,并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方(详情查看</textarea><br><button class="btn">我已经阅读用户协议(5)</button><script>const btn = document.querySelector('.btn')let timeId = 5btn.innerHTML = `我已经阅读用户协议(5)`btn.disabled = true                     //disabledconst n = setInterval(function () {timeId--btn.innerHTML = `我已经阅读用户协议(${timeId})`if (timeId === -1) {clearInterval(n)btn.innerHTML = `同意`btn.disabled = flase}}, 1000)</script>
</body>

5.3.轮播图定时版播放

<body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了?</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>// 1. 初始数据const sliderData = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了?', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说!', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题!!!', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },]//2.获取元素const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')const sdf = document.querySelector('.slider-footer ')const li = document.querySelectorAll('.slider-indicator li')let i = 0//3.轮播图定时版function render(n) {const sliderData = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了?', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说!', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题!!!', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },]img.src = sliderData[n].urlp.innerHTML = `${sliderData[n].title}`sdf.style.background = sliderData[n].color          //styledocument.querySelector('.active').classList.remove('active')li[n].classList.add('active')}setInterval(function () {i = i >= sliderData.length ? 0 : i                  //=render(i)i++}, 1000)// document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')</script>
</body>

总结

提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Mycat核心教程--ZooKeeper集群搭建【三】

Mycat核心教程--ZooKeeper集群搭建 八、 ZooKeeper集群搭建8.1.ZooKeeper简介8.2.数据复制的好处8.3.Zookeeper设计目的8.4.zookeeper集群包括3种角色8.4.1.Leader角色8.4.2.Follower 角色8.4.3.Observer 角色 8.5.zookeeper集群工作流程8.6.zookeeper集群节点数量为奇数&#…

如何选择适合的工具,将由图片合成的PDF转为Excel?

在数字化时代&#xff0c;PDF文件已经成为我们日常工作中不可或缺的一部分。然而&#xff0c;有时候我们需要将这些PDF文件中的图片转换成Excel格式&#xff0c;以便进行进一步的数据分析和处理。这时&#xff0c;选择一款适合的由图片组成的PDF转Excel工具就显得尤为重要。本文…

mysql order by布尔盲注

什么是order by 在MySQL支持使用ORDER BY语句对查询结果集进行排序处理&#xff0c;使用ORDER BY语句不仅支持对单列数据的排序&#xff0c;还支持对数据表中多列数据的排序。语法格式如下 select * from 表名 order by 列名(或者数字) asc&#xff1b;升序(默认升序) selec…

东莞IBM服务器维修之IBM x3630 M4阵列恢复

记录东莞某抖音电商公司送修一台IBM SYSTEM X3630 M4文档服务器RAID6故障导致数据丢失的恢复案例 时间&#xff1a;2024年02月20日&#xff0c; 服务器品牌&#xff1a;IBM System x3630 M4&#xff0c;阵列卡用的是DELL PERC H730P 服务器用途和用户位置&#xff1a;某抖音电…

深度学习目标检测】二十、基于深度学习的雾天行人车辆检测系统-含数据集、GUI和源码(python,yolov8)

雾天车辆行人检测在多种场景中扮演着至关重要的角色。以下是其作用的几个主要方面&#xff1a; 安全性提升&#xff1a;雾天能见度低&#xff0c;视线受阻&#xff0c;这使得驾驶者和行人在道路上的感知能力大大降低。通过车辆行人检测技术&#xff0c;可以在雾天条件下及时发现…

GEE数据集——全球 30 米不透水表面动态数据集 (GISD30)

全球 30 米不透水表面动态数据集 (GISD30) 全球 30 米不透水表面动态数据集 (GISD30) 为了解 1985 年至 2020 年全球不断变化的不透水表面景观提供了宝贵的资源。该数据集在城市可持续发展、人为碳排放评估和全球生态环境建模等领域具有深远的科学意义和实际应用价值。GISD30 是…

高数考研 -- 公式总结(更新中)

1. 两个重要极限 (1) lim ⁡ x → 0 sin ⁡ x x 1 \lim _{x \rightarrow 0} \frac{\sin x}{x}1 limx→0​xsinx​1, 推广形式 lim ⁡ f ( x ) → 0 sin ⁡ f ( x ) f ( x ) 1 \lim _{f(x) \rightarrow 0} \frac{\sin f(x)}{f(x)}1 limf(x)→0​f(x)sinf(x)​1. (2) lim ⁡…

ABAP 发送带EXCEL邮件

前言 没啥特殊需求&#xff0c;就是有个库龄报表用户想整邮件发送 实现 用的最简单的XLS文件作为excel附件发送出去 观察XLS文件的纯文本格式&#xff0c;每列之间用TAB制表符分隔&#xff0c;每行之间用回车符分隔 思路也比较明确&#xff0c;在SAP中实现这种格式&#xf…

命名元组(python)

命名元组与元组的差异&#xff0c;命名元组和字典&#xff0c;哪个效率更高。 (笔记模板由python脚本于2024年02月26日 12:31:36创建&#xff0c;本篇笔记适合熟悉python元组和字典的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ F…

面试redis篇-13Redis为什么那么快

Redis是纯内存操作,执行速度非常快采用单线程,避免不必要的上下文切换可竞争条件,多线程还要考虑线程安全问题使用I/O多路复用模型,非阻塞IOI/O多路复用模型 Redis是纯内存操作,执行速度非常快,它的性能瓶颈是网络延迟而不是执行速度, I/O多路复用模型主要就是实现了高效…

Lua速成(2)

一、流程控制 Lua 编程语言流程控制语句通过程序设定一个或多个条件语句来设定。在条件为 true 时执行指定程序代码&#xff0c;在条件为 false 时执行其他指定代码。 控制结构的条件表达式结果可以是任何值&#xff0c;Lua认为false和nil为假&#xff0c;true和非nil为真。 …

C++ list详解以及模拟实现

目录 1.list的使用 1.1list的定义 1.2list的使用 1.3list iterator使用 1.4list capacity 1.5list element access 1.6list增删查改 2.list迭代器失效问题 3.list的模拟实现 1.list的使用 1.1list的定义 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容…

探索便捷办公新选择:ONLYOFFICE 桌面编辑器

目录 引言 1. ONLYOFFICE 桌面编辑器简介 2. 功能特点 2.1 多格式支持 2.2 实时协作编辑 2.3 兼容性与格式保持 2.4 丰富的编辑功能 3. 使用方法 3.1 下载安装 3.2 打开文档 3.3 编辑文档 3.4 保存和共享 4. 注意事项 4.1 版本更新 4.2 网络连接 4.3 安全性 5.…

matlab 方向向量约束的PCA快速粗配准

目录 一、算法原理二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的GPT爬虫。 一、算法原理 该方法由本人原创,目前尚未见有相关论文用到。具体原理看代码即可。 二、代码实现 clc;clear; %% ------…

rtthread stm32h743的使用(一)新工程建立

我们要在rtthread studio 开发环境中建立stm32h743xih6芯片的工程。我们使用一块stm32h743及fpga的核心板完成相关实验&#xff0c;核心板如图&#xff1a; 1.打开rtthread studio填写芯片型号及调试口&#xff0c;我们的调试串口为USART1_PA9,PA10。 2.编译新工程并且下载 …

C++:类与对象(2)

创作不易&#xff0c;感谢三连&#xff01; 一、六大默认成员函数 C为了弥补C语言的不足&#xff0c;设置了6个默认成员函数 二、构造函数 2.1 概念 在我们学习数据结构的时候&#xff0c;我们总是要在使用一个对象前进行初始化&#xff0c;这似乎已经成为了一件无法改变的…

ConvNeXt V2:用MAE训练CNN

论文名称&#xff1a;ConvNeXt V2: Co-designing and Scaling ConvNets with Masked Autoencoders 发表时间&#xff1a;CVPR2023 code链接&#xff1a;代码 作者及组织: Sanghyun Woo&#xff0c;Shoubhik Debnath来自KAIST和Meta AI。 前言 ConvNextV2是借助MAE的思想来训练…

JSP实现数据传递与保存(一)

一、Web开发步骤 1.1两类模式 后端——————前端 先有前端&#xff0c;前端用的时候直接调用 后端已实现注册接口&#xff0c;接口名为doRegister.jsp 前端此时&#xff1a; 前端的form表单中的action提交地址就只能填doRegister.jsp&#xff0c;即&#xff1a; <f…

C++面试宝典第32题:零钱兑换

题目 给定不同面额的硬币coins和一个总金额amount,编写一个函数来计算可以凑成总金额所需的最少的硬币个数。如果没有任何一种硬币组合能组成总金额,则返回-1。说明:你可以认为每种硬币的数量是无限的。 示例1: 输入:coins = [1, 2, 5], amount = 11 输出:3 解释:11 = …