【前端】Web API

1.Web API 简介

JS分为三大部分:

  • ESCMScript:基础语法部分
  • DOM API:操作页面结构
  • BOM API:操作浏览器                                                    

Web API包含 DOM + BOM

2.DOM基本概念

DOM全称 Document Object Model

重要概念:

  • 文档:一个页面就是一个文档,使用document表示
  • 元素:页面中所有的标签都称为元素,使用element表示
  • 节点:网页中所有的内容都可以称为节点(标签节点,注释节点,文本节点,属性节点),使       用node表示

3.获取元素

querySelector & querySelectorAll

<body><div class="box1">box1</div><div class="box2">box2</div><h3><span><input type="text"></span></h3>
</body>
<script>console.log(document.querySelector('.box1')) //获取box1console.log(document.querySelector('h3').querySelector('span')) //获取span中的内容console.log(document.querySelector('h3').querySelector('span').querySelector('input')) //获取input中的内容console.log(document.querySelectorAll('div')) //获取两个div中的内容
</script>

4.事件

三要素:

  • 事件源:哪个元素触发的
  • 事件类型:点击 / 选中 / 修改
  • 事件处理程序:进一步如何处理(往往是一个回调函数)

4.1点击事件

<script>//事件源let button = document.querySelector('input')//绑定事件类型button.onclick = function(){ //点击事件//设定事件处理程序alert('hello')}
</script>

4.2键盘事件

1> onkeydown

不区分大小写

<body><input type="text">
</body>
<script>//事件源let input = document.querySelector('input')//绑定事件类型input.onkeydown = function(event) {//设定事件处理程序console.log("键盘正在按下")let a = event.keyCode;console.log(a)let b = String.fromCharCode(a)console.log(b)}
</script>

2> onkeypress

类似onkeydown,但是区分大小写

3> onkeyup

<body><input type="text" onkeyup="myOnkeyUp">
</body>
<script>//事件源let input = document.querySelector('input')//绑定事件类型function myOnkeyUp() {//设定事件处理程序console.log("按键被抬起")}
</script>

注意:并不是所有按键都可用上述三个事件表示,还有ctlKey、altKey、shiftKey等

5.获取/修改属性

5.1基本元素

<body><img src="../html/src/休闲.jpg" alt="图片加载失败" title="this is a photo" width="100px" height="100px">
</body>
<script>//获取元素属性let img = document.querySelector('img')console.dir(img)//修改元素属性img.title = "revised title"//绑定事件img.onclick = function() {alert("点击图片")}
</script>

5.2表单元素

1> 音乐播放器

<body> <input class="btn" type="button" value="播放" onclick="onClick()">
</body>
<script>let btn = document.querySelector('.btn')//点击“播放”,变成“暂停”//点击“暂停”,变成“播放”function onClick() {if(btn.value == "播放") {btn.value = "暂停"} else {btn.value = "播放"}}
</script>

2> 计数器

