一、滚动、加载事件
1、滚动事件
2、加载事件
二、元素大小和位置
1、scroll
2、offset
3、client
三、window对象
1、BOM
BOM(Browser Object Model ) 是浏览器对象模型
window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的 window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模 型） document 是实现 DOM 的基础，它其实是依附于 window 的属性。 注：依附于 window 对象的所有属性和方法，使用时可以省略 window
2、定时器-延时函数
JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout，只执行以此
setTimeout(回调函数，等待的毫秒数)
清除延时函数：
let timer = setTimeout(回调函数，等待的毫秒数)
clearTimeout(timer)
<script type="text/javascript">
// 一次性定时器：
// window.setTimeout( 函数, 时间 );
let t = setTimeout( function () {
console.log('定时器');
}, 1000 );
// 清除定时器：
// window.clearTimeout(定时器标识);
clearTimeout( t )
</script>
<script type="text/javascript">
// 间歇性定时器：
// let t1 = setInterval( 函数, 时间 );
// clearInterval( t1 )
// 延迟性定时器：
// let t2 = setTimeout( 函数, 时间 );
// clearTimeout( t2 )
</script>
案例
<script type="text/javascript">
// 延迟性定时器：
// 延迟五秒后让元素隐藏即可
setTimeout( function () {
document.querySelector('div').style.display = 'none';
}, 5000 );
</script>
3、JS执行机制
js是单线程
JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这 门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比 如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。 JS 是单线程 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问 题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
同步异步
为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。
他们的本质区别： 这条流水线上各个流程的执行顺序不同
- 先执行执行栈中的同步任务。
- 异步任务放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务 结束等待状态，进入执行栈，开始执行。
4、location对象
location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分 常用属性和方法： href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转 search 属性获取地址中携带的参数，符号 ？后面部分 hash 属性获取地址中的啥希值，符号 # 后面部分 reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
<script type="text/javascript">
// 地址栏对象
// console.log( window.location );
// console.log( location );
// https://主机名:80/user/a/b/index.html?user=whh&pwd=123#哇哈哈
// 获取或者设置地址栏里面的地址
// console.log( location.href );
document.addEventListener( 'click', function () {
// console.log( location.href );
// location.href = 'http://www.baidu.com';
// console.log( location.search );
// console.log( location.hash );
// 重新加载当前url
// location.reload(true);
// 加载指定的url
// location.assign('http://www.jd.com');// 产生历史记录
// 替换url
// location.replace('http://www.baidu.com');// 不会产生历史记录
} );
</script>
5、navigator对象
6、history对象
// BOM：
// window：全局对象、顶级对象
// navigator：浏览器对象
// location：地址栏对象、location.href
// document：文档对象
// history：历史记录对象
// screen：屏幕对象
四、swiper插件
插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果 学习插件的基本过程 熟悉官网,了解这个插件可以完成什么需求 www.swiper.com.cn/ 看在线演示,找到符合自己需求的demo www.swiper.com.cn/demo/index.… 查看基本使用流程 www.swiper.com.cn/usage/index… 查看APi文档,去配置自己的插件 www.swiper.com.cn/api/index.h… 注意: 多个swiper同时使用的时候, 类名需要注意区分
五、本地存储
1、localStorage
1、生命周期永久生效，除非手动删除 否则关闭页面也会存在 2、可以多窗口（页面）共享（同一浏览器可以共享）
3、以键值对的形式存储使用
存储数据：localStorage.setItem(key, value) 获取数据：localStorage.getItem(key) 删除数据：localStorage.removeItem(key)
存储复杂数据类型存储 本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地 JSON.stringify(复杂数据类型) 将复杂数据转换成JSON字符串 存储 本地存储中 JSON.parse(JSON字符串) 将JSON字符串转换成对象 取出 时候使用
2、sessionStorage
1、生命周期为关闭浏览器窗口 2、在同一个窗口(页面)下数据可以共享
3、以键值对的形式存储使用
4、用法跟localStorage 基本相同
六、自定义属性
getAttribute('属性名') // 获取自定义属性 setAttribute('属性名', '属性值') // 设置自定义属性 removeAttribute('属性名') // 删除自定义属性
<div id="box" index="6" data-type="elm" data-aaa="aaa">哇哈哈</div>
<!-- 自定义属性 -->
<!-- 操作自定义属性： -->
<script type="text/javascript">
let div = document.querySelector('div');
// console.log( div.index );
// 获取自定义属性：getAttribute('属性名')
// console.log( div.getAttribute('index') );
// console.log( div.getAttribute('data-type') );
// 设置添加自定义属性：
// setAttribute('属性名', '属性值');
// div.setAttribute('index', '666');
// div.setAttribute('data-aaa', 'abc');
// 移除自定义的属性操作：
// div.removeAttribute('data-type');
// div.removeAttribute('data-aaa');
// H5：
// 针对于：data-xxx自定义属性：
// 元素.dataset.xxx
// console.log( div.dataset.type );
// div.dataset.type = '哇哈哈';
console.log( div.dataset.aaa );
div.dataset.aaa = '哇哈哈哈'
</script>
\
