Web API

最新推荐文章于 2024-07-08 16:22:29 发布
最新推荐文章于 2024-07-08 16:22:29 发布
阅读量928 收藏 21
点赞数 23
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70389132/article/details/136616095
版权
1.获取元素

语法：

document.querySelsctor('css选择器')

只能获取符合条件的第一个元素，可以对其修改

document.querySelsctorALL('css选择器')

可以获取符合条件的所有元素，得到的是伪数组，需要遍历得到每一个元素

2.操作元素内容

语法：

元素.innerText =

只能识别文本，不能解析标签

元素.innerHTML =

能是被文本，也能解析标签

3.操作元素属性
3.1 操作元素常用属性

语法：对象.属性 = 值

实例：

// 获取元素
const pic = document.querySelector('img)
// 操作元素
pic.src = '图片.jpg'
pic.title = '周杰伦的图片'
3.2 操作元素样式属性
1.通过style属性操作CSS；

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

实例：

// 获取元素
const box = document.querySelector('类名')
// 操作元素
box.style.width = '200px'
box.style.backgroundColor = 'pink'  
2.操作类名操作CSS；

语法：元素.className = '.box'

注意：使用className可以同时修改多个样式，直接使用className赋值会覆盖之前的类名

3.通过clssList操作类控制CSS

语法：

// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')
4. 操作表单元素

获取：DOM对象.属性名

设置：DOM对象.属性名 = 新值

5.自定义属性

在标签上一律以‘’data-名字‘’开头

在DOM对象上一律以dataset对象方式获取

<body>
    <div class="box" data-id="10">盒子</div>
    <script>
        const box = document.querySelector('.box')
        console.log(box.dataset.id)
    </script>
</body>
6.定时器间歇函数

语法：

开启定时器：let 变量名 = setInterval(函数，间隔时间)

关闭定时器：clearInterval(变量名)

二、第二天

1.事件监听（绑定）

语法：元素对象.addEventListener('事件类型'，要执行的函数)

实例：

<button>按钮<button>
<script>
    const btn = document.querySelector('.btn')
    btn.addEventListener('click',function(){
        函数执行过程
    })
</script>

2.事件类型

鼠标事件：鼠标点击click；鼠标经过mouseenter；鼠标离开mouseleave

焦点事件：获得焦点focus；失去焦点blur

键盘事件：键盘按下出发Keydown；键盘抬起触发Keyup；

文本事件：用户输入事件input

3.事件对象

事件对象也是个对象，这个对象里有事件触发时的相关信息。

例如：鼠标点击事件中事件对象就存了鼠标点击那个位置等信息。

在事件绑定的回调函数的第一个参数就是事件对象，一般命名为event，ev，e

语法：元素.addEventListener('click',function(e){ 函数执行过程 })

事件对象常用属性：

type：获取当前的事件类型

clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置

key：用户按下的键盘键的值

4.环境对象

环境对象指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境，谁调用this就是谁

5.回调函数

如果将函数A作为参数传递给函数B时，我们就称函数A为回调函数。

三、第三天

1.事件流

事件流指的是事件完整执行过程中的流动路径。

当触发事件时会经历两个阶段，从父到子是捕获阶段，从子到父是冒泡阶段。实际工作都是使用事件冒泡为主。

2.事件捕获与冒泡

    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        const father = document.querySelector('.father')
        const son = document.querySelector('.son')
        // 事件冒泡
        document.addEventListener('click',function() {
            alert('我是爷爷')
        })
        father.addEventListener('click',function() {
            alert('我是爸爸')
        })
        son.addEventListener('click',function(e) {
            alert('我是儿子')
            // 阻止冒泡,需要借助事件对象
            e.stopPropagation()
        })
        // 事件捕获
        // document.addEventListener('click',function() {
        //     alert('我是爷爷')
        // },false)
        // father.addEventListener('click',function() {
        //     alert('我是爸爸')
        // },false)
        // son.addEventListener('click',function() {
        //     alert('我是儿子')
        // },false)
    </script>

3.事件解绑

<body>
    <button>按钮</button>
    <script>
        // 方法一
        const btn = document.querySelector('button')
        btn.onclick = function () {
            alert('点击了')
            // 事件解绑，直接用null覆盖掉之前的值,null为空对象，之前的function也是一个对象
            btn.onclick = null
        }
​
        // 方法二
        function fn () {
            alert('点击了')
        }
        // 事件绑定，匿名函数无法解绑，所以要给函数命名
        btn.addEventListener('click',fn)
        // 事件解绑
        btn.removeEventListener('click',fn)
    </script>
</body>

4.事件委托

<body>
    <!-- ul>li{第$个孩子}*5 -->
    <ul>
        <li>第1个孩子</li>
        <li>第2个孩子</li>
        <li>第3个孩子</li>
        <li>第4个孩子</li>
        <li>第5个孩子</li>
        <p>我不需要变色</p>
    </ul>
    <script>
        const ul = document.querySelector('ul')
        // 委托给父元素
        ul.addEventListener('click',function (e) {
            // alert(1)
            // this.style.color = 'red'
​
            // 利用事件对象e.target，实现点击的那个对象执行操作,但是这个点击p也会变色
            // e.target.style.color = 'red'
​
            // 只有点击li才会变色
            if (e.target.tagName === 'LI') {
                e.target.style.color = 'red'
            }
        })
    </script>
</body>

5.阻止默认行为

<body>
    <form action="http://www.itcast.cn">
        <input type="submit" value="免费注册">
    </form>
    <script>
        const form = document.querySelector('form')
        form.addEventListener('submit',function (e) {
            // 阻止默认行为
            e.preventDefault()
        })
    </script>
</body>

6.其他事件

1.页面加载事件

两种事件：

  1. load事件

    加载外部资源（如图片，外联CSS和JS等）加载完毕时触发的事件

    监听页面所有资源加载完毕：给window添加load事件

    语法：window.addEventListener('load'，function () { })

  2. DOMcontentLoaded事件

    当初始的HTML文档被完全加载和解析完成之后，DOMcontentLoaded事件被触发，而无需等待样式表、图像等完全加载

    监听页面DOM加载完毕：给document添加DOMContentLoaded事件

    语法：document.addEventListener('DOMContentLoaded', function () {})

2.页面滚动事件

  1. scroll事件

    监听整个页面滚动：给window或document添加scroll事件

    语法：window.addEventListener('scroll', function () {})

    监听某个元素内部滚动直接给某个元素加scroll事件即可

  2. scrollTop监测滚动距离

    // 给整个页面加，也可以给某个元素加
window.addEventListener('scroll', function () {
    console.log(document.documentElement.scrollTop)
})
// document.documentElement.scrollTop获取的值为可读写的，可以给其赋值,数字型，不带单位
// document.documentElement.scrollTop = 800
3.页面尺寸事件

  1. resize事件

    会在窗口尺寸发生变化时触发的事件

    语法：window.addEventListener('resize',function () {})

  2. clientWidth监测屏幕宽度，不包含边框

    window.addEventListener('scroll', function () {
    console.log(document.documentElement.clientWidth)
})

7.元素的尺寸与位置

  1. 获取宽高

    offsetwidth或offsetHeight获取元素宽度或高度，包含元素自身设置的宽度、padding、border

  2. 获取位置

    offsetLeft或offsetTop获取元素距离自己最近一级定位了的祖先元素的左或上距离，是只读属性

四、第四天

1.日期对象

  1. 得到当前时间

    const date = new Date()

  2. 指定时间

    const date = new Date('2024-2-29 12:00:00')

2.时间戳

// getTime，可以得到指定时间戳
const date = new Date()
console.log(date.getTime)
// +new Date，可以得到指定时间戳
console.log(+new Date)
// Date.now(),只能得到当前时间戳
console.log(Date.now())

3.节点操作

  1. 查找节点

    父节点: 孩子.parentNode属性

    子节点: 父亲.children属性，得到的是伪数组，使用需要遍历

    兄弟节点: 兄弟.nextElementSibling属性、兄弟.previousElementSibling属性

  2. 增加节点

    语法：document.createElement('标签名')

    <body>
    <ul>
        <li>我是老大</li>
    </ul>
    <script>
        const ul = document.querySelector('ul')
        // 1.创建节点
        const li = document.createElement('li')
        // 2.追加节点   作为最后一个子元素
        ul.appendChild(li)
        li.innerHTML = '我是追加的li'
        // 3.追加节点   作为第一个子元素
        // insertBefore(要插入的元素，放到哪个元素的前面)
        ul.insertBefore(li, ul.children[0])
    </script>
</body>

  3. 删除结点

    语法：父元素.removeChild(子元素)

    <body>
    <ul>
        <li>1</li>
        <li>要删除的li</li>
        <li>2</li>
    </ul>
    <script>
        const ul = document.querySelector('ul')
        // 必须通过父元素删除节点   父元素.removeChild(子元素)
        ul.removeChild(ul.children[1])
    </script>
</body>

  4. 克隆节点

    语法：元素.cloneNode(true)

    <body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        const ul = document.querySelector('ul')
        // 1.克隆节点   元素.cloneNode(true),true克隆内容，false只克隆标签没有内容
        const li1 = ul.children[0].cloneNode(true)
        // 2.追加节点
        ul.appendChild(li1)
        // ul.appendChild(ul.children[0].cloneNode(true))
    </script>
</body>

五、第五天

1、定时器-延时函数

语法：setTimeout(回调函数，等待的毫秒数)

清除延时函数：clearTimeout(setTimeout(回调函数，等待的毫秒数))

2、location对象

location的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分

常用属性和方法：

href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

search 属性获取地址中携带的参数，符号 ？后面部分

hash 属性获取地址中的啥希值，符号 # 后面部分

reload 属性用来刷新当前页面，传入参数 true 时表示强制刷新

3、navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

常用属性和方法：

通过 userAgent 检测浏览器的版本及平台

4、histroy对象

history 的数据类型是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

前进：history.go(1)

后退：history.go(-1)

5、本地存储

  1. localStorage

    可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在，可以多窗口（页面）共享

存储数据：localStorage.setItem(key,value)

获取数据：localStorage.getItem(key)

删除数据：localStorage.removeItem(key)

  1. sessionStorage

    生命周期为关闭浏览器窗口，在同一窗口（页面）下数据可以共享，用法与localStorage基本相同

  2. 存储复杂数据类型

    本地只能存储字符串，无法存储复杂数据类型（如对象、数组）,要存储复杂数据类型需要将其转换成JSON字符串，再存储到本地，到用时再将取出的字符串转换为对象

    const obj = {
    uname: '孙燕姿',
    age: 18,
    gender: '女'
}
// 存   必须转换为JSON字符串存储，属性和值都有引号，且都为双引号
localStorage.getItem('obj', JSON.stringify(obj))
// 取   
console.log(JSON.parse(localStorage.getItem(obj)))

六、第六天

1、正则表达式

语法：const 变量名 = /表达式/

  • text()用于判断是否有符合规则的字符串，返回的是布尔值

  • exec()用于检索（查找）符合规则的字符串，找到返回数组，否则为null

边界符：^表示匹配行首的文本以谁开始；$表示匹配行尾的文本以谁结束

console.log(/哈/.text('哈'))  // true
console.log(/二哈/.text('二哈哈'))  // true
console.log(/二哈/.text('第二哈哈'))  // true
// ^ 开头
console.log(/^二哈/.text('二哈哈'))  // true
console.log(/^二哈/.text('第二哈哈'))  // false
// $ 结尾
console.log(/^二哈$/.text('第二哈哈'))  // false
console.log(/^二哈$/.text('二哈二哈'))  // false
console.log(/^二哈$/.text('二哈'))  // true

量词：用来设定某个模式出现的次数

// * 0次或更多次
console.log(/^哈*$/.text(''))  // true
console.log(/^哈*$/.text('哈'))  // true
console.log(/^哈*$/.text('哈哈'))  // true
// + 1次或更多次
console.log(/^哈+$/.text(''))  // false
console.log(/^哈+$/.text('哈'))  // true
console.log(/^哈+$/.text('哈哈'))  // true
// ？ 0次或1次
console.log(/^哈?$/.text(''))  // true
console.log(/^哈?$/.text('哈'))  // true
console.log(/^哈?$/.text('哈哈'))  // false
// {n} n次
// {n,} n次或更多次
// {n,m} n到m次

字符类：

// 只要有[]中的任意一个字符都为true
console.log(/[abc]/.text('baby'))  // true
console.log(/[abc]/.text('city'))  // true
console.log(/[abc]/.text('die'))  // false
// - 连字符，a-z表示a到z之间的所有字符
console.log(/^[a-z]$/.text('h'))  // true
// [a-zA-A] 表示大小写都可以
// [0-9] 表示0到9都可以
// ^ 取反，[^a-z] 表示除了小写字母以外的字符
​
// .匹配除换行符之外的任何单个字符

预定义：指的是某些常见模式的简写方式

\d 相当于[0-9] \D 为取反

\w 相当于[A-Za-z0-9] \W为取反

\s 相当于[\t\r\n\v\f] \S为取反

修饰符：约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等

i：不区分大小写

g：匹配所有满足正则表达式的结果

语法：/表达式/修饰符，console.log(/a/i.text('A')) // true

子非名-
关注
  • 23
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebAPI简介
weixin_71777499的博客
07-22 1万+
WebAPI最重要的是可以构建面向各种客户端的服务。
WebApi路由机制详解——看完不会用你打我
热门推荐
xiaouncle的博客
11-12 4万+
随着前后端分离的大热，WebApi在项目中的作用也是越来越重要，由于公司的原因我之前一直没有机会参与前后端分离的项目，但WebApi还是要学的呀，因为这东西确实很有用，可单独部署、与前端和App交互都很方便，既然有良好的发展趋势，我们当然应该顺势而为——搞懂WebApi！ 从MVC到WebApi，路由机制一直都在其中扮演着重要的角色。 它可以很简单：如果你只需要会用一些简单的路由，如/Home...
[入门一]C# webApi创建、与发布、部署、api调用
zgscwxd的博客
10-14 1万+
c# Web API实例，与发布、部署、api调用
C# webAPI 精解
qq_43886548的博客
06-01 5777
asp.net webAPI
python webapi
lidongxx的博客
06-21 1584
目的：将python代码写的功能模块封装成webapi 我首先用vs2017搭建python flask web项目 在runserver.py文件中 init.py """ The flask application package. """ from flask import Flask app = Flask(__name__) import 自己的模块 runserver.py ...
WebApi性能优化
好好学习，天天向上！
04-06 2591
文章目录一、WebApi调优二、WebApi 应用场景三、WebApi 性能瓶颈定位四、WebApi性能优化手段一-本地缓存五、WebApi 性能优化手段二-分布式缓存六、WebApi 性能优化手段三-Http缓存（响应缓存）七、WebApi 性能优化手段四-数据压缩（响应） 一、WebApi调优 什么是WebApi调优 当浏览器端请求WebApi服务端读写数据需要耗费时间，将耗费的时间缩短，就称之为WebApi调优。 如图： 目的 提升WebApi的性能。 二、WebApi 应用场景 场
接口开发笔记-WebApi
weixin_63658665的博客
03-27 2061
记录了weiapi学习过程中的一些基本操作
VSCode创建WebAPI
gc_2299的博客
09-04 1966
Ubuntu下，在VSCode中创建WebAPI示例
C# WebApi 开发（附代码）
浅尝辄止的博客
12-14 1979
C# WebApi 开发（附代码）
C# WEB API
10-31
**C# Web API详解** C# Web API是微软.NET Framework的一部分，主要用于构建RESTful服务，它使得开发基于HTTP的应用程序变得更加简单。REST（Representational State Transfer）是一种软件架构风格，用于设计网络...
WebAPI项目及其HTML测试页面
12-09
WebAPI允许开发者创建RESTful服务，这些服务可以被多种客户端，包括浏览器中的JavaScript，移动应用，或者其他服务器端应用所调用。在本项目中，我们看到的是一个基于Visual Studio 2013开发的实例。 1. **WebAPI...
C# WebAPI示例
05-16
在C# WebAPI中，主要涉及以下几个关键知识点： 1. **控制器（Controllers）**：WebAPI的核心是控制器类，它们继承自`System.Web.Http.ApiController`基类。控制器负责处理客户端的HTTP请求，并返回响应。例如，一个...
Android 请求 WebAPI的案例
07-15
在Android开发中，与WebAPI进行交互是常见的需求，例如获取服务器数据、发送用户信息等。本案例"Android请求WebAPI"将详细讲解如何在Android应用中实现这一功能。WebAPI通常指的是基于HTTP协议的RESTful API，允许...
java调用webapi
10-10
Java调用WebAPI是开发过程中常见的任务，尤其是在分布式系统或者微服务架构中，不同服务间通过API进行数据交互。WebAPI通常指的是Web应用程序提供的接口，允许客户端（如Java应用）发送HTTP请求并接收响应。本压缩包...
HTML_表单 和 表单案例
secret010的博客
07-05 263
【代码】HTML_表单 和 表单案例。
Vue前端打包
weixin_63680330的博客
07-04 332
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
最新发布
Vinca@的博客
07-08 509
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 357
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
wpf webapi
01-23
借助于WPF的强大的UI设计和交互性能，开发人员可以创建直观而灵活的用户界面，与WebAPI进行数据交互，并实现数据的展示和操作。通过WPF的数据绑定机制，可以轻松地将WebAPI返回的数据绑定到UI元素上，实现数据的实时...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值