第四周预习博客

第四周预习博客

前言

由于可恶的篮球杯 我要速通预习了！！！！！！！！

（失败了 bushi）

变量声明

数组和对象使用const！

DOM

DOM是 Document Object Model 其作用就是给我们的html树化方便JS进行增删改查

比如html中是

<div>
    我是div
</div>

访问方法

匹配不到就会返回null捏

第一个匹配元素

document.querySelector('css选择器')

多个匹配元素

可以理解为得到一个tuple 没有方法之类的

document.querySelectorAll('css选择器')

其他的

const one = document.getElementById('one')//通过id
 const two = document.getElementsByTagName('div')//通过标签名
const three = document.getElementsByClassName('three')//通过类名

修改元素

你可以理解成结构体 获得的每个对象的属性可以理解成结构体中的元素

举个例子

const img = document.querySelector('img')//获取元素
img.src = `../../images-02/0${random}.png`//操作常用属性

修改元素css

style直接修改

要加入style

text.style.font-color = red

修改类名

obj.className = 'class name'

批量修改

学长写的太全面了。。

直接看代码吧

元素.classList.add('类名')//追加一个类
元素.classList.remove('类名')//删除一个类
元素.classList.toggle('类名')//切换一个类
元素.classList.contains('类名')//包含一个类
注：此时类名不要加.

定时调用函数

开启

setInterval(fun, time)

关闭

let timer = setInterval(fun,time)
 clearInterval(timer)

tips 匿名函数

可以立即执行函数 避免污染

let fun = function()
{
	your function
}

DOM事件基础

事件监听

程序检测 dom是否被触发 可以检测出三件事

源头 类型 调用什么

GRAMMAR

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

事件类型

鼠标事件 点击click 经过moseenter 离开mouseleave

焦点事件 表单获得光标focus 失去光标blur

键盘事件 键盘按下keydown 键盘抬起keyup

文本事件 输入input

你可以获取到的

部分常用属性

type：获取当前的事件类型

clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置

key：用户按下的键盘键的值

DOM简易进阶

事件冒泡

子元素触发的时候回一次调用父级元素的同名事件 这很坏了 我们需要尽量避免

事件对象.stopPropagation()

阻止默认（default）行为

e.preventDefault()

更多的事件

加载

load 页面加载 在加载完毕之后就会除法

DOMContentLoaded DOM加载完毕

滚动

scroll 滚动时持续触发的事件

scrollLeft scrollTOP 滚动距离

页面尺寸

resize 窗口尺寸改变时触发

window.addEventListener('resize',function(){
 let w = document.documentElement.clientWidth
 console.log(w)
 })

clientWidth 页面宽度

clientHeight 页面高度

offsetWidth offsetHeight 宽度和高度 包含 border和padding

offsetLeft offsetTop 距离父元素的左上距离

Dom节点

日期

获得当前时间

const date = new Date()

获得指定时间

const date = new Date('2024-5-9')

时间戳

时间戳指毫秒数

未来时间戳减去现在的就可以实现倒计时的效果

那么如何获取呢

const date = new date()
// date中是指定的时间
console.log(date.getTime())

节点操作

DOM中的每一个内容都是一个节点

节点分为： 元素（指的是标签） 属性 文本

查找（找不到的都返回null）

父节点查找

元素.parentNode

子节点查找

childNodes（获得多有的）

父元素.children

增加节点

你可以通过代码创造出一些网页元素而不是去修改

创建方法

document.createElement('标签名')

插入父元素

//插入最后一个子元素
父元素.appendChild(要插入的元素)

//插入父元素中的子元素的前面
父元素.insertBefore(要插入的元素，在哪个元素前面)

删除节点

父元素.removeChild(要删除的元素)

M（moblie）时间

手机当然要用手来操作

touchstart 触摸

touchmove 华东

touchend 移开

BOM

Browser Object Model 浏览器

我们来改变window（至高无上的u全局变量的）

代码延迟执行（该方法只执行一次）

setTimeout(回调函数，等待的毫秒数）

清除延时函数（没看懂。。）

let timer = setTimeout(回调函数，等待的毫秒数)
 clearTimeout(timer)

JS执行

同步

一个一个的去执行 有一个执行栈

异步

同一个时间做多个事情

类型： 事件click 资源加载load之类 定时器

location

location是一个对象

存在三个常用属性和一个方法

href 获取URL地址

search 获取地址中携带的参数 ？ 什么意思？

hash ？？？

reload 是方法 来刷新当前页面 传入 true的时候刷新页面

bnt.addEventListener('click',function(){
 location.reload(true)//强制刷新
})

navigator

检测浏览器本身的信息

可以检测浏览器本身的版本和平台

// 检测 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' }
 })()

本地存储

键值对存储一些数据 在关闭浏览器的时候生命周期就会结束

 // 存储数据
localStorage.setItem('key', 'value');
 // 获取数据
const value = localStorage.getItem('key');
 // 删除数据
localStorage.removeItem('key');
 // 清空所有数据
localStorage.clear()；

但是有一个问题 本地的话只能处理字符串

所以我们可以把复杂数据转化成json来本地化存储

对象–》字符串

 localStorage.setItem('element',JSON.stringify(element))

字符串 --》 对象

const obj = JSON.parse(localStorage.getItem('element'))