致自己：WebAPI学习笔记一

最新推荐文章于 2023-04-02 09:22:48 发布
最新推荐文章于 2023-04-02 09:22:48 发布
阅读量338 收藏 2
点赞数 1
文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_42285508/article/details/123648889
版权

一、Web API的认识

1、作用和分类

1、作用：使用JS去操作html和浏览器

2、分类：

  • DOM：文档对象模型
  • BOM：浏览器对象模型

2、什么是DOM

1、DOM：Document Object Model，即文档对象模型，用来呈现以及与任意html或xml文档交互的API，DOM是浏览器提供的一套专门用来操作网页内容的功能。

2、DOM作用：开发网页内容特效、实现用户交互。

3、DOM树

1、DOM树：将HTML文档以树状结构直观的表现出来，称之为文档树或者DOM树。

2、作用：文档树直观的体现了标签与标签之间的关系。

4、DOM对象

1、DOM对象：浏览器根据html标签生成的JS对象

  • 所有的标签属性都可以在这个对象上面找到
  • 修改这个对象的属性会自动映射到标签上

2、DOM的核心思想：把网页内容当做对象来处理

3、document对象：

  • 是DOM里面提供的一个对象
  • 它提供的属性和方法都是用来访问和操作网页内容的
  • 网页的所有内容都在document里面

二、获取DOM对象

1、根据CSS选择器来获取DOM元素

1、选择匹配的第一个元素

1、语法：document.querySelector(‘css选择器’)

2、参数：包含一个或多个有效的CSS选择器字符串

3、返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象，如果没有匹配到，则返回null。

4、参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

5、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>111</div>
    <div>222</div>
    <div class="three">333</div>
    <script>
        var dom1 = document.querySelector('div');//<div>111</div>
        console.log(dom1);
        var dom2 = document.querySelector('.three');//<div class="three">333</div>
        console.log(dom2);
    </script>
</body>
</html>
2、选择匹配多个元素

1、语法：document.querySelectorAll(‘css选择器’)

2、参数：一个或多个有效的CSS选择器字符串

3、返回值：CSS选择器匹配的NodeList对象集合，是一个伪数组，有length属性，可以通过下标索引获取元素，但是没有pop()、push()等数组的方法。就算只有一个元素，获取到的也是一个伪数组，里面只有一个元素而已。

4、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>111</div>
    <div>222</div>
    <div class="three">333</div>
    <script>
        // 获取多个元素，得到的是一个伪数组
        var doms = document.querySelectorAll('div');
        for(let i = 0;i < doms.length;i++) {
            console.log(doms[i]);
        }
    </script>
</body>
</html>
3、其他获取DOM元素的方法

1、其他方法

方法说明
document.getElementById(‘btn’)通过元素id值获取元素
document.getElementsByTagName(‘div’)通过标签名获取页面中所有div元素
document.getElementsByClassName(‘box’)通过类名获取所有类名为box的元素

三、设置/修改DOM元素

1、document.write()

1、只能将文本内容追加到前面的位置

2、文本包含的标签会被解析

3、代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 追加文本内容
        document.write('好好学习，天天向上');
        // 里面的标签会被解析
        document.write('<h2>学习令人兴奋</h2>');
    </script>
</body>
</html>

2、元素的innerText属性

1、将文本内容添加或者更新到任意标签的位置

2、文本包含的标签不会被解析

3、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1"></div>
    <div id="box2">这里的值会更新</div>
    <div id="box3">这里的标签不会被解析</div>
    <script>
        // 为id为box1的div添加内容
        var box1 = document.getElementById('box1');
        box1.innerText = '这是添加到div1的文字';

        // 为id为box2的div更新内容
        var box2 = document.getElementById('box2');
        box2.innerText = '这是更新到div2的文字';

        // 里面的标签不会被解析
        var box3 = document.getElementById('box3');
        box3.innerText = '<h1>不会被解析的标签</h1>';
    </script>
