视图、时间函数、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();
事件委托
利用事件冒泡
  • 第1个
  • 第2个
  • 第3个
  • 第4个
//事件委托给父级添加事件 冒泡到父级 可用于动态加载的子元素
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]

你可能感兴趣的:(前端,前端,学习,javascript)