【前端】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')) //获取box1
    console.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.fontSize
        console.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.代码案例

猜数字,表白墙,待办事项……下篇博客再战~

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

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

相关文章

Jenkins中支持maven构建遇到仓库报错问题

目的 Jenkins中支持maven构建(Jenkins使用docker安装&#xff09; 问题 1.构建一个maven项目 2.执行报错 /var/lib/jenkins/local_maven_repo/com/sx/root/1.0.4/root-1.0.4.pom.part.lock (No such file or directory) Failed to transfer Could not transfer artifact co…

后端系统开发之——功能完善

原文地址&#xff1a;https://blog.yiming1234.cn/?p830 下面是正文内容&#xff1a; 前言 通过SpringBoot开发用户模块的部分也就差不多要结束了&#xff0c;这一片文章就主要提一些在系统开发中需要注意到的细节部分和功能&#xff0c;也就是剩余的部分。 但是这个专栏只介…

监控系统Prometheus--入门

文章目录 Prometheus特点易于管理监控服务的内部运行状态强大的数据模型强大的查询语言PromQL高效可扩展易于集成可视化开放性 Prometheus架构Prometheus 生态圈组件架构理解 Prometheus的安装安装Prometheus Server上传安装包解压安装包修改配置文件 prometheus.yml 安装Pushg…

linux下docker容器的使用

1、根据已有镜像images创建容器 1.1、查看镜像 如果是接手的别人的项目&#xff0c;需要从以往的images镜像中创建新容器&#xff0c;使用命令查看当前机器上的docker镜像&#xff1a; docker images1.2、创建容器 使用docker run 根据images镜像名创建容器&#xff0c;命令…

查看Scala类的方法

文章目录 一、概述如何查看Scala类的方法二、使用Scala文档查看类的方法三、使用反射机制查看类的方法 一、概述如何查看Scala类的方法 本文介绍了在Scala中查看Int类方法的两种方法&#xff1a;使用Scala标准库文档和使用反射机制。通过Scala标准库文档&#xff0c;您可以方便…

[Netty实践] 请求响应同步实现

目录 一、介绍 二、依赖引入 三、公共部分实现 四、server端实现 五、client端实现 六、测试 一、介绍 本片文章将实现请求响应同步&#xff0c;什么是请求响应同步呢&#xff1f;就是当我们发起一个请求时&#xff0c;希望能够在一定时间内同步&#xff08;线程阻塞&am…

操作系统面经-用户态和内核态

字节实习生带你面试&#xff0c;后台私信可以获得面试必过大法&#xff01;&#xff01; 根据进程访问资源的特点&#xff0c;我们可以把进程在系统上的运行分为两个级别&#xff1a; 用户态(User Mode) : 用户态运行的进程可以直接读取用户程序的数据&#xff0c;拥有较低的…

启动Vue-demo时引发的一系列问题—解决办法

目录 1.初始遇到的问题&#xff1a;输入npm run dev 1.治标的解决方法 2.治本的解决方法 第一步&#xff1a;检查是否安装了cnpm 第二步&#xff1a;手动找到cnpm目录 第三步&#xff1a;配置系统环境变量 第四步&#xff1a;查看是否安装成功 1.初始遇到的问题&#xf…

JavaSE:类与对象

目录 一、前言 二、类与对象的介绍 1.类的定义格式 三、类的实例化 1.类的实例化介绍 2.成员初始化 3.类中方法的实现 四、封装 1.private实现封装 2.getter和setter方法 五、构造方法的使用 1.构造方法的介绍 2.构造方法的特性 六、this引用 1.this的介绍 2.th…

LeetCode---126双周赛

题目列表 3079. 求出加密整数的和 3080. 执行操作标记数组中的元素 3081. 替换字符串中的问号使分数最小 3082. 求出所有子序列的能量和 一、求出加密整数的和 按照题目要求&#xff0c;直接模拟即可&#xff0c;代码如下 class Solution { public:int sumOfEncryptedInt…

Oracle Data Guard常用命令

--查询数据库角色和保护模式 select database_role,switchover_status from v$database; --切换备库为主库&#xff08;切换后&#xff0c;主库为mount状态&#xff09; --TO PRIMARY alter database commit to switchover to primary; --SESSIONS ACTIVE alter database comm…

如何保障消息一定能发送到RabbitMQ?

我们知道&#xff0c;RabbitMQ的消息最终是存储在Queue上的&#xff0c;而在Queue之前还要经过Exchange&#xff0c;那么这个过程中就有两个地方可能导致消息丢失。第一个是Producer到Exchange的过程&#xff0c;第二个是Exchange到Queue的过程。 为了解决这个问题&#xff0c…

大学期末考试搜题软件?这4款足够解决问题 #知识分享#笔记#职场发展

当代大学生面临着繁重的学业压力和海量的知识点&#xff0c;如何高效地进行学习和搜题成了他们关注的焦点。幸运的是&#xff0c;随着科技的不断进步&#xff0c;我们有越来越多的日常搜题和学习软件可以帮助我们更好地应对这些挑战。在本文中&#xff0c;我将为大家介绍10款备…

皓学IT:WEB06_ EL表达式JSTL标签库

一、EL表达式 1.1.特点 是一个由java开发的工具包 用于从特定域对象中读取并写入到响应体开发任务&#xff0c;不能向域对象中写入。 EL工具包自动存在Tomcat的lib中&#xff08;el-api.jar&#xff09;&#xff0c;开发是可以直接使用&#xff0c;无需其他额外的包。 标准…

千万不要错过这9款能让你快速写作成长的宝藏软件…… #科技#学习方法#学习

很多小伙伴想要自己做自媒体&#xff0c;但是却不知道从何下手&#xff0c;今天我就和大家分享一波好用的一些自媒体工具。 1.红桃写作 这是一个微信公众号 面向专业写作领域的ai写作工具&#xff0c;写作助手包括&#xff0c;ai论文,ai开题报告、ai公文写作、ai商业计划书、…

每日五道java面试题之springboot篇(三)

目录&#xff1a; 第一题. Spring Boot 中的监视器是什么&#xff1f;第二题. 如何在 Spring Boot 中禁用 Actuator 端点安全性&#xff1f;第三题. 我们如何监视所有 Spring Boot 微服务&#xff1f;第四题. 什么是 WebSockets&#xff1f;第五题. 什么是 Spring Data ? 第一…

Qt教程 — 3.6 深入了解Qt 控件:Display Widgets部件(2)

目录 1 Display Widgets简介 2 如何使用Display Widgets部件 2.1 QTextBrowser组件-简单的文本浏览器 ​2.2 QGraphicsView组件-简单的图像浏览器 Display Widgets将分为两篇文章介绍 文章1&#xff08;Qt教程 — 3.5 深入了解Qt 控件&#xff1a;Display Widgets部件-CSDN…

使用POI以OLE对象的形式向excel中插入附件(pdf为例)

前言&#xff1a; 最近在使用easyExcel操作excel文件时&#xff0c;一直想找到一个方法可以往excel中填充附件&#xff0c;但是目前只发现POI可以插入附件&#xff0c;于是将方法记录如下&#xff1a; 实现&#xff1a; 这个方法主要是使用 Apache POI 的 HSSFWorkbook 类来…

带有GUI界面的电机故障诊断(MSCNN-BILSTM-ATTENTION模型,TensorFlow框架,有中文注释,带有六种结果可视化)

本次创作最主要是在MSCNN-BILSTM-ATTENTION模型&#xff08;可轻松替换为其它模型&#xff09;基础上&#xff0c;搭建GUI测试界面&#xff0c;方便对你想要测试的数据的进行测试&#xff0c;同时进行了全面的结果可视化&#xff1a;1.训练集和测试集的准确率曲线&#xff0c;2…

第28章 ansible的使用

第28章 ansible的使用 本章主要介绍在 RHEL8 中如何安装 ansible 及 ansible的基本使用。 ◆ ansible 是如何工作的 ◆ 在RHEL8 中安装ansible ◆ 编写 ansible.cfg 和清单文件 ◆ ansible 的基本用法 文章目录 第28章 ansible的使用28.1 安装ansible28.2 编写ansible.cfg和清…