<body><input class="input" type="text" value="0"><input class="add" type="button" value="+1" onclick="Add()"><input class="sub" type="button" value="-1" onclick="Sub()">
</body>
<script>  function Add() {let num = document.querySelector('.input') //获取num.value = parseInt(num.value) + 1  //修改}function Sub() {let num = document.querySelector('.input')num.value = parseInt(num.value) - 1}
</script>

3> 全选按钮

<body><input class="all" type="checkbox" onclick="selectAll()">全选<br><input class="select" type="checkbox">选项一<br><input class="select" type="checkbox">选项二<br><input class="select" type="checkbox">选项三<br><input class="select" type="checkbox">选项四<br>
</body>
<script>let all = document.querySelector('.all')let select = document.querySelectorAll('.select')//所有选项全选,全选按钮选中function selectAll() {for(i = 0; i < select.length; i++) {select[i].checked = all.checked  //改为选中状态}}//有一个选项没选,全选按钮取消for(i = 0; i < select.length; i++) {select[i].onclick = function() {all.checked = isSelectAll(select)}}function isSelectAll(select) {for(i = 0; i < select.length; i++) {if(select[i].checked == false) {return false}}return true}console.dir(all)
</script>

5.3样式属性

1> 行内样式操作

通过style直接在标签上指定样式,优先级很高。这种方式修改只能影响到特定样式,其他内联样式的值不变

//点击文字放大字体

<body><div style="font-size: 10px;" onclick="changeSize()">哈哈哈</div>
</body>
<script>function changeSize() {let elem = document.querySelector('div')console.log(elem.style)//获取属性let size = elem.style.fontSizeconsole.log(typeof(size)) //string//修改属性size = parseInt(elem.style.fontSize) + 10//法一elem.style.fontSize = size + "px"//法二elem.style.cssText = "font-size:" + size + "px"}
</script>

2> 类名样式操作

//开启夜间模式

//style标签在head标签中
<style>//白天模式.light {background-color: aliceblue;color: black;width: 100%;height: 100%;}//夜间模式.dark {background-color: black;color: white;width: 100%;height: 100%;}body,html {width: 200px;height: 200px;}
</style>
<body><div class="light" onclick="changeStyle()">这是一段话<br>这是一段话<br>这是一段话<br>这是一段话<br>这是一段话<br></div>
</body>
<script>function changeStyle() {let elem = document.querySelector('div')//当前样式为白天模式,切换为夜间模式//否则切换为白天模式if(elem.className == "light") {elem.className = "dark"} else {elem.className = "light"}}
</script>

 

6.操作节点

6.1插入节点

  1. 创建元素节点
  2. 使用appendChildinsertBefore把元素节点插入到dom树中

注意:如果针对一个节点插入两次,则只有最后一次生效

<body><div><p class="p1">这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p></div>
</body>
<script>//创建新节点let elem1 = document.createElement('h1')elem1.innerHTML = "插入指定节点后"let elem2 = document.createElement('h2')elem2.innerHTML = "插入指定节点前"//使用appendChild将节点插入到dom树中指定节点后let div = document.querySelector('div')div.appendChild(elem1)//使用insertBefore将节点插入到dom树中指定节点前//如果指定节点为null,则默认插入节点末尾div.insertBefore(elem2,document.querySelector('.p2'))div.insertBefore(elem2,document.querySelector('.p1'))
</script>

6.2删除节点

<body><div class="container"><div>1</div><div>2</div><div>3</div><div id="delete">4</div></div>
</body>
<script>let parent = document.querySelector('.container')let child = document.querySelector('#delete')//没有父子关系,删除会报错let elem = parent.removeChild(child) //删除console.dir(elem)//被删除的节点只是从dom树中删除了,仍存在内存中,可随时加入到dom树中parent.appendChild(elem) //加入
</script>

7.代码案例

猜数字,表白墙,待办事项……

详见代码案例

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【JAVAEE学习】探究Java中多线程的使用和重点及考点

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

IDEA2021.1.2破解无限试用30天破解IDEA

安装包下载 IDEA安装包&#xff1a;Other Versions - IntelliJ IDEA破解包下载&#xff1a;文件 密码:c033 开始激活 IDEA 2021.1.3 运行, 中间会先弹出一个注册框&#xff0c;我们勾选 Evaluate for free, 点击 Evaluate&#xff0c; 先试用30天: 注意&#xff0c;如果没有…

vue3封装Element表格自适应

表格高度自适应 分页跟随表格之后 1. 满屏时出现滚动条 2. 不满屏时不显示滚动条 坑 表格设置maxHeight后不出现滚动条 解决方案 表格外层元素设置max-height el-table–fit 设置高度100% .table-box {max-height: calc(100% - 120px); } .el-table--fit {height: 100%; }示例代…

李宏毅【生成式AI导论 2024】第6讲 大型语言模型修炼_第一阶段_ 自我学习累积实力

背景知识:机器怎么学会做文字接龙 详见:https://blog.csdn.net/qq_26557761/article/details/136986922?spm=1001.2014.3001.5501 在语言模型的修炼中,我们需要训练资料来找出数十亿个未知参数,这个过程叫做训练或学习。找到参数后,我们可以使用函数来进行文字接龙,拿…

Acer宏碁暗影骑士擎AN515-58笔记本电脑工厂模式原厂Win11系统ISO镜像安装包下载

宏基AN515-58原装出厂OEM预装Windows11系统工厂包&#xff0c;恢复出厂时开箱状态一模一样&#xff0c;带恢复还原功能 链接&#xff1a;https://pan.baidu.com/s/1iCVSYtList-hPqbyTyaRqQ?pwdt2gw 提取码&#xff1a;t2gw 宏基原装系统自带所有驱动、NITROSENSE风扇键盘灯…

基于TensorFlow的花卉识别(算能杯)%%%

Anaconda Prompt 激活 TensorFlow CPU版本 conda activate tensorflow_cpu //配合PyCharm环境 直接使用TensorFlow1.数据分析 此次设计的主题为花卉识别&#xff0c;数据为TensorFlow的官方数据集flower_photos&#xff0c;包括5种花卉&#xff08;雏菊、蒲公英、玫瑰、向日葵…

Python拆分PDF、Python合并PDF

WPS能拆分合并&#xff0c;但却是要输入编辑密码&#xff0c;我没有。故写了个脚本来做拆分&#xff0c;顺便附上合并的代码。 代码如下&#xff08;extract.py) #!/usr/bin/env python """PDF拆分脚本(需要Python3.10)Usage::$ python extract.py <pdf-fil…

以XX医院为例的医疗建筑能效管理系统【建筑能耗 供电可靠 】

一、行业背景 二、行业特点 1.供电可靠性要求高&#xff1a;医院配电系统复杂&#xff0c;门诊、急救、手术室、ICU/CCU、血液透析等场合特一级和一级负荷比较多&#xff0c;一旦发生故障会造成严重影响&#xff0c;对配电可靠性要求极高。 2.能耗水平高&#xff1a;医院能耗…

2024 蓝桥打卡Day25

CCFCSP算法练习 202305-1 重复局面 202305-2 矩阵运算 202303-1 田地丈量 202303-2 垦田计划

GEE教程——如何将一个指定区域的矢量信息添加到矢量中

问题来源 1 - 将光栅文件转换为矢量文件; 2 - 复制用于切割光栅的矢量/多边形的属性,并将其添加到转换后生成的每个多边形中。 这里的主要问题是我们对一个区域进行筛选和后续运算的时候,需要将其研究区的属性进行复制,传递给后续栅格转化矢量后的数据中。下面就是我们矢…

由浅到深认识Java语言(25):正则表达式

该文章Github地址&#xff1a;https://github.com/AntonyCheng/java-notes 在此介绍一下作者开源的SpringBoot项目初始化模板&#xff08;Github仓库地址&#xff1a;https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址&#xff1a;https://blog.c…

LabVIEW智能降噪系统

LabVIEW智能降噪系统 随着噪声污染问题的日益严重&#xff0c;寻找有效的降噪技术变得尤为关键。介绍了一种基于LabVIEW平台开发的智能降噪系统&#xff0c;该系统能够实时采集环境噪声&#xff0c;并通过先进的信号处理技术实现主动降噪&#xff0c;从而有效改善生活和工作环…

PHP开发全新29网课交单平台源码修复全开源版本,支持聚合登陆易支付

这是一套最新版本的PHP开发的网课交单平台源代码&#xff0c;已进行全开源修复&#xff0c;支持聚合登录和易支付功能。 项目 地 址 &#xff1a; runruncode.com/php/19721.html 以下是对该套代码的主要更新和修复&#xff1a; 1. 移除了论文编辑功能。 2. 移除了强国接码…

离线linux服务器安装mysql8

本文的服务器环境&#xff1a;openEuler毛坯版的&#xff0c;很多常用的指令都没有预装&#xff0c;比如rpm、tar等等&#xff0c;没有网络坏境&#xff0c;需要自己手动配置本地yum仓库&#xff0c;安装相关指令 1、检查服务器是否已经安装了MySQL 1.1、查询mysql以安装的相关…

MYSQL8.0安装、配置、启动、登入与卸载详细步骤总结

文章目录 一.下载安装包1.方式一.官网下载方式二.网盘下载 二.解压安装三.配置1.添加环境变量 三.验证安装与配置成功四.初始化MYSQL五.注册MySQL服务六.启动与停止MYSQL服务七.修改账户默认密码八.登入MySQL九.卸载MySQL补充&#xff1a;彻底粉碎删除Mysql 一.下载安装包 1.方…

蓝桥杯-卡片换位

solution 有一个测试点没有空格&#xff0c;要特别处理&#xff0c;否则会有一个测试点运行错误&#xff01; 还有输入数据的规模在变&#xff0c;小心顺手敲错了边界条件 #include<iostream> #include<string> #include<queue> #include<map> #incl…

动态规划入门(数字三角形模型)

备战2024年蓝桥杯&算法学习 -- 每日一题 Python大学A组 试题一&#xff1a;摘花生 试题二&#xff1a;最低通行费用 试题三&#xff1a;方格取数 试题四&#xff1a;传纸条 试题一&#xff1a;摘花生 【题目描述】 Hello Kitty想摘点花生送给她喜…

持续集成流水线介绍(CI)

目录 一、概述 二、持续集成的典型操作流程 2.1 概述 2.2 持续集成的操作流程图 2.3 持续集成关键流程说明 三、构建持续集成流水线的方式 3.1 依托云厂商能力 3.2 采用开源产品 3.3 企业自研 四、构建持续化集成流水线 4.1 基于GitHub的持续集成流水线&#xff08;公…

Java毕业设计-基于springboot开发的招聘信息管理系统平台-毕业论文+答辩PPT(附源代码+演示视频)

文章目录 前言一、毕设成果演示&#xff08;源代码在文末&#xff09;二、毕设摘要展示1、开发说明2、需求分析3、系统功能结构 三、系统实现展示1、系统功能模块2、管理员功能模块3、企业后台管理模块4、用户后台管理模块 四、毕设内容和源代码获取总结 Java毕业设计-基于spri…

Tomcat项目创建 以及 在IDEA当中集成Tomcat

一: 有关Tomcat的WEB项目创建 TOMCAT项目的创建有两种方式, 第一种是利用骨架进行创建, 第二种是利用填补进行相应的创建, 不适用骨架进行创建 ,在这里主要聊第二种 (使用IDEA版本为2023) 1. 创建MAVEN项目, 非骨架形式 2.在相应的pom文件当中设置打包方式 为 war包的打包形…