Javascript的API基本内容（一）

七小山

已于 2023-03-12 16:03:03 修改

阅读量1.3k

点赞数 1

分类专栏： JS 文章标签： javascript 前端 vue.js

于 2023-02-26 14:21:43 首次发布

本文链接：https://blog.csdn.net/qq_55928824/article/details/129225295

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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

一、获取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 毫秒，重复调用 repeat
  setInterval(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;
      // 小圆点
      // 先删除以前的active
        document
          .querySelector(".slider-indicator .active")
          .classList.remove("active");
        // 只让当前li添加active
        const li = document.querySelector(
          `.slider-indicator li:nth-child(${i + 1}`
        );
        li.classList.add("active");
      }, 1000);
    </script>
  </body>
</html>