js-bom
window.onload()
window.onload()=function(){}
文档页面内容完全加载完成会触发该事件
document.addEventlistener('DOMContentLoaded',function(){})//dom加载完成后执行,ie9以上支持
调整窗口大小事件
窗口大小发生变化则触发,常用window.innerWidth作响应式布局
window.addEventListener('resize',function(){ })
定时器(回调函数,事件)
只调用一次的定时器
setTimeout(function(){},2000);//2000ms setTimeout('fn()',2000);
window.clearTimeout(timer);
重复调用的定时器
setInterval(function(),3000); clearInterval(timer);
定义全局变量var timer = null;
同步和异步
同步任务在主线程上执行,形成执行栈
异步任务通过回调函数实现(包括普通事件:click,resize;资源加载:load,error;定时器),他们的相关回调函数会放在任务队列中
先同步,再异步,同步任务重复获取异步任务并执行,这种机制为事件循环
location
统一资源定位符
location常见属性
location对象方法
字符串操作
.substr(起始的位置,几个字符);//第二个参数省略默认取得所有剩余字符 var arr=p.split('=');//将p的=俩边分割为俩部分存入数组
navigator
判断用户pc和手机终端实现跳转
history
offset属性元素位置
client属性元素大小
立即执行函数
(function(){})(); (function(a,b){})(2,3);//传递参数 (function(){}())
scroll属性滚动距离
div.addEventListener('srcoll',function(){ })//滚动事件 window.pageYoffset
mouseover和mouseenter
mouseover事件经过自身和子盒子都会触发,mouseenter只会经过自身盒子触发
mouseenter和mouseleave都不会冒泡
本地存储
1.sessionStorage
sessionStorage.setItem(key,value); sessionStorage.getItem(key) sessionStorage.removeTtem(key) sessionStorage.clear()
2.localStorage
生命周期永久有效,除非手动删除,关闭页面也会存在;可以多窗口共享;以键值对形式存储
localStorage.setItem(key,value); localStorage.getItem(key) localStorage.removeTtem(key) localStorage.clear()
js-dom
文档页面从上往下加载,得先有标签,因此把script写在标签下面
console.dir()打印元素对象
获取元素的方式
一般来说获取的元素大小写敏感
getElementById('')//通过id var li=document getElementsByTagName('li')//通过标签名 li[0]//标签li的第一个对象 getElementsByClassName('box')//通过类名 box[0]//类名box的第一个对象 document.querySelector('.box')//指定选择器的第一个元素对象 document.querySelector('#box') document.querySelector('li') document.querySelectorAll('li')//指定选择器的所有元素对象
获取body和html
document.body document.documentElement
注册事件
事件三要素:事件源,事件类型,事件处理程序
以上方法具有唯一性,后注册的处理函数会覆盖前面的。
推荐可叠加的新方法(不用带on):
bt.addEventListener('click',function(){})
iE9以下使用attchEvent
删除事件
传统方法删除事件
div.οnclick=null;//在点击事件内添加则该按钮点击一次即失效
addEventListener删除事件
注册事件不能使用匿名函数
div.addEventLitsener('click',fn) div.removeEventListener('click',fn) function fn(e){ e.type; }
ie9以下使用detachEvent()
改变元素内容
demo.innerHTML=//包括html标签,空格,换行 demo.innerTetx=//去除html标签,空格,换行 input.value='被点击了';
格式化日期年月日
禁用按钮button
btn.disabled=true;//按钮无法再被点击
className
this.className='change';//不保留原来的类 this.className='first change';//保留原来的类名first,即多类名选择器
排他思想
自定义属性获取
div.属性//获取元素自身属性 div.getAttribute('index') div.setAttribute('index',2)//修改属性值 div.setAttribute('class','container') div.removeAttribute()//移除属性值
H5规定:自定义属性以data-开头
<div data-index="1"></div> div.dataset.index或div.getAttribute('data-index')
节点操作
父节点,子节点
close.parentNode//close最近的父节点 close.childNodes//lose所有的子节点包含元素节点和文本节点等 close.children//close所有元素节点 close.children.length-1//close最后一个节点的索引号 close.firstElementChild//close第一个元素节点
兄弟节点
div.nextSibling//下一个兄弟节点,包含元素节点,文本节点等 div.previousSibling//前一个 以下兼容性问题:ie9以上支持 div.nextElementSibling//下一个兄弟元素节点 div.previousElementSibling//前一个
创建节点
li=createElement('li');//创建节点 ul.appendChild(li);//在ul已有节点后插入li ul.prepend(li);//在ul已有节点前插入li ul.insertbefore(li,ul.children[0]);//在ul的第一个孩子前插入li
删除节点
ul.removeChlid(ul.children[0]);
克隆节点
ul.cloneNode(true);//深度拷贝,复制节点及里面所有子节点 ul.cloneNode(false);//括号内为空或false,浅拷贝不克隆子节点
document.write()和innerHTML
页面文档流加载完后调用document.write()会导致页面重绘
creatElement()创建多个元素效率稍低一点,但是结构更清晰
innerHTML创建多个元素时,不要拼接字符串,采用数组形式拼接效率更高,但结构稍复杂
动态创建数组
dom事件流
冒泡阶段 从子到父
目标阶段
捕获阶段 从父到子
onclick和attachEbentListener只能得到冒泡阶段
addEventListener第三个参数是true则处于捕获阶段
有些事件没有冒泡
事件对象
event包含一系列属性
e=e||window.event;//为兼容ie678,一般不考虑
e.target//返回点击的元素 this//返回绑定的元素
retuen false也能阻止默认行为(如a链接跳转)
鼠标事件对象
键盘事件对象
onkeypress不识别功能键(左右箭头,shift),但区别大小写(keyCode),其他俩个相反
执行顺序:keydown,keypress,keyup
事件委托
也称事件代理
原理:不是每个子节点单独设置事件监听器,而是设置在父结点上,如何利用冒泡原理影响设置每个子节点,提高了程序的性能
阻止默认事件的一些示例(禁止右键菜单,阻止表单提交等)
.forEach((item,index)=>{})