Web APIs
- 主要学习DOM和BOM
- 是js独有的部分
- 我们主要学习页面交互功能
- 需要js基础课程内容做基础
- API:是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能.
- Web API:是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
DOM 树
- DOM是处理可扩展标记语言的标准编程接口
- 通过这些DOM接口可以改变网页的内容 结构和样式
- 文档:一个页面就是一个文档,DOM中使用document表示
- 元素:页面中所有标签都是元素,DOM中使用element表示
- 节点:网页中所有内容都是节点(标签,属性,文本,注释等),DOM中用node表示
- DOM 重点核心:创建,增,删,改,查,属性操作,事件操作
获取元素Element
根据ID获取
- 使用getElementByld()可以获取带有ID的元素对象
- 语法:document.getElementById()
- 参数id是大小写敏感的字符串,返回的是一个元素对象
- console.dir() 打印返回的元素对象 更好的查看里面的属性和方法
根据标签名获取元素
- 通过标签名获取 (会获取全部)
- 语法:document.getElementsByTagName(‘标签名’)
- 返回的是获取过来元素对象的集合 以伪数组的形式存储
- 想要依次获得里面的元素对象 , 可以采取数组遍历的方式
- 得到的元素是动态的 标签内的内容改了 js写的代码也不需要进行改动
- 通过id获取
- 语法:var nav =document.getElementById(‘nav’)
- 获取id为nav的标签元素
- var navLis = nav.getElementsByTagName(‘li’)
- 这样可以获得ID为nav 标签元素 再获取其里面的li 就可以了
根据class类名获得某些元素 (h5新增) 获取元素对象集合
- document.getElementsByClassName(‘box’)
1.根据类名获得某些元素(h5新增) 单个对象
- document.querySelector()
- 返回指定选择器的第一个元素对象
- 里面的选择器要加符号 类名加 . id加#
2.返回指定选择器的所有元素对象集合(h5新增) 获取元素对象集合
- document.querySelectorAll()
- 返回选择器里面所有的对象集合 拥有length长度
- 里面的选择器要加符号 类名加 . id加#
3.获取特殊元素对象(body,html)
- document.body 返回body 元素对象
- document.documentElement 返回html元素对象
事件基础
- 触发----响应机制
- 事件是由三部分组成 : 事件源, 事件类型 事件处理程序 统称事件三要素
1事件源(事件被触发的对象)
- 声明一个变量保存 一个获取元素
- var btn = document.getElementById(‘btn’);
2事件类型 (如何触发)
- 语法 btn:onclick 鼠标左边触发
- onmouseover 鼠标移入触发 经过子元素也会触发事件
- mouseenter 也是鼠标经过 但是不会冒泡,子元素不触发事件
- onmouseout 鼠标离开触发 经过子元素也会触发事件
- mouseleave 也是鼠标离开 但是不会冒泡,子元素不触发事件
- onfocus 获得鼠标焦点触发
- onblur 失去鼠标焦点触发
- onmousemove 鼠标移动触发
- onmouseup 鼠标弹起触发
- onmousedown 鼠标按下触发
- oninput 每次表单输入的内容改变时触发
- contextmenu 用于取消默认的上下文菜单
- selectstart 鼠标开始选中 用于禁止鼠标选中的默认行为
- change 是否发生改变,改变时触发该事件
- window.onload 是页面加载事件
- document.DOMContentLoaded
- window.pageshow事件 强制刷新
3事件处理程序 通过一个函数赋值的方式完成
- btn.onclick = function() { alert(‘点击后会弹出窗口’) }
操作元素(属性)
-
获取元素
-
注册事件 处理程序
btn.onclick = function() { //点击标签btn时 div.innerHTML = '要替换的内容'; //标签div里的内容会发生改变 } //我们也可以不用添加事件 div.innerHTML = getDate(); 直接改变里面的内容 可以代入某个函数让其不断变化 这个函数需要return返回一个值才行
修改元素内容
- src , href , id , alt , title 改变标签元素内容
- element.src = ‘’ ; 修改图片路径
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button>
<img src="x1.png" alt="">
<script>
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
ldh.onclick = function () { //点击触发 函数
img.src='x1.png'; //变量.属性 = '修改的属性'
}
zxy.onclick = function () {
img.src='x2.png';
}
</script>
修改普通元素内容(标签中的内容)
- innerHTML改变元素的内容 (不能改变表单元素)
- 变量名.innertext= ; 元素的内容(不识别标签 去除空格和换行)
- 变量名.innerHTML= ; 元素的内容(识别标签 空格 换行) W3C标准
- 变量名.innerHTML 可以提取元素内容
修改表单属性操作
- 利用BOM可以操作如下表单元素的属性
- type , value , checked , selected , disabled
- 值用true 或 false
- 变量名.disabled 是否禁用这个表单属性
- checked selected
- 变量名.value=‘修改值’ 修改表单属性默认值
- 同一元素进行两种形态切换
- var flag = 0;
- if (flag= 0) {要进行的改变 ; flag=1; } else {要进行的改变 ; flog = 0;};
样式属性操作
- element.style 行内样式操作
- 语法:this.style.backgroundColor = ‘pink’ ;
- 属性采取驼峰命名法
- js修改style 产生的是形内样式, 权重比较高
- css样式里的 - 杠 在js里面不写
- 适合改动小的情况
- 可以接收变量
- element.className 类名样式操作
- this.className = ‘box’ ;
- 可以先设置一个css样式类名
- 在触发一个盒子的事件时 给这个盒子修改了成一个类名, 从而达到改变的效果
- 会覆盖原先的类名属性
- 解决方法:this.className = ‘box box1 box2’ ; 把原先的类名加进去
- 这个类名前面不要加点 .
- 适合改动大的情况
获取自定义属性值
- 获取属性值
- element.属性 获得属性值
- 程序自带的
- element.getAttribute(‘属性’)
- 获取自定义属性值
- 程序员自定义输入的属性
- element.属性= ‘值’ ; 修改属性值
- element.setAttribute(‘属性’,‘值’) 设置自定义属性值
- 规范:自定义属性要以data-开头 例 : data-time
- element.dataset
- element.removeAttribute(‘属性’) 移除元素属性
节点操作(node)
- 节点操作主要用于选择一个元素对象为准,相对于它的父子兄关系对象
- 元素节点的类型, 分为 元素节点 属性节点 文本节点 可以用nodeType的返回值判断(分别是1,2,3)
父级节点
- 语法:node.parentNode
- 返回一个最近的父级节点, 如果没有则返回null
子级节点
- 语法:parnetNode.childNode (标准)
- 返回里面所有的子节点, 需要利用if判断节点类型nodeType 是否为一,才能选择元素节点,不提倡使用
- 语法:parnetNode.children (非标准) (常用的)
- 只返回所有子元素节点,虽然是非标准,但是获得了很多浏览器的支持,可以放心使用
- parnetNode.children[0] 选择子元素第一个
- parnetNode.children[parnetNode.children.length - 1] 选择子元素最后一个
兄弟节点
- 语法: node.nextSibling 得到下一个 同级节点
- 语法: node.nextElementSibling 得到下一个元素 同级节点 (i9以下不兼容)
- 语法: node.previousSibling 得到上一个 同级节点
- 语法: node.previousElementSibling 得到上一个元素 同级节点 (i9以下不兼容)
- 如果没有 返回 null
创建和添加元素节点
- 创建元素节点
- document.createElement(‘要创建的标签名’);
- 添加元素节点(挂载到DOM树)
- node.appendChild(child)
- 在子节点的最后一个元素后面添加(类似push) node为父级 child 是子级
- node.insertBefore(child,参照的元素对象)
- 在某一个子级元素节点前面添加 指定元素必须要写 指定元素就是指定的某个子级
删除节点
- node.removeChild(ul.children[0])
- 删除一个子节点,返回删除的节点
- 只能父级删除子级
复制节点 (克隆节点)
- node.cloneNode()
- 括号里的值为空 相当于false , 只复制标签 不复制内容(子节点)
- 括号里的值为true; 复制标签和内容
- 复制的节点没有位置,需要用变量接收配合 添加元素节点 来使用
创建元素的三种方式
- document.write(‘标签’)
- 里面直接写双标签创建元素
- 如果页面文档流加载完毕,再调用这句话,会导致页面重绘(除了页面基本结构 其他全部消失)
- element.innerHTML 和document.createElement()
- innerHTML创建多个元素效率更高(不采用拼接字符串,而是采用数组形式拼接) ,但是结构稍微复杂
- 利用arr.push添加数组元素, 应用arr.join(’’) ; 将分隔符逗号 改变为引号
- create.Element() 创建多个元素效率稍微低一点点,但是结构更清晰
- innerHTML创建多个元素效率更高(不采用拼接字符串,而是采用数组形式拼接) ,但是结构稍微复杂
事件高级
注册事件(绑定事件)
- 传统方式注册事件具有唯一性,不能添加多个相同类型的事件处理函数
- 所以我们多了一个方式 方法监听注册方式 (i9之前不支持)
- 语法:eventTarget.addEventListener(type,listener[,useCapture])
- type: 事件类型字符串加引号 不要加on
- listener: 事件处理函数 ,事件触发时,会调用该监听函数(生效)
- useCapture: 可选参数,是一个布尔值,默认false.
- addEventListener() 是一个方法
btns[0].addEventListener('click', function() {
alert(22);
})
删除事件(解绑事件)
- 传统方式解绑事件 element.onclick = null ; 将值修改为null即可
- 方法监听注册方式
- 语法:eventTarget.removeEventListener(type,listener[,useCapture])
divs[0].addEventListener('click', fn) //此处fn调用不用加小括号 规范如此
function fn() {
alert(22);
divs[0].removeEventListener('click', fn) // 删除 这个函数事件
}
事件流理论
- 从页面中接收事件的顺序,有一个特定的传播过程,这个传播过程称为DOM事件流
- DOm事件流分为三个阶段 doucment>html>body>div>body>html>doucment
- 捕获阶段(从最大的doucment到当前目标)
- 当前目标阶段
- 冒泡阶段 (从当前目标到最大的doucment)
- 捕获和冒泡阶段只能执行一个
- 通过addEventListener 的第三个参数设置为true即可获得捕获阶段,其他都是冒泡阶段
- onblur , onfocus 获取失去焦点没有冒泡 onmouseenter onmouseleave 这两个也没有
- 简单来说设置冒泡和捕获阶段会改变事件的触发顺序
事件对象
div.addEventListener('click',function(event) { } )
- 创建事件里面侦听函数括号的参数 就是事件对象 当形参来看
- 事件对象只有有了事件才会存在,它是系统自动创建的,不需要我们传递参数
- 事件对象是我们事件的一系列相关数据的集合,跟事件相关的. 比如鼠标点击事件就包含了鼠标的相关信息. 键盘事件就包含了键盘相关的信息,比如判断用户按下了哪个键. 是什么数据的集合 取决于事件类型
- 这个事件对象 我们可以自己命名 比如 event, evt , e.
- 事件对象也有兼容性问题, ie678 通过window.event 兼容性写法 e = e || window.event;
- 用于调用这个数据类型集合里的某个属性
事件对象的常见属性和方法
- e.target 返回触发事件的对象 (标准)
- e.srcElement 返回触发事件的对象 ie678
- e.type 返回事件的类型 click mouseover 不带on
- e.cancelBubble 阻止冒泡 非标准 ie678
- e.preventDefault() 阻止默认事件(只能阻止他自带的属性) 比如不让链接跳转
- a.addEventListener(‘click’,function(e) { e.preventDefault() } )
- return false 也能阻止默认事件 但是后面的不执行 没有兼容性问题
- e.stopPropagation() 阻止冒泡 标准
- 用法和break 相同 使用后 阻止下面的冒泡
事件委托(事件代理)
- 不用每个子节点都单独设置事件监听器, 而是只设置父节点上, 然后利用冒泡原理, 子节点上没有事件,会继续查询上一级,然后触发这个事件
- 作用:只操作了一次 DOM ,提高了程序的性能
ul.addEventLister('click',function(e){
//e.target可以获得点击的对象
e.target.style.color = 'skyblue';
})
鼠标事件对象属性
- e.clientX 返回鼠标相对于页面可视窗口的x坐标 类似固定定位
- e.clientY 返回鼠标相对于页面可视窗口的y坐标 类似固定定位
- e.pageX 返回鼠标相对于整个body的x坐标
- e.pageY 返回鼠标相对于整个body的y坐标
- e.screenX 返回鼠标相对于电脑屏幕的x坐标
- e.screenY 返回鼠标相对于电脑屏幕的y坐标
常用键盘事件
- onkeyup 某个键位松开时触发
- onkeydown 某个键位按下时触发(按住不松会一直触发)
- onkeypress 某个键位按下时触发(不识别功能键,shift ctrl等)
- 执行顺序 keydown > keypress > keyup
- 一般在文档中创建键盘的监听事件
键盘的ASCII 码值
- keyCode 返回该键的ASCII值
- keyup 和keydown 可以识别所有键 但是不区别大小写
- keypress 不识别功能键 但是识别大小写
- 可以通过elemen.focus() 获得焦点
BOM
- 浏览器(window)对象模型(Browser Object Model)
- BOM比DOM大,它包含了DOM
- window对象是浏览器的顶级对象
- 它是js访问浏览器的一个接口
- 它是一个全局对象,定义在全局作用域中的变量,函数都会变成window对象的属性和方法
- BOM是浏览器厂商在各自浏览器上定义的,兼容性较差
页面加载事件load
- window.onload 是页面加载事件,当文档内容完全加载完成后才会触发事件(包括图像,脚本文件,css文件等),调用里面的处理函数
- 通过这个可以将script 放到html的任何位置和 js文件外链式引入
- document.DOMContentLoaded 等DOM加载完毕,不包含图片 falsh css等就可以执行,加载速度比load快一些
- 页面图片较多的时候使用
- window.pageshow事件
- 有些页面 有"往返缓存" 的特点,会将整个页面保存到内存里面,所以后退不会刷新页面. 使用这个事件 无论是否往返缓存,都会刷新页面(这个事件给window添加)
- 当页面能够看见的时候触发
窗口大小事件resize
- window.onresize = function() {} 窗口大小事件
- 只要窗口大小发生改变就会触发
- 我们经常用这个事件完成响应式布局. window.innerWidth 当前屏幕宽度
setTimeout定时器
- window.setTimeout(调用函数,[延迟毫秒数])
- 这个调用函数可以直接写函数,或者函数名
- 这个方法用于设置一个定时器, 在设置的时间过了才执行调用函数
- window可以省略, 单位必须是毫秒
- 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符, 就是给它声明一个变量名
- 返回值是定时器的标识
setInterval定时器
- setInterval(回调函数,[间隔多少毫秒])
- 和setTimeout类似
- 每隔一段时间就调用这个函数 无限循环
停止定时器
- window.clearTimeout(timeoutID) window可以省略
- 取消了先前启用的定时器 参数就是自己给定时器起的名字
- 重新开始动画 : 将清除了的动画的代码 全部给 之前起的 动画名字 赋值 不用再声明了
回调函数
- setTimeout() 像这种要等待时间才会调用的函数就是回调函数
- 以前的 点击调用函数也是回调函数
this指向问题
- 函数里的this只有在函数调用的时候才能确定 它指向的是谁
- 一般情况都是指向他的调用者
- 全局作用域和普通函数,定时器的this指向window
- 函数里的方法调用和构造函数指向调用者
同步和异步
- 同步(单线程) 之前js 必须按照从上至下依次执行 的顺序 执行代码,但是遇到定时器时会大大提高页面显示时间
- 异步(多线程) 此时就提出了多线程的概念 多个代码可以同时进行执行, 这样遇到定时器需要等待较长的代码时,也可以同时执行其他代码,大大提高了用户体验
- js执行机制会在主线程执行栈先将同步任务执行 ,异步任务放入异步处理进程,等同步任务执行完,会一直监听任务队列,里面有任务就拿出来执行 , 异步进程会逻辑判断异步任务触发了没有,触发了就放入任务队列.
- 异步任务的三种类型: 1.普通事件 click resize等 2.资源加载 load error等 3. 定时器
- 点击事件的异步任务 没有触发事件时 是不会放进任务队列里的,所以会先执行定时器和资源加载的异步任务
- 所有任务执行完毕后,主线程执行栈还是会不断查询任务队列是否有新的异步任务,这个过程称为事件循环
location对象
- location属性
- 是window的一个属性,用于获取或设置窗口的URL(网址);
- location.href 获取或设置整个URL
- location.host 返回主机(域名) 一般登录某个网页只用输入域名就可以进入网页
- location.port 返回端口号 如果未写返回 空字符串
- location.pathname 返回路径
- location.search 返回参数
- location.hash 返回片段 (哈希值) #后面内容 常见于 链接 锚点
- location方法
- location.assign(‘网址域名’) 跟href一样 可以跳转页面 记录历史 所以可以后退
- location.replace(‘网址域名’) 替换页面 不记录历史 所以不能后退
- location.reload() 重新加载页面 相当于刷新按钮, 如果参数为true 则为强制刷新 ctrl +F5
- 普通刷新 有缓存用缓存, 无缓存 请求服务器获取 , 强制刷新不用缓存 直接请求服务器获取
navigator对象(了解)
- 包含了浏览器的信息,有很多属性,最常用的是navigator.userAgent,它返回的值 可以得知 用户是用pc端还是移动端登陆的,从而为用户跳转pc页面或移动页面 获取客户端的类型
history对象(了解)
- history.back() 触发事件 实现页面后退功能
- history.forward() 实现页面前进功能
- history.go(参数) 参数 为 1 前进一个页面 - 1 后退一个页面
三大系列
offset系列(元素偏移量)
- 相关属性可以动态获得该元素的位置(偏移量) 大小等 (返回的值不带单位)
- element.offsetParent 返回该元素带有定位的父级, 没有则返回body
- element.offsetTop 返回相对上方带有定位的父元素偏移量(距离) 没有就参照body
- element.offsetLeft 返回相对左边带有定位的父元素偏移量(距离) 没有就参照body
- element.offsetWidth 返回自身包裹padding border 内容区的宽度
- element.offsetHeight 返回自身包裹padding border 内容区的高度
offset 和style 的区别
- offset 可以获得任意样式表的样式值, style 只能获得行内式(内嵌式和外链式不能获得)
- offset 获得的数值没有单位, style获得的有单位
- style获得的width 没有padding和border
- offset是只读属性 , 只能获取,不能赋值(修改)
- style是可读写属性 , 可以获取也可以赋值(修改)
client 系列(元素可视区)
- element.clientWidth 返回 padding +内容区的盒子宽度 不带单位
- element.clientHeight 返回 padding +内容区的盒子高度 不带单位
- element.clientLeft 返回盒子左边框的大小
- element.clientTop 返回盒子上边框的大小
立即执行函数
写法1:
(function 函数名(形参) { 执行函数 } (实参));
写法2:
(function 函数名(形参){ 执行函数 }) (实参);
- 立即执行函数 用括号包起来第二个小括号可以 看做是执行函数
- 相当于独立了一个作用域 里面声明的都是局部变量 ,避免了命名冲突
- 第二个括号不用加函数名, 函数名 实参和形参可以省略
scroll系列(元素滚动)
- element.scrollTop 返回 滚动后 上面消失的内容高度 返回值不带单位 (滚动越多值越大)
- window.pageYOffset 返回页面垂直滚动出去的距离 (I9以上支持)
- scrollTop根据当前元素的位置计算 window.pageYOffset相当于整个页面计算
- element.scrollLeft 返回 滚动后 左边消失的内容宽度 返回值不带单位
- window.pageXOffset 返回页面水平滚动出去的距离 (I9以上支持)
- element.scrollWidth 返回 实际内容的宽度 ,不加边框 返回值不带单位
- element.scrollHeight 返回 实际内容的高度 ,不加边框 返回值不带单位
- scrollBy(X,Y) 在原有的基础上滚动多少距离 值不带单位
- scrollTo(x,y) or scroll(X,Y) 回到顶部后移动多少距离 值不带单位
动画函数
- 一般需要传递两个参数
- function animate(目标对象 , 目标位置 ) { 要实现的动画效果 }
- 调用动画 animate(obj , target )
- 一般将动画函数封装到一个js文件里面,要用的时候 引入这个js文件即可
动画基本原理
- 通过定时器 和改变盒子定位的位置 来实现动的效果 ,在到达指定地点 清除定时器
- 停止动画的本质就是清除定时器
给不同的动画添加不同的定时器
- 通过给传递的目标对象添加一个属性,可以让不同的动画拥有不同的定时器.
- 如果短时间内多次调用定时器会让动画的速度 不断叠加 所以 每次调用动画要先清除上次动画的定时器
//obj 元素对象 target 目标位置
function animate(obj, target) {
clearsetInterval(obj.timer); // 清除上一次动画的定时器
obj.timer = setInterval(function() { //每个传递进来的参数都不一样 所以定时器也会不一样
if (obj.offsetLeft = target ) {
clearInterval(obj.timer); //到达指定位置 清除定时器
} else {
obj.style.left = obj.offsetLeft + 1 + 'px'; //每30毫秒定位宽 增加1px距离
}
},30)
}
animate(div,300);
animate(span,200)
缓动动画
- 原理就是:让每次移动的幅度逐渐减小
- 公式: (目标位置 - 目标对象当前位置) / 10(份数) 每次步长减少1/10的移动距离
- 但是除法 会有个小数 达到目标位置就停下来,所以要给得出的步长取整
- 但是考虑到动画可以往回走, 可以要判断 步长是正值还是负值 正值就向上取整, 负值就向下取整
- 让目标位置等于当前位置时, 清除定时器即可
- 匀速动画就是 盒子当前的位置 + 固定的值
- 缓动动画就是 盒子当前的位置 + 变化的值
动画加回调函数
- 有些效果需要在动画结束后 执行
- 可以将 一个回调函数作为实参 传递 到动画函数里 ,在动画结束时(清除定时器)里 执行这个函数
- 不过得加一个判断条件, 如果有传递这个函数进来 就执行 否则不执行
节流阀
- 设置一个开关变量 flag 第一次执行时先将值取反, 相当于关闭.
- 在里面的代码执行完毕后 再讲取反的值取反回来即可,相当于再开启
- 在动画函数结束后调用函数再取反的值再取回来;
移动端touch 手指触摸事件
- 触屏事件是移动端一个独特的地方
- touchstart 手指点击dom元素时触发
- touchmove 手指点击按住并滑动dom元素时触发
- touchend 手指松开dom元素时触发
触摸事件对象(TouchEvent)
- 事件对象在移动端就是触摸事件对象
- e.touches 可以获取有几个手指正在触摸整个屏幕 (用length长度查看)
- e.targetTouches 可以获取有几个手指正在触摸当前DOM元素 (用length长度查看)
- 如果有多个手指 就是一个数组 e.targetTouches[0] 可以用索引获取某一个手指触摸的信息(pegeX clientX screenX target等)
- e.changedTouches 手指数量发生改变时 的信息,
- 手指离开后的信息也可以获取(比如位置 length长度等等)
过渡结束事件
- transitionend 当过渡结束时 才执行 里面的代码
classList类名操作(i10以上支持)
- element.classList 返回的是一个伪数组, 里面包含了元素的所有类名
- element.classList.add(‘类名’) 给元素添加一个类名
- element.classList.remove(‘类名’) 给元素删除某一个类名
- element.classList.toggle((‘类名’) 切换类名 ,如果有就删除 没有就添加.
click 300ms延时解决方案
- 因为手机双击可以为页面进行缩放, 为了判断是 单击还是双击 所以会有300ms的延迟时间
- 将视口标签缩放关闭 (不能进行页面缩放)
- 封装一个手指触摸事件 (每次需要调用,只能对单一元素使用)
- 手指触摸开始到结束的时间小于150ms 并且没有移动过屏幕就当做单击事件来看
- 使用fastclick 插件 (需要引入 并调用这个插件)
插件的使用
- 移动端常见插件:swiper (大量的轮播图效果) superslide iscroll medio插件(处理视频播放)
- 确认插件实现的功能
- 去官网查看使用说明
- 下载插件
- 打开demo实例文件,查看需要引入的相关文件,并且引入
- 复制demo实例文件,里面的html结构 css样式 以及js代码
框架
- 基于自身特点提供一套较为完整的解决方案,使用者要按照框架的所规定的规范来进行开发
- 插件一般是为了解决某种问题而存在的,功能单一 并且小.
- 前端常用的框架有:Bootstrap Vue Angular React 等可以开发PC和移动端的
- 前端常用移动端框架有:swiper superslide iscroll 等
‘’
本地存储
- 数据存储在本地用户浏览器中,设置读取方便,甚至刷新页面也不会丢失数据
- 容量较大sessionStorage约5M.localStorage约20M, 但是只能存储字符串,可以将对象JSON.stringify()编码后存储
- window.sessionStorage (一次会话缓存)
- 生命周期为关闭浏览器,关闭浏览器就会删除,但是刷新不影响
- 同一页面下数据可以共享,以键值对的形式存储
- sessionStorage.setItem(key,value) 存储数据 key自定义属性名 value 是存储的值(数据)
- sessionStorage.getItem(key) 获取数据 获取这个key的值(数据)
- sessionStorage.removeItem(key) 删除数据 删除这个key的值(数据)
- sessionStorage.clear() 清空数据 清空所有存储的key
- window.localStorage(永久有效)
- 生命周期永久有效,除非手动删除,否则关闭页面也会存在
- 可以多个页面共享数据(同一浏览器) 也是以键值对的形式存储 用法和sessionStorage一致
- localStorage.setItem(key,value) 存储数据 key自定义属性名 value 是存储的值(数据)
- localStorage.getItem(key) 获取数据 获取这个key的值(数据)
- 在其他页面使用,输出这个即可
- localStorage.removeItem(key) 删除数据 删除这个key的值(数据)
- localStorage.clear() 清空数据 清空所有存储的key
其他
-
用字符串拼接的方法 让初始值为0的数 不断相乘也为负数
- ‘0 -’ + i + ‘px’ 0 为x坐标, - i px 为y坐标 (0 -1px)
-
查看对象触发事件后有什么属性
- console.dir(‘this.style’)
-
href 属性的值 不进行任何跳转
- javascript:; 或 javascript:void(0);
-
去除字符串多余的空格
- 变量.trim() 这是一个方法
-
dpr 物理像素比
- var dpr = window.devicePixelRatio //默认1
-
// detect 0.5px supports 有些移动端的浏览器不支持0.5像素的写法
if (dpr >= 2) { var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) -
手动调用事件
- 设置好的点击事件element 语法: element.click() 调用哪个元素的点击事件
- 不用点击 直接自动触发里面的函数
463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
