JS之DOM(含BOM)的详细操作(下)

一颗大白菜呀

已于 2024-08-19 13:55:11 修改

阅读量535

点赞数 25

文章标签： javascript 前端开发语言

于 2024-08-16 13:55:45 首次发布

本文链接：https://blog.csdn.net/internet__/article/details/141141661

版权

日期对象

实例化

掌握实例化当前时间和指定时间

日期对象的方法

需要注意的是月份是0-11 getDay获得星期是0-6所以星期日是0

页面显示当前时间

toLocaleString()显示的格式如图所示

toLocaleDateString()显示的是2022/4/1

toLocaleTimeString()显示的是09:41:21

时间戳

获得时间戳的三种方法

重点是第二种，new Date()返回的是当前时间的详细字符串，在前面添‘+’号转为数子型即时间戳

返回指定时间的时间戳

倒计时案例

结点操作

DOM结点

元素结点是重点（标签结点）

查找结点

之前都是用documen.document.querySelector()去获取标签对象

现在可以用对象.属性去获得父级点、孩子结点、兄弟结点等

增加结点

在页面中增加元素，分为两步：先创建结点再追加结点

创建结点

追加结点

在ul里追加li 用让li永远加在第一个 inserBefore()放到哪个元素前面用ul.children[0](返回的是伪数组)

克隆结点

删除结点

Element.remove() 方法，把对象从它所属的 DOM 树中删除

M(移动)端事件

swiper的使用

swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，即做移动端的轮播图

使用过程：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发去网址看

案例学生信息表上传(重要）

  <script>
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const gender = document.querySelector('.gender')
    const salary = document.querySelector('.salary')
    const city = document.querySelector('.city')
    const info = document.querySelector('.info')
    let body = document.querySelector('tbody')
    const arr = []
    const ele = document.querySelectorAll('[name]')
    // 是绑定表单的提交事件 不要给<button>绑定事件了
    info.addEventListener('submit', function (e) {
      // 首先要阻止元素默认行为 这样页面才不会跳转，才能打印等
      e.preventDefault()
      // 实现表单验证，有数据为空的时候不能录入
      for (let i = 0; i < ele.length; i++) {
        if (ele[i].value === '') {
          return alert('数据不能为空')
        }
      }
      const obj = {
        stuId: arr.length + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
      }
      // console.log(obj);
      arr.push(obj)
      // 提交完 清空表单
      this.reset()
      render()

    })
    // 渲染数据
    function render() {
      body.innerHTML = ''
      // 创建tr元素
      for (let i = 0; i < arr.length; i++) {
        const tr = document.createElement('tr')
        tr.innerHTML = `
          <td>${arr[i].stuId}</td>
          <td>${arr[i].uname}</td>
          <td>${arr[i].age}</td>
          <td>${arr[i].gender}</td>
          <td>${arr[i].salary}</td>
          <td>${arr[i].city}</td>
          <td>
            <a href="javascript:" data-id='${i}'>删除</a>
          </td>
         `
        body.appendChild(tr)
      }
    }
    // 删除数据
    body.addEventListener('click', function (e) {
      // console.log(e.target.dataset.id);

      arr.splice(e.target.dataset.id, 1)
      render()
    })

  </script>

BOM

定时器-延迟函数

应用：定时关闭的广告

间歇函数和延时函数对比

JS执行机制(事件循环event loop)

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。

结果都是111133332222

因为1111和3333的代码先进入执行栈，2222的代码进入任务队列(消息队列)，等执行栈的代码执行结束，去看消息队列中是否有任务处理完毕，有的话加入执行栈去执行，执行完再去看消息队列，一直重复，重复的过程叫事件循环。

同步和异步的区别

哪些是异步任务要放到任务队列

执行流程图

1. 先执行执行栈中的同步任务。 2. 异步任务放入任务队列中。 3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

location对象

案例五秒之后跳转页面

<body>
  <a href="http://www.baidu.com"><span>5</span>秒后自动跳转</a>
  <script>
    let num = 5
    let timeId = setInterval(function () {
      num--
      const a = document.querySelector('a')
      a.innerHTML = `<span>${num}</span>秒后自动跳转`
      if (num === 0) {
        clearInterval(timeId)
        location.href = 'http://www.baidu.com'
      }
    }, 1000)
  </script>
</body>

navigator对象

这段代码检测如果是移动端设备就跳转到页面，否则不跳

知道navigator中的userAgent属性就行了

立即执行函数 function(){}()这样是错的因为前面没被解析成整体，可以给前面加括号，也可以在前面写！function(){}()或这+function(){}() ！

// 检测 userAgent（浏览器信息）
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn' }
})()

history对象

前进后退按钮的实现

本地存储localStorage

我们之前的案例是要页面一刷新数据就都没了，所以我们可以把数据存到localStorage中

存进去的都是字符串类型

sessionStorage

存储复杂数据类型

存储过程：（自己记录的）

注意括号里哪些要加引号，哪些不用，传的是对象就不用

JSON.stringify(obj)将对象转化为JSON格式

JSON.parse返回的是装有对象的数组还是单个对象？

JSON.parse(localStorage.getItem('obj')) 将JSON格式转化为对象，如果里面的JSON参数来自数组的 JSON 数据，则 JSON.parse 会将其转换为 JavaScript 数组，其他就是单个对象

