API笔记

huanglujian886

已于 2022-09-06 18:38:44 修改

阅读量344

点赞数

分类专栏： Javascript 文章标签： javascript 前端

于 2022-09-02 19:18:49 首次发布

本文链接：https://blog.csdn.net/huanglujian886/article/details/126669167

版权

变量声明

const 优先，尽量使用 const

优点：语义化更好

易错点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oWj9xsEO-1662117420191)(assets/1659334591377.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1fzjGKjl-1662117420192)(assets/1659334662391.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uUQFg03C-1662117420192)(assets/1659334730418.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Xqld1D2-1662117420192)(assets/1659335957756.png)]

提议：
以后数组以及对象，用const 声明

Web API 基本认知

作用：就是使用JS去操作html和浏览器

分类： DOM （文档对象模型）、 BOM（浏览器对象模型）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wCg9whWL-1662117420192)(assets/1659336607056.png)]

DOM

Document Object Model —— 文档对象模型

是用来呈现以及与任意HTML 或 XML 文档交互的 API

简单说： DOM 是浏览器提供的一套专门用来操作网页内容的功能

作用：开发网页内容特效和实现用户交互

DOM树

将HTML 文档以树状结构直观的表现出来

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VqqtDTrk-1662117420193)(assets/1659610504174.png)]

DOM对象

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

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

核心思想：把网页内容当作对象来处理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9fXWeZ6f-1662117420193)(assets/1659338383121.png)]

获取DOM对象

根据css选择器来获取

选择匹配的第一个元素

语法：

document.querySelector('css选择器')

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

返回值：

css选择器匹配的第一个元素，一个HTMLElement对象

如果没有匹配到，则返回null

// 可以直接修改样式
box.style.color = 'red'    // 必须有引号

选择匹配的多个元素

语法：

document.querySelectorAll('css选择器')

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

返回值：

css选择器匹配的NodeList 对象集合

获取来的是数组，不可以直接修改，只能通过遍历的方式一次性给里面的元素修改

伪数组

document.querySelectorAll('css选择器')

得到的是一个 伪数组

有长度有索引号的数组

但是没有 pop() push() 等数组方法

想要得到里面的每个对象，需要遍历（for）的方式获得

const nav = document.querySelectorAll('.nav li')
        for (let i = 0; i < nav.length; i++) {
   
            console.dir(nav[i]);
        }

注意：哪怕只有一个约束，通过 document.querySelectorAll(‘css选择器’) 获取过来的也是一个伪数组，里面只有一个元素而已

其他获取DOM元素方法（了解）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O8pmfIDy-1662117420193)(assets/1659344996921.png)]

操作元素内容

DOM对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象

就是操作对象使用的点语法

如果想要改变标签元素里面的内容，则可以使用如下几种方法

1、对象.innerText 属性

2、对象.innerHTML 属性

对象.innerText 属性

效果演示

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

显示纯文本，不解析标签

cosnt box = document.querySelector('.box')
console.log(box.innerText)            //  会出现div标签里面的文字，获取标签内部的文字
box.innerText = '改变对象里面属性的值'    // 添加/修改标签内部文字内容
box.innerText = '<strong>innerText不解析标签</strong>'        // 此时里面的strong标签不会生效

对象.innerHTML 属性

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

会解析标签，多标签建议使用模板字符

cosnt box = document.querySelector('.box')
console.log(box.innerHTML)            //  会出现div标签里面的文字，获取标签内部的文字
box.innerHTML = '改变对象里面属性的值'    // 添加/修改标签内部文字内容
box.innerHTML = '<strong>innerHTML解析标签</strong>'        // 此时里面的strong标签会生效

操作元素属性

操作元素常用属性

还可以通过JS设置/修改标签元素属性，比如通过src更换图片

最常见的属性比如： href 、 title 、 src 等

语法：

对象.属性 = 值

操控元素样式属性

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

点击按钮可以滚动图片，这是移动的图片的位置 left 等等

学习路径：

通过 style 属性操作css

操作类名（className）操作css

通过 classList 操作类控制css

通过 style 属性操作css

