从大的来说JavaScript可以分成三个部分:
- ECMAScript标准。这里就主要是JS的基本的语法
- DOM。Document Object Model,就是文档对象模型,用于操作页面的元素部分
- BOM。Browser Object Model,指的是浏览器对象模型,用于操作浏览器部分
自定义属性
设置自定义属性:setAttribute("属性的名字","属性的值")
获取自定义属性的值:getAttribute("属性的名字")
移除自定义属性:removeAttribute("属性的名字")
节点的属性
节点:页面中所有的内容都是节点(标签,属性,文本文字,空格,换行)
元素:页面中所有的标签
nodeType节点类型:
1表示标签类型;2表示属性;3表示文本
nodeName节点名字
标签节点是大写的标签名字;属性节点是小写的属性名字;文本节点是#text
nodeValue节点的值
标签节点的值是null;属性节点的值是属性值;文本节点的值是文本内容
为元素绑定事件(DOM)
1 对象.addEventListener("事件类型",事件处理函数,false)
谷歌火狐支持,IE8不支持
2 对象.attachEvent("有on的事件类型",事件处理函数)
谷歌火狐不支持,IE8支持
解绑事件
解绑事件应该使用什么方式绑定就用什么方式解绑
- 绑定方式一:
绑定:对象.on事件名字=function(){}
解绑:对象.on事件名字=null - 绑定方式二:
绑定:对象.addEventListener(“没有on的事件类型”,命名函数,false)
解绑:对象.removeEventListener(“没有on的事件类型”,函数名字,false) - 绑定方式三:
绑定:对象.attachEvent(“on事件类型”,命名函数);—绑定事件
解绑:对象.detachEvent(“on事件类型”,函数名字);
事件冒泡
多个元素层次嵌套,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件会跟着触发。
window.event是一个对象,是IE中的标准,e是事件参数对象,一个是火狐的标准,事件参数e在IE8的浏览器中是不存在,要兼容就用window.event来代替
IE阻止事件冒泡:window.event.cancelBubble=true
谷歌和火狐阻止事件冒泡:e.stopPropagation()
事件的阶段有三个:
1.事件捕获阶段:从外向内
2.事件目标阶段:最开始选择的那个
3.事件冒泡阶段:从里向外
addEventListener中第三个参数是控制事件阶段的,通过e.eventPhase这个属性可以知道当前的事件是什么阶段,如果这个属性的值是:
1表示捕获阶段
2表示目标阶段
3表示冒泡阶段
location对象
获取地址栏上#及后面的内容:window.location.hash
获取主机名及端口号:window.location.host
获取主机名:window.location.hostname
获取文件的路径(相对路径):window.location.pathname
获取端口号:window.location.port
获取协议:window.location.protocol
获取搜索的内容:window.location.search
设置跳转的页面的地址:
1、location.href="http://www.baidu.com"
2、location.assign("http://www.baidu.com")
3、location.reload();//重新加载--刷新
4、location.replace("http://www.baidu.com");//没有历史记录
前进:window.history.forward()
后退:window.history.back()
offset系列:
获取元素的宽,高,left,top
offsetLeft:距离左边位置的值
offsetTop:距离上面位置的值
offsetWidth:元素的宽(有边框)
offsetHeight:元素的高(有边框)
scroll系列
scrollWidth:元素中内容的实际的宽(没有边框),如果没有内容就是元素的宽
scrollHeight:元素中内容的实际的高(没有边框),如果没有内容就是元素的高
scrollLeft:向左卷曲出去的距离
scrollTop:向上卷曲出去的距离
获取可视区域距离页面顶部的距离:
scrollTop=document.documentElement.scrollTop||document.body.scrollTop
client系列:可视区域
clientWidth:可视区域的宽(没有边框),边框内部的宽度
clientHeight:可视区域的高(没有边框),边框内部的高度
clientLeft:左边边框的宽度
clientTop:上面边框的宽度