1.杂项

query:查询。可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数的名和值用'='符号隔开。例如：name=zs

setTimeout() setInterval(),两个参数，第一个函数，第二个时间，单位默认毫秒 1000ms=1s

setInterval()会在页面加载后才开始执行，所以前面会有一个空的时间间隔。解决：函数写在外面，先调用一次

2.案例

解析URL中的query，并返回对象的格式

解析URL中的query，并返回对象的形式

3.navigator对象

userAgent：判断用户浏览器类型

platform：判断浏览器所在的系统平台类型

4.offset   scorll   client

offset

 offsetWidth:获取元素的宽（包括边框   offsetHeight:获取元素的高（包括边框）    offsetLeft:获取元素距离左边位置的值     offsetTop:获取元素距离上面位置的值

没有脱离文档流:offsetLeft:父级元素margin+父级元素padding+父级元素的border+自己的margin 

脱离文档流:offsetLeft:主要是自己的left和自己的margin

scorll

 * scrollLeft:向左卷曲出去的距离 * scrollTop:向上卷曲出去的距离 

 * scrollWidth:元素中内容的实际的宽(如果内容很少,没有内容,元素自身的宽),没有边框 

 * scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,元素自身的高),没有边框

封装scorll兼容各版本浏览器

封装scorll兼容各版本浏览器

client:可视区域

clientWidth:可视区域的宽(没有边框),边框内部的宽度

clientHeight:可视区域的高(没有边框),边框内部的高度

clientLeft:左边边框的宽度    clientTop :上面的边框的宽度

5.元素创建方式

document.write("标签代码及内容"); 如果在页面加载完毕后创建元素.页面中的内容会被干掉

父级对象.innerHTML="标签代码及内容";

document.createElement("标签名字");得到的是一个对象,

        父级元素.appendChild(子级元素对象);

        父级元素.inerstBefore(新的子级对象,参照的子级对象);移除子元素

        父级元素.removeChild(要干掉的子级元素对象);

6.事件

事件的三个阶段

事件捕获阶段：从外向内

事件目标阶段：

事件冒泡阶段：从内向外

使用eventPhase来判断当前事件处在什么阶段       返回值1捕获 2目标 3冒泡

事件冒泡

含义：多个元素嵌套，注册了相同事件，内层元素绑定的事件触发，外面的元素的该事件自动触发

阻止：window.event.cancelBubble=true  谷歌ie支持

​            e.stopPropagation();    谷歌火狐支持

解绑事件

注意:用什么方式绑定事件,就应该用对应的方式解绑事件

对象.on事件名字=事件处理函数（多个相同事件绑定之前的会被覆盖掉）

对象.on事件名字=null;

对象.addEventListener("没有on的事件类型",命名函数,false);true为事件捕获，fasle为事件冒泡

对象.removeEventListener("没有on的事件类型",函数名字,false);

对象.attachEvent("on事件类型",命名函数);---绑定事件

对象.detachEvent("on事件类型",函数名字);

兼容问题

对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持 

对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持

addEventListener和attachEvent的区别

​    this不同,addEventListener 中的this是当前绑定事件的对象，attachEvent中的this是window

​    addEventListener中事件的类型(事件的名字)没有on ，attachEvent中(事件的名字)有on

addEventListener和removeEventListener兼任处理

事件对象的属性和方法

event.type 获取事件类型

clientX/clientY    所有浏览器都支持，窗口位置

pageX/pageY      IE8以前不支持，页面位置

event.target || event.srcElement 用于获取触发事件的元素

event.preventDefault() 取消默认行为

阻止事件传播的方式

标准方式 event.stopPropagation();

IE低版本 event.cancelBubble = true; 标准中已废弃

常用的鼠标和键盘事件

onmouseup 鼠标按键放开时触发

onmousedown 鼠标按键按下触发

onmousemove 鼠标移动触发

onkeyup 键盘按键按下触发

onkeydown 键盘按键抬起触发

后记：

总是在看视频，总是不想敲代码，一敲错误百出。webapi还有一点，准备开始看项目视频，然后从项目里面找问题，然后回头过来学JS高级和jQuery。不知道效果如何，试试看吧。