window
BOM(浏览器对象模型)
Browser Object Model
window是浏览器内置的全局对象
document是实现dom的基础,依附于window属性 可省略
延时器和定时器
setTimeout
仅仅只执行一次 延迟执行
清除clearTimeout(延时器名称)
递归函数是自己调用自己
let btn = document. querySelector ( 'button' )
let times = setTimeout ( function ( ) {
console. log ( '111' ) ;
} , 3000 )
btn. addEventListener ( 'click' , function ( ) {
clearTimeout ( times)
} )
可利用递归 使setTimeout与setInterval一样的效果
location对象
href属性
获取完整的url地址
location.href可以更改
search属性
获取地址中携带的参数,符号 ?后面部分
location.search
hash属性
获取地址中的哈希值,符号 # 后面部分
location.hash
经常用于不刷新页面 来显示不同的页面
reload属性
刷新当前页面 传入参数true为强制刷新
location.reload(true)
navigator对象
! ( function ( ) {
const userAgent = navigator. userAgent
const android = userAgent. match ( / (Android);?[\s\/]+([\d.]+)? / )
const iphone = userAgent. match ( / (iPhone\sOS)\s([\d_]+) / )
if ( android || iphone) {
location. href = 'http://m.jd.com'
}
} ) ( )
history对象
back
forward
go(参数)
let up = document. querySelector ( ".up" )
let back = document. querySelector ( ".back" )
up. addEventListener ( 'click' , function ( ) {
history. go ( 1 )
} )
back. addEventListener ( 'click' , function ( ) {
history. go ( - 1 )
} )
js执行机制
js是单线程语言(同一时间只能做一件事)
前一个任务结束,后一个任务才可以开始执行
同步
前一个任务结束后,再执行下一个任务
程序的执行顺序与任务的排列顺序一致
异步
同步异步本质区别:这条流水线上的各个流程执行顺序不同
同步任务
异步任务
普通事件 click resize
资源加载 load error
定时器setTimeout setInterval
异步任务添加到任务队列中(消息队列)
js执行机制
1.先执行执行栈中的同步任务
2.异步任务放入任务队列中
3.执行栈中同步任务执行完毕,系统按顺序读取任务队列中的异步任务,异步任务进入执行栈,开始执行
事件循环(event loop)
主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop)
swiper插件
插件官网地址 [swiper插件官网](https://www.swiper.com.cn/)
多个swiper同时使用的时候, 类名需要注意区分
本地存储
数据存储在用户浏览器中
设置、读取方便、甚至页面刷新不丢失数据
localStorage
生命周期永久生效 除非手动删除 关闭页面也存在
可以同一浏览器多页面(窗口)共享
以键值对的形式存储使用
存储数据
localStorage.setItem(key, value)
获取数据
localStorage.getItem(key)
删除数据
localStorage.removeItem(key)
localStorage. setItem ( "uname" , '一只傻狗子' )
localStorage. setItem ( "age" , 18 )
console. log ( '获得数据' , localStorage. getItem ( 'uname' ) ) ;
console. log ( localStorage. getItem ( 'uname' ) ) ;
存储复杂数据类型
JSON.stringify 复杂数据转成JSON字符串 (存)
JSON.parse JSON字符串转成对象 (取)
let obj = {
uname : '测试' ,
age : 18 ,
address : '山东'
}
localStorage. setItem ( 'obj' , JSON . stringify ( obj) )
console. log ( '取数据11' , JSON . parse ( localStorage. getItem ( 'obj' ) ) ) ;
sessionStorage(了解)
自定义属性
固有属性
自定义属性
获取自定义属性
设置自定义属性
setAttribute('属性名', '属性值')
删除自定义属性
let div = document. querySelector ( '.boxx' )
div. setAttribute ( 'myid' , 10 )
console. log ( 'div' , div) ;
console. log ( '得到自定义的属性' , div. getAttribute ( 'myid' ) ) ;
div. removeAttribute ( 'myid' )
data-自定义属性
< ! -- data- XX 自定义属性名 -- >
< div class = "boxx" data- idx= "0" data- name= "GG" > < / div>
console. log ( 'data-' , div. dataset) ;