生成的是行内样式，权重比较高

cosnt box = document.querySelector('.box')    // 先获取样式
box.style.width = '200px'           // 要有引号，且要加单位
box.style.backGround = 'blue'      //  多组单词的采取， 去掉中间-   ,  使用小驼峰命名法
box.style.boderLeft = '1px solid red'

缺点：代码比较长

操作类名（className）操作css

适用于修改的样式比较多

语法：

元素.className = 'active'

注意点：

由于class是关键字，所以使用className 去代替

className 是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

通过 classList 操作类控制css

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

// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')    // 有就删掉，没有就加上

注意：类名不加点，且是字符串

操作表单元素属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yMLtblEJ-1662117420194)(assets/1659615663407.png)]

获取设置表单的值

const uname = document.querySelector('input')
//  获取表单里面的值，用  value
console.log(uname.value)

// 设置表单里的值
uname.value = '黄黄'
// 修改表单的属性
uname.type = 'password'

button 还是用 .innerHTML 来获取

修改表单选中和禁用

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示如果为true 代表添加了该属性如果是false 代表移除了该属性

比如： disabled 、checked 、selected

默认是： false

<input type="checkbox">
<script>
    const ipt = document.querySelector('input')
	// 想要多选被选中
	ipt.checked = true    // 只能接收布尔值
</script>

自定义属性

在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取

<body>
    <div class="box" data-id="10">盒子</div>
	<script>
        const box = document.querySelector('.box')
		console.log(box.dataset.id)
	</script>
</body>

定时器——间歇函数

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
例如：网页中的倒计时
要实现这种需求，需要定时器函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WRPjmIwt-1662117420194)(assets/1659664251756.png)]

基本使用

定时器函数可以开启和关闭定时器

开启定时器

setInterval(函数,间隔时间)

例如：
function fn() {
   
	console.log('一秒执行一次')
}
setInterval(fn,1000)     //  注意：这里函数后面不可以加（），因为 fn() 代表的是调用函数，加上去定时器无效

setInterval(
    function () {
   
		console.log('一秒执行一次')}
,1000)

作用：每个一段时间调用这个函数

间隔时间单位是毫秒

关闭间歇函数

每个定时器都有自己的id数字

定时器返回的是一个id数字

let timer = setInterval(
    function () {
   
        console.log('黄')
    },1000
)       //         这里需要用let ，因为后面开关定时器，需要给其来来回回赋值
clearInterval(timer)       // 关闭的代码

事件监听

什么是事件？

事件是在编程时系统内发生的动作或者发生的事情

比如用户在网页上单击一个按钮

什么是时间监听？

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

语法：

元素对象.addEventListener('事件类型',要执行的函数)

事件监听三要素：

事件源：哪个dom元素被事件触发了，要获取dom元素
事件类型：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
事件调用的函数：要做什么事

注意：

事件类型要加引号
函数是点击之后再去执行，每次点击都会执行一次

演示：点击鼠标弹出对话框

const btn = document.querySelector('button')
btn.addEventListener('click',function () {
   
		alert('弹出')
})

事件监听版本（了解）

DOM L0

事件源.on事件 = function() { }

btn.onclick = function(){
     
    alert(11)
}  
btn.onclick = function(){
     
    alert(22)
}     // 此时下面的会覆盖前面的，赋值过程

 DOM L2

事件源.addEventListener(事件，事件处理函数)

 区别： on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7QVUCvkX-1662117420194)(assets/1659690640237.png)]

鼠标事件类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qVIeEzPj-1662117420194)(assets/1659783407804.png)]

事件对象

事件对象是什么？

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

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

使用场景：

可以判断用户按下哪个键，比如按下回车键可以发布新闻

可以判断鼠标点击了哪个元素，从而做相应的操作

如何获取？

在事件绑定的回调函数的第一个参数就是事件对象

一般命名为event、ev、e

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eQpy7eyc-1662117420194)(assets/1659874832039.png)]

事件对象常用属性

type	获取当前的事件类型
clientX/clientY	获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY	获取光标相对于当前DOM元素左上角的位置
key