视图、时间函数、BOM、DOM、正则＜前端学习笔记＞

JS基础

隐式类型转换

+号作为正号解析可以转换成Number 

    // +'11' === 11
    let price = +prompt("输入商品价格:")
    let num = +prompt("输入购买数量：")

冒泡排序

先处理首尾，大循环次数==数组长度-1

function sort(arr){
    let len = arr.length;
    for (let i = 0;i<len - 1 ;i++){
        for (let j = 0;j < len - 1 - i  ;j++){
            if (arr[j] < arr[j+1]){
                [arr[j] , arr[j+1]] = [arr[j+1] ,arr[j]]
            }
        }
    }
    return arr;
}

WebApi

分类

DOM（文档对象模型）
BOM（浏览器对象模型）

---

类名的操作，作用不同样式

// 获取DOM元素，删除或添加className
let box = document.querySelector('div')
// classList 是元素ClassName集合
box.classList.remove('one')
box.classList.add('two')
//切换类 有这个类名就加上，没有就减去
box.classLsit.toggle('one')

随机数获取

//  获取0-100的随机数
let random = getRandom(0,100)

---

事件类型

鼠标事件

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

焦点事件

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

键盘事件

keydown --键盘按键按下
keyup --键盘按键抬起

文本事件

input --用户输入

---

DOM节点获取

获取父节点

子元素.parentNode

获取子节点

父元素.children[i]

查找兄弟节点

兄弟.nextElementSibling
兄弟.previousElementSibling

创建追加节点

    // 创建一个节点
    let li = document.createElement('li')
    ul.appendChild(li)
    // insertBefore(追加的节点，放到此节点前面)
    ul.insertBefore(li,ul.children[1])

克隆节点

---元素.cloneNode(布尔值)---
--true，克隆时会包含后代节点一起克隆
--false，克隆时不包含后代节点
--默认为false

删除节点

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

---

时间对象

// 实例化时间对象  
let date = new Date()
// 获取年月日 星期 小时 分钟 秒
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
let week = date.getDay() + 1
let hours = date.getHours()
let minutes = date.getMinutes()
let second = date.getSeconds()
//获取现在时间戳
let timestamp1 = date.getTime()
let timestamp2 = Date.parse(date)
let timestamp3 = date.valueOf()
let timestamp4 = +date
let timestamp5 = Date.now()
// 获取将来时间戳
let to = +new Date('2022-5-30 12:00:00')
//时间戳(1970年1月1日00：00：00 至现在的毫秒数)转 格式
// TODO

//倒计时 时间计算
let timestamp1 = +new Date('2023-12-12 12:00:00')
let timestamp2 = Date.now()
//毫秒转为秒
let seconds = (timestamp1 - timetamp2)/1000
//天
let day = parseInt(seconds/60/60/24)
//小时
let hours = parseInt(seconds/60/60%24) //超过24小时 进位 重新计算
//分钟
let min = parseInt(seconds/60%60) //超过60分钟 进位 重新计算
//秒
let sec = parseInt(seconds%60) //超过60秒 进位 重新计算`    

---

事件

事件注册

传统on...注册
    --同一个对象，后面注册的事件会覆盖前面注册（同一个事件）
    --直接使用null覆盖就可以实现事件解绑
    --都是冒泡阶段执行的
事件监听注册
    --addEventListener(事件类型，事件处理函数，，是否使用捕获)
    --后面注册的事件不会覆盖前面注册的事件（同一个事件）
    --可以通过第三个参数确定是在冒泡或者捕获阶段执行
    --必须使用removeEventListener(事件类型，事件处理函数，获取捕获或者冒泡阶段)
    --匿名函数无法解绑

事件对象

/* 
-- 在事件绑定的回调函数的第一个参数就是事件对象
-- 一般命名 event , e ,ev
-- 对象里有触发时的相关信息
 */  
元素.addEventListener('click',function(e){
    console.log(e)
})

常见的事件对象属性
1. type 
    -- 获取当前事件类型
1. clientX / clientY
    -- 获取光标相对于浏览器可见窗口左上角的位置
2. offsetX / offsetY
    -- 获取光标相对于当前DOM元素左上角的位置
3. pageX / pageY
    -- 获取光标相对于整个页面的坐标
4. key
    -- 用户按下键盘的键
    -- 现在不提倡使用keyCode

事件流

事件完整执行过程中的流动路径
--冒泡
    __ 当一个元素的事件被触发时，同样的事件会在该元素的所有祖先元素中依次被触发。 __
