当前位置：首页 > news >正文

Javascript的API基本内容（一）

news 2025/9/16 17:24:05

一、获取DOM对象

querySelector 满足条件的第一个元素
querySelectorAll 满足条件的元素集合返回伪数组
document.getElementById 专门获取元素类型节点，根据标签的 id 属性查找

二、操作元素内容

通过修改 DOM 的文本内容，动态改变网页的内容。

innerText 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。
innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。

总结：如果文本内容中包含 html 标签时推荐使用 innerHTML，否则建议使用 innerText 属性

三、常用函数

（1）Math.floor()

英文含义为：地板，所以是向下取整，方便记忆叫它地板函数。会取不大于自变量的最大整数，这样自变量是3.1或3.9是没有区别的，返回都是3；自变量是-2.1或-2.9也是没有区别的，返回都是-3；例如:

Math.floor(11.46)=Math.floor(11.68)=Math.floor(11.5)=11
Math.floor(-11.46)=Math.floor(-11.68)=Math.floor(-11.5)=-12

（2）Math.ceil()

英文含义为：天花板，所以是向上取整，它就是天花板函数。会取不小于自变量的最大整数，这样自变量是3.1或3.9，返回都是4；自变量是-2.1或-2.9，返回的都是-2；例如:

Math.ceil(11.46)=Math.ceil(11.68)=Math.ceil(11.5)=12
Math.ceil(-11.46)=Math.ceil(-11.68)=Math.ceil(-11.5)=-11

（3）Math.round()

英文含义为：周围，环绕，这个就是常用的四舍五入函数。因为它会返回离自变量最近的整数，这个返回的整数可能大于也可能小于原来的数，但是一定是离它最近的那个整数，比如12.5返回13，12.4返回12。例如：

小数点后第一位<5
正数：Math.round(11.46)=11
负数：Math.round(-11.46)=-11小数点后第一位>5
正数：Math.round(11.68)=12
负数：Math.round(-11.68)=-12小数点后第一位=5
正数：Math.round(11.5)=12
负数：Math.round(-11.5)=-11
总结：以上逻辑即俗称的“四舍五入”

（4）Math.random()

关于random(),若要取随机整数，前提得知道数组API中的Math.random()方法能取0–1的随机数，它的范围是[0,1)，也就是取包括0但不包括1的随机数。
其次，数组API中有一个Math.floor()方法代表向下取整，Math.floor(X)的代表的是取≤ X 且最接近X的整数。
那么我们可以通过Math.random()先取得随机数，再通过乘法计算得到大致范围，最后通过Math.floor()进行取整加工就可以达到目的了。

int num=(int)(Math.random()*n); //返回大于等于0小于n之间的随机数

//返回指定范围的随机数(m-n之间)的公式:

Math.random()*(n-m)+m；或者 Math.random()*(n+1-m)+m

四、常用属性修改

（1）img的属性

<body>
<img src="img/1.png" alt="">
<script>
//获取图片元素
const img=document.querySelector('img')
//修改图片对象的属性
img.src='img/2.png'
img.title="你好"
</script>
</body>

（2）控制样式属性（style）

通过元素节点获得的 style 属性本身的数据类型也是对象，如 box.style.color、box.style.width 分别用来获取元素节点 CSS 样式的 color 和 width 的值。

<body><div class="box">随便一些文本内容</div><script>// 获取 DOM 节点const box = document.querySelector('.intro')box.style.color = 'red'box.style.width = '300px'// css 属性的 - 连接符与 JavaScript 的 减运算符// 冲突，所以要改成驼峰法box.style.backgroundColor = 'pink'</script>
</body>

任何标签都有 style 属性，通过 style 属性可以动态更改网页标签的样式，如要遇到 css 属性中包含字符 - 时，要将 - 去掉并将其后面的字母改成大写，如 background-color 要写成 box.style.backgroundColor

（3）操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

   <style>.nav{background: pink;color: hotpink;}</style>
</head>
<body><div class="box">随便一些文本内容</div><script>// 获取 DOM 节点const box = document.querySelector('div')box.className = 'nav'</script>
</body>

注意：

1.由于class是关键字, 所以使用className去代替

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

