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