JSON.stringify(obj)和JSON.parse(localStorage.getItem('obj'))可以处理数组

  <script>
    // 本地存储只能存字符串
    const obj = {
      uname: 'pink',
      age: 18,
      gender: '女'
    }
    // 把对象转换为JSON格式 存入
    //JSON格式即{"uname":"pink","age":"18","gender":"女"} 全部都要双引号
    const item = JSON.stringify(obj)
    localStorage.setItem('obj', item)
    // 这个是存进去的就是JSON字符串
    //把字符串取出来转为对象
    // console.log(localStorage.getItem('obj'));

    console.log(JSON.parse(localStorage.getItem('obj')));

  </script>

数组的Map方法和Join方法

数组的map方法好处在与遍历数组对每个元素进行处理，然后再返回一个新的数组，如下面的例子

数组的Join方法的好处在于把数组的每个元素进行拼接成一个字符串，中间的间隔符自己选

学生就业统计表案例(很重要多练习几次 p135-p137）

正则表达式

是什么？

语法

判断是否有符合规则的字符串：test()返回ture或者false

检索（查找）符合规则的字符串：exec()返回的是一个数组，没找到返回null

元字符

参考文档

Ø MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions Ø 正则测试工具: http://tool.oschina.net/rege

边界符

如果 ^ 和 $ 在一起，表示必须是精确匹所以只有‘二哈’是正确的其余全错

量词

注意：逗号左右两侧千万不要出现空格

只能有俩个哈其余都错

字符类

取反符号^ 和 . 符号

总结

字符类预定义

修饰符

替换敏感词案例wsm

<body>
  <textarea name="" id="" cols="30" rows="10"></textarea>
  <button>发布</button>
  <div></div>
  <script>
    const tx = document.querySelector('textarea')
    const btn = document.querySelector('button')
    const div = document.querySelector('div')
    btn.addEventListener('click', function () {
      div.innerHTML = tx.value.replace(/激情|基情/g, '**')
    })
  </script>
</body>

为什么input标签一定要有name属性

小兔鲜案例

表单验证采用了change()事件，只有内容发送改变了失去焦点才验证一次，用blur是每失去一次焦点就验证一次

放大镜效果案例

什么是Element.getBoundingClientRect()方法？有什么作用？

作用：用来获取元素的位置以及大小相关的信息。
是DOM元素的一个方法，返回一个DOMRect对象，包含元素的大小及其相对于视口的位置

语法

element.getBoundingClientRect（）

该对象有6个属性：top,lef,right,bottom,width,height；

{
bottom：430, //元素底部距离窗口顶部的距离 (等于 y + height)
height:340, //元素的高度
left:120, //元素左侧距离窗口左侧的距离
right:460, //元素右侧距离窗口右侧的距离(等于 x + width)
top:90, //元素顶部距离窗口的距离
width:340, //元素的宽度
x:120, //元素左上角相对于视口的横坐标
y:90 //元素左上角相对于视口的纵坐标
}

 <script>
    const small = document.querySelector('.small')
    const middle = document.querySelector('.middle')
    const large = document.querySelector('.large')
    small.addEventListener('mouseover', function (e) {
      if (e.target.tagName === 'IMG') {
        // 处理选中的小绿边
        this.querySelector('.active').classList.remove('active')
        e.target.parentNode.classList.add('active')
        // 更换中间盒子的图片
        middle.querySelector('img').src = e.target.src
        large.style.background = `url(${e.target.src})`
      }

    })


    // 鼠标经过中等盒子 显示隐藏大盒子
    middle.addEventListener('mouseenter', show)
    middle.addEventListener('mouseleave', hide)
    let timeId = 0
    function show() {
      clearTimeout(timeId)
      large.style.display = 'block'
    }
    function hide() {
      timeId = setTimeout(function () {
        large.style.display = 'none'
      }, 200)
    }
    // 鼠标经过中等盒子 显示黑色遮罩层
    const layer = document.querySelector('.layer')
    middle.addEventListener('mouseenter', function () {
      layer.style.display = 'block'
    })
    middle.addEventListener('mouseleave', function () {
      layer.style.display = 'none'
    })

    // 黑色遮罩层的移动
    middle.addEventListener('mousemove', function (e) {
      // 为什么用getBoundingClientRect()  因为不受父级定位的影响 返回的是距离可视窗口的坐标
      let x = e.pageX - middle.getBoundingClientRect().left
      // 为什么要减去scrollTop 因为当可视窗口变化的时候 getBoundingClientRect().top的值改变
      let y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop
      if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {
        let mx = 0, my = 0
        if (x < 100) mx = 0
        if (x >= 100 && x < 300) mx = x - 100
        if (x > 300) mx = 200

        if (y < 100) my = 0
        if (y >= 100 && y < 300) my = y - 100
        if (y > 300) my = 200
        layer.style.left = mx + 'px'
        layer.style.top = my + 'px'

        // 大图的移动 跟黑色遮罩层的方向相反 最后的单位px一定不要忘了加
        large.style.backgroundPositionX = -2 * mx + 'px'
        large.style.backgroundPositionY = -2 * my + 'px'

      }
    })
  </script>

一颗大白菜呀

关注

25
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
JS之DOM(含BOM)的详细操作(下)

JSON.parse(localStorage.getItem('obj')) 将JSON格式转化为对象，如果里面的JSON参数来自数组的 JSON 数据，则 JSON.parse 会将其转换为 JavaScript 数组，其他就是单个对象。因为1111和3333的代码先进入执行栈，2222的代码进入任务队列(消息队列)，等执行栈的代码执行结束，去看消息队列中是否有任务处理完毕，有的话加入执行栈去执行，执行完再去看消息队列，一直重复，重复的过程叫事件循环。1. 先执行执行栈中的同步任务。
复制链接

扫一扫