（4）通过 classList 操作类控制CSS

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

追加一个类：元素.classList.add('类名')
删除一个类：元素.classList.remove('类名')
切换一个类：元素.classList.toggle('类名')

 <style>div {width: 200px;height: 200px;background-color: pink;}.active {width: 300px;height: 300px;background-color: hotpink;margin-left: 100px;}</style>
</head><body><div class="one"></div><script>// 1.获取元素// let box = document.querySelector('css选择器')let box = document.querySelector('div')// add是个方法 添加  追加// box.classList.add('active')// remove() 移除 类// box.classList.remove('one')// 切换类box.classList.toggle('one')</script>
</body>

（5）自定义属性

标准属性: 标签天生自带的属性比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected

自定义属性：在html5中推出来了专门的data-自定义属性，在标签上一律以data-开头

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

<body><div data-id="1"> 自定义属性 </div><script>// 1. 获取元素let div = document.querySelector('div')// 2. 获取自定义属性值console.log(div.dataset.id)</script>
</body>

五、间歇函数

setInterval 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数

  // 1. 定义一个普通函数function repeat() {console.log('不知疲倦的执行下去....')}// 2. 使用 setInterval 调用 repeat 函数// 间隔 1000 毫秒，重复调用 repeatsetInterval(repeat, 1000)

倒计时5秒案例

 <div>倒计时：</div><button>剩下5秒</button><script>const btn = document.querySelector("button");let i = 5;let n = setInterval(function () {i--;btn.innerText = `剩下${i}秒`;if (i == 0) {clearInterval(n);}}, 1000);</script>

六、轮播图基础版

<!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>轮播图点击切换</title><style>.slider {width: 500px;height: 400px;margin: 0 auto;}.slider .slider-wrapper {width: 500px;height: 300px;}.slider img {width: 500px;height: 300px;margin: 0;padding: 0;}.slider .slider-footer p {margin: 0;padding-top: 10px;width: 300px;height: 30px;line-height: 30px;padding-left: 30px;}.slider .slider-footer {top: 0;height: 100px;background-color: rgb(83, 108, 108);position: relative;}.slider .slider-footer .slider-indicator {display: flex;}.slider .slider-footer li {list-style: none;width: 12px;height: 12px;margin-left: 15px;border-radius: 50%;background-color: rgb(87, 68, 68);}.slider .slider-footer li.active {background-color: rgb(236, 225, 225);}.slider .slider-footer .toggle {right: 20px;top: 10px;position: absolute;}</style></head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>// 1. 初始数据const sliderData = [{url: "./images/slider01.jpg",title: "对人类来说会不会太超前了？",color: "rgb(100, 67, 68)",},{url: "./images/slider02.jpg",title: "开启剑与雪的黑暗传说！",color: "rgb(43, 35, 26)",},{url: "./images/slider03.jpg",title: "真正的jo厨出现了！",color: "rgb(36, 31, 33)",},{url: "./images/slider04.jpg",title: "李玉刚：让世界通过B站看到东方大国文化",color: "rgb(139, 98, 66)",},{url: "./images/slider05.jpg",title: "快来分享你的寒假日常吧~",color: "rgb(67, 90, 92)",},{url: "./images/slider06.jpg",title: "哔哩哔哩小年YEAH",color: "rgb(166, 131, 143)",},{url: "./images/slider07.jpg",title: "一站式解决你的电脑配置问题！！！",color: "rgb(53, 29, 25)",},{url: "./images/slider08.jpg",title: "谁不想和小猫咪贴贴呢！",color: "rgb(99, 72, 114)",},];const img = document.querySelector("img");const p = document.querySelector("p");let i = 0;setInterval(function () {i++;if (i >= sliderData.length) {i = 0;}// 把字写到 p里面p.innerHTML = sliderData[i].title;//更换图片img.src = sliderData[i].url;// 小圆点// 先删除以前的activedocument.querySelector(".slider-indicator .active").classList.remove("active");// 只让当前li添加activeconst li = document.querySelector(`.slider-indicator li:nth-child(${i + 1}`);li.classList.add("active");}, 1000);</script></body>
</html>