</body>
</html>

3、元素的innerHTML属性

1、将文本内容添加/更新到任意标签位置

2、文本包含的标签会被解析

3、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1"></div>
    <div id="box2">这里的值会更新</div>
    <div id="box3">这里的标签会被解析</div>
    <script>
        // 为id为box1的div添加内容
        var box1 = document.getElementById('box1');
        box1.innerHTML = '这是添加到div1的文字';

        // 为id为box2的div更新内容
        var box2 = document.getElementById('box2');
        box2.innerHTML = '这是更新到div2的文字';

        // 里面的标签不会被解析
        var box3 = document.getElementById('box3');
        box3.innerHTML = '<h1>不会被解析的标签</h1>';
    </script>
</body>
</html>

4、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: inline-block;
            width: 150px;
            height: 30px;
            border: 1px solid pink;
            vertical-align: middle;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>
<body>
    抽中的选手：<div></div>
    <script>
        // 获取元素
        var  box = document.querySelector('div');
        // 得到随机名字
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min)) + min;
        }
        // 声明一个数组
        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操'];
        // 生成一个随机数，作为数组索引号
        let random = getRandom(0, arr.length - 1);
        // 写入标签内部
        box.innerHTML = arr[random];
        // 删除这个人名，arr.splice(从哪里开始删， 删几个)
        arr.splice(random, 1);
    </script>
</body>
</html>

四、设置/修改DOM元素属性

1、设置修改元素常用属性

1、可以通过JS设置和修改标签元素的属性

2、常见属性：href、title、src

3、语法：对象.属性 = 值

4、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./img/a.png" alt="测试图片" />
    <script>
        // 获取图片元素
        let imgs = document.querySelector('img');
        //修改元素的src属性
        imgs.src = './img/b.png';
        imgs.title = '我是风景图片';
    </script>
</body>
</html>

2、设置修改元素的样式属性

1、通过style属性操作CSS

1、可以通过JS设置修改元素的样式属性

2、比如轮播图小圆点自动更换颜色样式

3、点击按钮可以滚动图片，是通过移动图片的位置left实现的

4、语法：对象.style.样式属性 = 值

5、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script>
        // 获取元素
        let box = document.querySelector('div');
        //设置样式属性
        box.style.width = '100px';
        box.style.height = '100px';
        box.style.backgroundColor = 'pink'
    </script>
</body>
</html>
2、通过className操作CSS

1、 操作类名(className) 操作CSS：如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

2、语法：元素.className = ‘类名’

3、注意点：

  • 由于class是关键字，所以使用className去代替
  • className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

