历史管理
window.location.hash:网址的后面添加的# 字符串 旧方法
如:window.location.hash = num; 读取(会加1个#)、设置(会加1个#)
window.onhashchange改变hash值时触发事件
window.onpopstate : 改变hash值时触发事件
event.state; 历史管理中,当前hash值对应的存储数据
history.pushState(data,‘‘,网址后面加的字符串) 新方法 存储数据data,设置hash值(不包括#) 必须在服务器环境中,否则无效
参数1:存进历史管理的数据
参数2:标题;还未实现,直接用‘‘
参数3:可选参数,给网址后面加的字符串;给人网址变换的感觉;不添加时,网址不发生改变
网址时虚拟的,刷新时找不到页面
sessionStorage、localStorage:本地存储、本地会话
localStorage永久存储,关闭浏览器,本地存储都不会消失(只针对相同的浏览器) 能多个相同的页面共享数据
sessionStorage临时存储,关闭浏览器,本地会话消失 不能多个相同的页面共享数据
必须是服务器环境,否则相关的事件无效
window.sessionStorage、window.localStorage:方法一样
注意:数据名称、数据具体值,必须加上引号,除非是变量,或者表达式,否则出错
window.localStorage.getItem(‘name‘):获取数据,通过key来获取到相应的value
window.localStorage.setItem(‘name‘,‘value‘):设置数据,keyvalue类型,类型都是字符串
window.localStorage.removeItem(‘name‘):删除数据,通过key来删除相应的value
window.localStorage.clear():删除全部存储的值
event事件
event事件的兼容 如:var ev = ev || event;
event.currentTarget 事件绑定的元素
event.target 事件触发的元素,不一定是事件绑定的元素,可能是发生事件冒泡的下级元素
event.clientX / event.clientY : 鼠标到页面可视区(屏幕),左边/顶部的距离 (只有数字,没有单位)
event.pageX / event.pageY 到整个网页的值
event.stopPropagation() 阻止冒泡 标准浏览器
event.cancelBubble = true 阻止冒泡 只支持IE
event.stopImmediatePropagation() 阻止冒泡,阻止本身的事件(阻止在该语句之后的事件,之前的事件无法阻止) 标准浏览器
event.preventDefault(); 阻止默认
return false;阻止默认行为、阻止冒泡 只能阻止obj.on事件名称=fn 、attachEvent(IE)所触发的默认行为
event.which 键盘的键值、鼠标值 keydown、keyup、mousedown、mouseup事件中使用
鼠标左键、滚轮、鼠标右键分别对应1、2、3(测鼠值时必须使用mousedown、或者mouseup,否则出现问题)
event.ctrlKey 按ctr时,返回true,否则返回false
event.shiftKey 按shift时,返回true,否则返回false
event.keyCode 返回键值的编码值
canvas绘图
var oc=document.querySelector(‘#c1‘);
oGc=oc.getContext(“2d“); //必须设置绘制环境,否则绘制图案
context.toDataURL() 将canvas内的图像,转成img.src
context.downloadimage(ocanvas1,“png“); 下载图片
context.drawImage(img,x,y); 在画布上定位图像。复制图片、视频
context.drawImage(img,x,y,width,height); 在画布上定位图像,并规定图像的宽度和高度
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 剪切图像,并在画布上定位被剪切的部分
context.getImageData():复制画布上指定矩形的像素数据,获取图像每个像素的数据
如果你的img_url和你的页面不是同源的,那么getImageData会导致错误
context.putImageData():将图像数据放回画布
原始js操作html元素
父级元素:
元素.parentNode
子级元素:
元素.children
元素.firstElementChild || 元素.firstChild: (只读)第一个子节点
元素.lastElementChild || 元素.lastChild
兄弟元素:
元素.nextElementSibling || 元素.nextSibling (只读)下一个兄弟节点
元素.previousElementSibling || 元素.previousSibling (只读)上一个兄弟节点
删除、替换、插入元素:
父级.removeChild(要删除的元素); 删除子元素 (通过父级删除子集)
父级.replaceChild(新节点,被替换的子节点) 替换子节点
父级.appendChild(要添加的元素) 追加子元素
父级.insertBefore(新的元素,被插入的元素) 在指定子元素前面插入一个新元素
前端数据存储有那些
url参数
cookie
localStorage
sessionStorage
indexedDB
for in、for of的区别
for in总是得到对象的key或数组、字符串的下标
for of总是得到对象的value或数组、字符串的值
null和undefined的区别?
Null访问一个不存在对象返回的值,表示空对象
Undefined:访问一个未初始化变量(声明完没有赋值的变量)返回的值,表示空变量
document load 和document ready的区别
document.onload是在结构和样式,外部js以及图片加载完才执行js
document.ready是 dom 树创建完成就执行的方法,原生中没有这个方法,jquery中有$().ready(function)
手动实现 Object.assign
创建新对象,循环赋值
打散合并在新的对象中
js中,数字形式的字符串和数字相加的规则
把数字和数字相加
把字符串和字符串相加
所有其他类型的值都会被自动转换成这两种类型的值
console.log(-1 ‘5‘); // -15
console.log(1 ‘5‘); // 15
console.log(1 - ‘5‘); // -4
console.log(-1 - ‘5‘); // -6