基础方法----------------------
substr(‘起点位置’,截取几个);
split('=')等号分割字符串
点击事件-----------------------------
onfocus 获得点击焦点时间,当文本被获取时就触发
onblur 失去焦点时触发
mousemove 鼠标移动时触发
mouseover 鼠标滑过事件
mousedown事件仅需要按键被按下,而不需要松开即可发生。
mouseup 鼠标松开事件
scroll滚动事件
contextmenu 点击右键触发,selectstart鼠标选择文字触发,搭配e.preventDefault();可禁止菜单
例子:document.addEventDefault('contextmenu',function(e){
e.preventDefault()
})
鼠标事件--------------------------------------
e.clientX 相对于浏览器窗口可视化的x坐标
e.clientY 相对于浏览器窗口可视化的y坐标
e.pageX 相对于文档页面的x坐标
e.pageY 相对于文档页面的y坐标
属性.pageYOffset 获取整个页面被卷曲的部分
e.screenX 相对于屏幕的x坐标
e.screenY 相对于屏幕的y坐标
键盘事件----------------------------
onkeyup 点击松开触发
onkeydown 按下立即触发
onkeypress 按下立即触发,但是不识别功能键,Ctrl,shift
e.keyCode 获得按键的ASCII值
自定义属性.................................................
自定义属性获取的方法 属性.getAttribute('属性')
设置自定义属性 属性.setAttribute("自定义属性的名字","值")
移除自定义属性 属性.removeAttribute('自定义属性的名字')
获取自定义属性 属性.getAttribute(''属性名字)
h5新加的获取自定义属性 属性.dataset.属性名字
节点篇...............................................................
获取父节点,获取最近的父节点 属性.parentNode
获取子节点, 不推荐 获取所有节点,文本节点,元素节点等,属性.childNodes
获取子元素子节点 (非标准) 属性.children
获取第一个元素子元素子节点 (非标准) 属性.children[0] (推荐)
获取最后一个元素子节点(非标准)属性.children【属性.length -1】 (推荐)
获取第一个元素子节点 属性.firstElementChild
获取最后一个元素子节点 属性.lastElementChild
获取下一个兄弟节点 属性.nexSibling
获取上一个兄弟节点 属性.previouSibling
获取下一个兄弟元素节点 属性.nextElementSibling
获取上一个兄弟元素节点 属性.previouElementSibling
创建节点.....................................................
创建节点doucument.createElement('元素名字,类似li,ul,p,h1等')
末尾插入节点 你要插入哪个元素的名字.appendChile( 自定义那个节点的名字 )
指定位置插入节点 你要插入哪个元素的名字.insertBefore( 节点名字,也就是你
赋值给哪个变量的名字 , 属性.children[0] )
删除节点....................................................
删除指定节点 属性.removeChild( 需要删除的名字)
删除第一个节点 属性.removeChild( 属性.children[0] )
克隆节点-------------------------------------------
属性.cloneNode(false) 浅拷贝只是复制元素,不复制内容,括号内设置为TRUE则相反,就是深拷贝
注册事件-------------------------
属性.addEventListener( 'click' , function(){
})
移除事件
属性.removeEventListener( 'clicl' ,函数名)
事件对象属性----------------------------
e.target 返回点击者
e.type 返回事件类型
e.cancelBubble 该属性阻止冒泡
e.returnValue 该属性阻止默认行为,例如a标签的跳转 (非标)
e.stopPropagation() 阻止冒泡 标准
e.preventDefault();禁止行为
事件委托-----------------------------------
就是在父节点上面添加事件,点击子节点也会触发事件
BOM------------------------------
事件----------------------
搭配addEventListener()使用
DOMContentLoaded事件是无视图片,优先加载js,避免图片过多的时候加载js变慢,可以理解到为加了一个优先级
resize 页面尺寸改变时触发
location获取URL
location.href 获取整个URL
location.host 获取域名
location.port 获取端口号
location.pathname 返回路径
location.search 返回参数
navigator 对象检查浏览器是移动还是pc,然后跳到相应的网站
方法--------------------
一次性定时器,到那么多秒就执行window.setTimeout(函数,1000)
清除定时器 window.clearTimeout(定时器的名字)
重复定时器 setInterval(函数,1000)
清除定时器 clearInterval(定时器名字)
location.assign() 重定向页面跳转
location.replace() 替换当前页面,不可以后退
location.reload() 重新加载页面
history.go(1)前进 ,-1后退
查询--------------------------
window.innerWidth 当前屏幕宽度,搭配resize事件使用
offset只能读,style可读写
offset包含边框
属性.offsetParent 返回有定位的父级元素,没有就body
属性.offsetTop 返回有相对定位的父级元素上方的偏移量
属性.offsetLeft 返回有相对定位的父级元素左方的偏移量
属性.offsetWidth 返回自身包括padding和边框的宽度,无单位
属性.offsetHeight 返回自身包括padding和边框的高度,无单位
client不包含边框
属性.clientTop 返回上边框大小
属性.clientLeft 返回左边框大小
属性.clientWidth 返回自身包括padding,宽度但是不包括边框数值不带单位
属性.clientHeight 返回自身包括padding,但是不包括边框数值不带单位
滚动条scroll
属性.scrollTop 被卷上去的上侧距离,不带单位
属性.scrollLeft 左侧距离,不带单位
属性.scrollWidth 返回内容的宽度,不包边框,没有单位
属性.scrollHeight 返回内容的高度,不包边框,没有单位
整个页面被卷曲的部分用window.pagYoffset
本地存储-------------------------------------
sessionStorage,localStorage的方法一样替换名字就行
存储数据sessionStorage.setltem('自定义的名字',数据)
获取数据sessionStorage.getlem('自定义的名字')
删除数据sessionStorage.removeItem('自定义名字')
删除所有数据sessionStorage.clear()