4、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .new {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <script>
        // 获取元素
        let box = document.querySelector('.one');
        // 设置样式，保留之前的类名
        box.className = 'one new';
    </script>
</body>
</html>
3、通过classList操作CSS

1、为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

2、语法：

语法说明
元素.classList.add(‘类名’)追加一个类
元素.classList.remove(‘类名’)删除一个类
元素.classList.toggle(‘类名’)切换一个类

3、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .new {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <script>
        // 获取元素
        let box = document.querySelector('.one');
        // 追加一个类
        box.classList.add('new');
        // 删除一个类
        box.classList.remove('one');
        // 切换一个类
        box.classList.toggle('one');
    </script>
</body>
</html>

3、设置修改表单元素属性

1、表单在很多情况下，也需要修改属性，比如点击眼睛可以看到密码，本质就是把表单类型转换为文本框。

2、获取表单属性：DOM对象.属性名

3、设置表单属性：DOM对象.属性名 = 新值

4、表单属性中添加就有效果，移出就没有效果，一律使用布尔值表示，如果为true代表添加了该属性，如果为false代表移出了该属性，比如：disabled、checked、selected

5、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <input type="text" placeholder="请输入" />
    <button disabled>按钮</button>
    <input type="checkbox" class="box" />
    <script>
        // 获取元素
        let input = document.querySelector('input');
        // 取值
        console.log(input.value);
        // 设置值
        input.value = '这是设置的值';
        input.type = 'password';

        // 启用按钮
        let btn = document.querySelector('button');
        btn.disabled = false;

        // 勾选复选框
        let checkbox1 = document.querySelector('.box');
        checkbox1.checked = true;
    </script>
</body>
</html>

五、定时器-间歇函数

1、开启定时器

1、开启定时器：setInterval(函数，间隔时间)

2、作用：每隔一段时间调用这个函数，间隔时间单位是毫秒

2、关闭定时器

1、语法：

let 变量名 = setInterval(函数，间隔时间)
clearInterval(变量名)

2、注意：函数名不需要加括号，定时器返回的是一个id数字

3、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <script>
        function show() {
            console.log('好好学习，每天坚持');
        }
        // 设置定时器，每隔1秒就调用一次show函数，show函数不需要加括号
        let timer = setInterval(show, 1000);

        // 清除定时器
        clearInterval(timer);
    </script>
</body>
</html>
菜鸟自学编程
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webAPI基础
m0_53456432的博客
07-14 5420
一、关于webAPI 1.API和webAPI 1.1API概念 API（Application Programming Interface）应用程序编程接口，简单理解API是给程序员提供的一种工具，以便能更轻松的完成想要的功能。 1.2webAPI概念 webAPI是浏览器提供的一套操作浏览器功能和页面元素的接口（BOM、DOM）。比如我们想要浏览器弹出一个警示框alert('警示框')，alert就是浏览器的API 2.总结 API是为程序员提供的接口，帮助实现某种功能，会使用就可以了，不
Asp.NET Core WebAPI 入门学习笔记，超详细
最新发布
夜飞鼠的专栏
04-09 2368
WebAPI 是一种传统的方式，用于构建和暴露 RESTUI风格的Web服务。它提供了丰富的功能和灵活性，可以处理各种HTTP请求，并支持各种数据格式，如JSON、XML等。 WebAPI使用控制器(Controllers)和动作方法(ActionMethods)的概念、通过路由配置将请求映射到相应的方法上。 开发人员可以使用各种属性和过滤器来处理请求、控制访问权限、验证数据等。
WebAPI（js和web交互）
m0_61632793的博客
04-11 450
web
WebAPI接收二维数组
wu_zz的博客
01-29 1048
做安卓手持时，需要将扫描到的轮胎条码号传递给后台接口，由于是二维数组后台不知该如何接收，再次记录下； 前台post数据： items: any = { 'one': [], 'two': [], 'three': [], 'four': [], 'five': [] }; inStorageConfim() { if (this.items
WebAPI接收js传过来的对象数组数据
木頭子
06-17 2963
WebAPI 接收js传过来的对象数组数据 百度 Google了一整天 终于 在晚上聊天的时候弄出来了 所以得出结论 写代码一定要分心 结果才能出来 说一下我的需求 需要将如下图的对象数组传递到webapi那边接收 然后进行操作 思路： post是肯定的 数组直接传 但是始终接收不到 可能是技术不够 那就转为json格式传 接收格式传在后台接收到的是空数据 长度为0 json应该没问题 应该是接收有问题 挨个去试 string[] string object List… 还是没出来 要么nul
WebAPI入门学习
zls365365的博客
04-02 370
这一节我们了解下WebAPI。什么是API？简单来说，就是应用程序编程接口（Application Programming Interface），两个或者多个软件组之间定义的一种通信机制，经常用于数据交互。在没有使用API的时候，我们的应用程序可以直接操作数据库数据，也是就如下图所示。我们想要获得什么样的数据，由我们使用的Sql语句决定。这样的好处是，我们想获得的数据和格式由我们程序自己决定，更加...
web-study:WEB前端学习笔记
05-04
综上所述，"web-study:WEB前端学习笔记"涵盖了HTML基础知识、CSS样式控制、JavaScript交互实现、响应式设计、前端框架应用、浏览器兼容性处理、版本控制实践、WebAPIs与AJAX交互、前端构建工具的使用以及移动优先和...
Asp.NETCore WebAPI学习笔记汇总.rar
04-07
ASP.NET Core Web API 学习笔记汇总.pdf 是一个聚焦于使用ASP.NET Core构建Web API的资源集合。ASP.NET Core是一个由微软开发的现代化、高性能、开源的框架，它旨在为开发者提供构建各种类型的应用程序的能力，包括...
webProject:web前端技术笔记
03-23
【web前端技术笔记】是关于Web开发领域前端技术的一份详细学习资料，主要涵盖了Web前端的基础到高级的各种知识点。这份笔记以"webProject-master"作为压缩包文件名，表明其可能是一个开源项目，允许用户查看、学习...
人工智能实践：Tensorflow个人学习笔记
10-08
本篇内容将深入探讨TensorFlow在人工智能实践中的应用，结合个人学习笔记，帮助读者更好地理解和掌握这个强大的库。 一、TensorFlow简介 TensorFlow是由Google Brain团队开发的开源库，主要用于数值计算和大规模...
学习.net web api开发的好例子
02-02
学习.net web api开发的好例子，采用的是.net环境下的web mvc开发简单的api，典型的MVC架构，适合初学者
WebApi笔记
qq_42938698的博客
10-08 178
1.2.10 身份验证 服务器可以保护一个或多个资源，每个资源分配到一个逻辑分区，每个域有自己的身份验证方案，或授权方式。 状态401响应 1.2.11 身份验证方案 基本认证 超文本安全传输协议 2.9 多个表示 一个资源可以有多个表示，每个表示有不同的媒体类型。 如此，具备不同功能的各种客户端都可以与你的API交互。 2.10.8 REST约束 6条 客户端-服务器 用户界面与后端 无状态 所有应用系统状态都保存在客户端 统一接口 通过表示对资源执行的操作 资源的状态通过资源的表示来传递
webAPIs笔记
Angel_of_hell的博客
05-11 412
1 自定义属性 1.1 获取自定义属性 我们程序员自己添加的属性就是自定义属性 （1）element.属性获取内置属性值（元素本身自带的属性） （2）element.getAttribute('属性');主要获得自定义的属性（标准） 标签被翻译成DOM对象 标签的特征被翻译成DOM的属性 标签的官方行内属性，被翻译成DOM对象的属性 标签的自定义属性，不会被翻译成对象的属性，无法通过点语法来操作 1.2 设置和获取属性值 （1）element.属性 = ‘值
04webapi(笔记).md
mxl00z的博客
09-29 270
day1 注意点： js中获取对象class属性 是通过用对象的.className js中的style属性之间没有“-”,通用转变是第二个字母大写 day2 事件三要素：事件源，触发，响应 文档&amp;amp;gt;节点（标签和标签中的文字）&amp;amp;gt;元素（标签） ##获得元素的方式 通过选择 器获得单个元素 document.querySelector(); document.querySelector();...
jquery 给类名元素添加行内样式_前端系列——获取页面中的DOM元素
weixin_39631767的博客
11-21 273
这里就聊一下获取页面中DOM元素最基本的两种方法：document.getElementById.在整个页面中通过元素的Id属性值来获取到这个元素对象，getElementById是获取元素的方法，而document是获取元素的范围，我们也将此范围称为“上下文”。注意：通过此方法获得的元素是一个对象数据类型的值(里面包含很多内置的属性)，如下图。下面分析一下包含的这些属性：classname:存储...
extJs+2.1学习笔记.pdf
06-15
"extJs+2.1学习笔记.pdf" 这篇学习笔记详尽地涵盖了ExtJs 2.1版本的关键概念和技术。ExtJs是一种基于JavaScript的富客户端框架，用于构建功能丰富的Web应用程序。笔记分为多个章节，逐步深入地介绍了ExtJs的核心...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值