--捕获
    1. 从DOM的根元素开始去执行对应的事件（从外到里）
    2. addEventListener(事件类型，事件处理回调，是否使用捕获机制)
        --默认为false，true捕获阶段触发（很少使用）

阻止事件流

    //禁止事件冒泡
    e.stopPropagation();
    //阻止事件默认行为
    e.preventDefault();

事件委托

利用事件冒泡

<ul>
    <li>第1个</li>
    <li>第2个</li>
    <li>第3个</li>
    <li>第4个</li>
</ul>

//事件委托给父级添加事件 冒泡到父级 可用于动态加载的子元素
let ul = document.querySelector('ul')
ul.addEventListener('click',function(e){
    alert('我点击了'+e.target)
})

---

网页动效

加载事件

load事件
    -- 监听整个页面资源，给window加
DOMContentLoaded
    -- 给document加，当初始化的HTML文档被完全加载和解析完成之后(DOM树完成)，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载.

scroll滚动家族

使用场景：
    滚动一段距离，隐藏元素

获取宽高：
    -- 获取元素的内容总宽度（不包含滚动条）返回值不带单位
    -- scrollWidth(this宽度)和scrollHeight(内容高度) 可修改（无单位）
获取位置
    -- 获取元素内容往左、往上滚出去看不到的距离
    -- scorllLeft 和 scorllTop(页面被拉出的长度)

// 返回html元素,检测页面头部滚动距离
document.documentElement.scrollTop

offset家族

获取宽高：
    -- 获取元素自身宽高、包含自身设置的宽高、padding、border（盒模型 外加模式）
    -- offsetWidth 和 offsetHeight
获取位置：
    -- 获取元素距离自己定位父级元素的左、上距离
    -- offsetLeft 和 offsetTop （只读属性）

client家族

获取宽高：
    -- 获取元素的可见部分宽高（不包含边框，滚动条等）
    -- clientWidth 和 clientHeight
获取位置：
    -- 获取左边框和上边框宽度
    -- clientLeft 和 clientTop （只读属性）
会在窗口尺寸改变的时候触发事件：
    -- resize
检测屏幕宽度：

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

Window对象

BOM（浏览器对象模型 ）

window
    -- document
    -- screen
    -- navigator
    -- location
    -- history
window时最大对象

定时器-延时函数

setTimeout(回调，时间)

JS执行机制

同步
    -- 执行栈
异步
    -- 任务队列
        -- 宏任务
        -- 微任务 （优先）

location对象

 location.href   //得到url地址，可读写
 location.search //地址中携带参数时，可得到？后面的内容
 location.hash //获取地址中的哈希值， # 号后面部分
 location.reload(true) //刷新当前页面，true表示强制刷新

navigator对象

数据类型为对象，该对象下记录了浏览器自身的相关信息
常用属性和方法：
    -- 通过userAgent检测浏览器的版本及平台

history对象

浏览器前进后退
-- back() 后退
-- forward() 前进
-- go( 参数) 参数如果是1前进1个页面，如果是-1后退1个页面

本地存储

大小5M左右 不可跨域
-- localStorage 
-- sessionStorage

正则表达式

边界符

     ^  --以...开始
     $  --以...结束
    写在一起则是精确匹配(中间必须符合要求)

量词

    *  -- 重复零次或更多次
    +  -- 重复一次或更多次
    ?  -- 重复零次或一次
    {n}  -- 重复n次
    {n,}  -- 重复次或更多次
    {n,m}  -- 重复n到m次

console.log(/a*/.test('aaa')) //true
console.log(/a+/.test('aaa')) //true
console.log(/a{5}/.test('aaaaa')) //true

元字符

字符类

[] -- 匹配字符集合
[^a-z]  -- 取反
.  -- 匹配换行符之外的任何单个字符

console.log(/^[a-z]$/.test('f')) //true 一个字符才为真
console.log(/^([a-z])*$/.test('fwqe')) //true 26个字母重复零或更多次出现

预定类

\d  -- 匹配0-9之间的任一数字，相当于[0-9]
\D  -- 匹配所有0-9以外的字符，相当于[^0-9]
\w  -- 匹配任意的字母、数字和下划线，相当于[A-Za-z0-9]
\W  -- 除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9]
\s  -- 匹配空格（包括换行符、制表符、空格符）相当于[\t\r\n\v\f]
\S  -- 匹配非空格的字符，相当于[^\t\r\n\v\f]