JavaScript进阶学习day4-APIs_day1

_Zora.

已于 2024-03-19 17:03:39 修改

阅读量1.4k

点赞数 47

文章标签： javascript 学习前端

于 2024-03-18 23:43:32 首次发布

本文链接：https://blog.csdn.net/m0_65359288/article/details/136825608

版权

1、变量

const优先，因为const定义了就不会被改变，如果需要改变就用let定义。

注意的是数组、对象用const定义可以能够对其进行操作（因为对象、数组还是原来的，只是追加没有改变），注意的是如果是对整个对象、数组操作就不行了。

dom的操作

1、获取dom对象

①css选择器获取dom元素（css怎么写，它就怎么写）

选一个元素document.querySelector('XXX')

注意这个写法（是反引号）

const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)

选多个元素document.querySelectorAll('XXX')（注意选择document.querySelectorAl返回的是伪数组（即便只有一个元素），要通过循环获取其内容。伪数组：没有pop和push方法）

  <body>
    <div class="box1" style="width: 100px;height: 100px;background-color: aquamarine;"></div>
    <div id="box2" style="width: 100px;height: 100px;background-color: palevioletred;"></div>
    <ul>
      <li style="width: 100px;height: 100px;background-color: aquamarine;">111</li>
      <li style="width: 100px;height: 100px;background-color: aquamarine;">222</li>
    </ul>
    <script>
          //类名获取
      const box1 = document.querySelector('.box1')
          //ID名获取
      const box2 = document.querySelector('#box2')
      //选出第一个孩子
      const li = document.querySelector('ul li:first-child')
      console.log(li);
      // li.style.backgroundColor = 'red'
      //选出所有的孩子
      const lis = document.querySelectorAll('ul li')
      console.log(lis)
    </script>
  
  </body>

②获取dom元素内容

  const box = document.querySelector('.box')
  box.innerText = '我可以更改内容，但是不解析标签'
  box.innerHTML = '<strong>我不仅可以更换内容，还能解析标签<strong/>'

③获取body直接document.body

④案例（一二三等奖）(伪代码)

  <h1>
      一等奖：
  <span class="one"></span>
  </h1>
  <h2>
      二等奖：
  <span class="two"></span>
  </h2>
  <h3>
      三等奖：
  <span class="three"></span>
  </h3>
  
  const arr = ['小明', '小红', '小刚', '小丽', '小强']
  //随机生成数组下标
  let random = Math.floor(Math.random() * arr.length)
  //一等奖
  const one = document.querySelector('.one')
  one.innerHTML = arr[random]
  //删除已经出现的数组元素，避免出现重复
  arr.splice(random, 1)
  //二等奖
  //random要重新赋值，因为数组长度已经发生变化了
  let random2 = Math.floor(Math.random() * arr.length)
  const two = document.querySelector('.two')
  two.innerHTML = arr[random2]
  //三等奖
  //random要重新赋值，因为数组长度已经发生变化了
  let random3 = Math.floor(Math.random() * arr.length)
  const three = document.querySelector('.three')
  three.innerHTML = arr[random3]

2、修改dom元素的属性

①src:直接修改路径(对象.src='XXXX')

  let img = document.querySelector('img')
  img.addEventListener('click', function () {
      let index = Math.floor(Math.random() * (6 - 1 + 1)) + 1
      img.src = `./images/${index}.webp`
  })

②修改样式

对象.style.样式='XXX'

  const box=document.querySelector('.box')
  box.style.width='100px'//记得有些属性要加单位

③通过修改类名来修改样式（用于要修改特别多的样式）

  const box=document.querySelector('.box')
  box.className='newbox'//类名变为newbox，新 值变旧值

④针对上面修改它的类名会出现类名覆盖，因此新增了几个方法

对象.classList.add('类名')//添加类名

对象.classList.remove('类名')//删除类

对象.classList.toggle('类名')//切换类（有就切换，没有就加上）

表单

操作表单元素

①获取表单里面的内容

const input=document.querySelector('input')

input.value//获取到的是input的内容

input.value=XXX//修改表单的内容

input.type=password//修改表单的类型为密码框

②复选框type="checkbox"

1)获取复选框是否被选择

const input=document.querySelector('input')

input.checked//复选框是否被选中，勾选上就是true，没有就是false，返回的是布尔值

input.checked=true//给其赋值就是选中

input.checked=false//给其赋值就是没选中

③按钮是否被禁用

const button=document.querySelector(' button')

button.disable=true//按钮被禁用

button.disable=false//按钮没有被禁用

自定义属性

data-属性名="属性值"

获取自定义属性：对象.dataset.自定义属性名

  <div data-set="123">1111</div>
  const div = document.querySelector('div')
  console.log(div.dataset.set);

定时器（间歇函数）

1、开始定时器

  let timer = setInterval(function () {
      console.log(123);
  }, 1000)
  let timer1 = setInterval(function () {
      console.log(456);
  }, 1000)
  clearInterval(timer1)

①setInterval(函数，间隔时间（这个时间为毫秒单位）)

②setInterval(函数名，间隔时间（这个时间为毫秒单位）)（这个写法一般是用于函数写在外面）

2、关闭定时器

clearInterval(定时器名字)

3、案例

  <button disabled="true">我已经阅读该协议</button>
  
  const button = document.querySelector('button')
  // 倒计时
  let time = 10;
  let timer = setInterval(function () {
      time--
      button.innerHTML = `我已经阅读该协议${time}秒`
      if (time == 0) {
          button.disabled = false
          clearInterval(timer)
          button.innerHTML = '同意'
      }
  }, 1000)