js API总结

本文最后更新于 2024-02-15 10:28:20

API

1.变量的定义

能用 const 就用

Q：怎么考虑能不能用？

A：复杂数据可以用const ，原理？？？不建议看

1
2
3
/*	
	因为复杂数据类型的值是放到堆中的，在栈中的只是该内容的地址，那么修改时，是在堆中修改的，栈中的地址不会改变，所以等同于数组或者对象等没有改变；但是如果直接指向一个新的数组或对象等，那么就不能用 const

2.DOM（文档对象模型）

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

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

1.DOM 树

​ 是：将文档以树状结构直观的表现出来的，又称文档树；是描述网页内容关系的名词

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

2.DOM对象

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

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

document 对象：

  • 他所提供的属性和方法都是用来访问和操作网页内容的
  • 网页所有的内容都在 document 中
  • 是 DOM 里提供的一个对象
1
2
3
4
5
6
7
8
9
10
11
const nav=document.querySelector('css选择器')
//将网页内的第一个所选择的css选择器对象 赋值 给 nav ，此时nav是一个 对象

// 注意选择的是第一个，

//例如：
<div>123</div>
<div>456</div>
const nav=document.querySelector('div')
/*	选择的是 123 那个 div

获取的样例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
    <li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

const l=document.querySelector('ul li:first-child')
//会只获取第一个 li 
// 额。。。。不写  ':first-fhild' 也会只去第一个 li 
//  :nth-child(n)   选择第n个 
//取所有的用
const l=document.querySelectorAll('ul li')
//得到的是一个伪数组，pop(), push() 等不能用，但是可以遍历，获取长度

3.修改对象内容

1
2
3
4
5
6
// 页面的内容
1. 对象名.innerText='修改内容'
// 不会解析修改内容里面的标签

2. 对象名.innerHTML='修改内容'
// 会解析标签

4.删除数组的元素

1
数组名.splice(开始的下标，删除几个)//包括开开始的标签

5.操作元素的属性

（1）常用属性

  • src ， herf 等
1
2
对象.属性 = 值
//修改的方式和对象一样，没有创建，有的修改

（2）元素的样式属性

1
2
3
4
5
6
7
8
9
10
11
对象名.style.样式属性 = 值

//如：
	<script>
        const box=document.querySelector('div')//获取div
//修改宽 背景颜色 外边框
        box.style.width='400px'
        box.style.backgroundColor='red'
        console.log(box)
        box.style.border='2px solid green'
    </script>

特例：

因为 body 是唯一的标签，所以改标签不用获取，直接修改即可

1
document.body.style.样式属性 = 值

（3）操作类名

1
2
3
4
5
6
元素.className = '类名1...'
//用新的类名替换旧的类名 ，类名替换元素 ， 元素是获取的类名，可以用过个类名替换原来的类名

//用下面的代码做解释
box.className = 'avtive'//会实现将 .opa 替换掉
box.className = 'opa active'//添加多个类名，替换 .opa

为了解决 className 容易覆盖类名的问题，衍生出了 classList 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .opa{
            width: 200px;height: 200px;
            background-color: black;
        }
        .active{
            color: red;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="opa">
        文字颜色
    </div>

    <script>
        const box=document.querySelector('.opa')//类名必须写成相应的格式
        box.classList.add('active')//添加一个类
        box.classList.remove('opa')//删除一个类
        box.classList.toggle('opa')//有这个类就删除，没有就添加
       
//最终显示的背景颜色是 .active 中的，添加 .opa 并没有覆盖前者，是因为前者距离 body 比较远

    </script>
</body>
</html>

6.setInterval ( 函数，间隔时间 )

默认时间单位 ms

函数不能写成调用的格式，比如：有名函数 fn() ，写的时候不能加 后面的小括号，立即执行函数也是，不能加后面的小括号，除非用引号的情况

1
2
3
4
let n=setInterval('fn()',1000)
//这种的可以加小括号
//必须有变量名才能关
clearInterval(n)//关闭定时器

7.事件监听

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

比如：在网页上点击一个按钮

让程序检测是否有事件发生，一旦有事件触发，就立即调用一个函数做出响应，也称 绑定事件 或 注册事件

比如：点击可以播放轮播图

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

三要素：

  • 事件源：那个dom元素被时间触发了，要获取dom元素
  • 事件类型：用什么方式触发，比如：单击（click），鼠标经过（mouseenter），鼠标离开（mouseleave）
  • 事件调用函数：要做什么事情

3.BOM (浏览器对象模型)

作用：使用 js 去操作 html 和 浏览器

html > Js
#js
js API总结
https://one-and-one-fourth.github.io/2024/02/03/js_API/
作者
一又四分之一
发布于
2024-02-03 18:02:00
更新于
2024-02-15 10:28:20
许可协议