三、DOM应用

1、dom基础

（1）dom 节点：

父节点的获取：parentNode、offsetParent（获取有定位的父节点）；
子节点的获取：childNodes和nodeType（也可以用children）；
首尾子节点：firstChild（firstElementChild 不会获取到文本节点，IE9以下不可用）、lastChild（lastElementChild）；
兄弟子节点：nextSibling（nextElementSibling）、previousSibling（previousElementSibling）；

（2）元素的属性操作：

obj.value（不可以传参）和 obj["value"]（可以传参）
setAttribute | getAttribute | removeAttribute
属性相关：
1、属性基本 html 怎么写 js 就怎么写，除了 class 外：div.className=" "；
2、style 属性无论是增加还是获取都是取行间，行间没有的话，取值的时候取不到；
3、style 的优先级高于 className；
4、获取非行间样式的兼容性写法：

function getStyle(obj, attr) {
	if(obj.currentStyle){
		return obj.currentStyle[attr];
	}else{
		return getComputedStyle(obj,null)[attr];
	}
}

（3）dom元素灵活查找：

用 className 来获取元素，封装函数 getByClass（oParent，sClass）

（4）创建、插入和删除元素

createElement | appendChild（加在末尾，也是先删后加）| insertBefore（节点，指定节点）--加在前面；
removeChild（）

（5）文档碎片（*）：createDocumentFragment----几乎不用

2、dom高级

（1）表格应用

表格的便捷操作：tHead、tFoot、tBodies、rows、cells；
表格的隔行变色；
添加和删除一行；
搜索和排序；

（2）表单应用

事件：onsubmit、onreset；
表单的验证；

四、JS运动技术

1、运动基础

（1）offsetWidth 和 offsetHeight：只和自身相关，与周围的元素无关

offsetWidth = border-left + border-right + padding-left+padding-right+元素本身的宽度;
offsetHeight = border-top + border-bottom + padding-top+padding-bottom+元素本身的高度；

（2）offsetLeft和offsetTop

offsetTop = 上级定位元素的padding + 元素本身的margin；
如果二者中间还有其他元素，还要加上该元素的 margin padding 和 border；
offsetLeft同理；

（3）scrollTop和scrollLeft：与滚动条相关的属性

scrollTop：滚动条当前位置显示的最上面和真正的最上面的距离，scrollLeft同理；

（4）clientHeight和clientWidth

clientHeight包括padding但不包括border、水平滚动条、margin的元素的高度，clientWidth同理；

（5）定时器

开启：setInterval（函数，时间）---循环执行；setTimeout（）---只执行一次；
关闭：clearInterval；clearTimeOut；
应用：数码时钟，延时提示框、无缝滚动；

2、运动框架

（1）开始运动前先关闭已有的定时器；

（2）将运动和停止的状态用 if else 隔开；

（3）练习：侧边栏、图片的淡入淡出；

3、缓冲运动

（1）速度越来越慢，最后停止；

（2）速度=（目标值-当前值）/缩放系数；

（3）缓冲菜单：速度取整（向上和向下取整）；目标值取整；

4、匀速运动的停止条件

（1）距离小于速度就停止；

（2）再手动将元素移到目标点；

（3）匀速和缓冲运动代码的差异：速度表达式不同，最后的停止条件和处理方法也不同

5、多物体运动框架

（1）多物体运动框架很多东西都不能公用，定时器和透明度的变量等，解决方法就是给每个元素设置自定义属性；

6、任意值的运动框架

（1）offset 属性 bug 和 opacity 的小数问题；

（2）练习：图片轮换的播放器；

7、运动中级

（1）链式运动

在原有框架的基础上加一个回调函数，在运动结束关闭定时器之后加

（2）完美运动框架

多个属性同时变化；
等所有的条件都满足再停止；

五、JS事件应用

1、基础

（1）event对象

用来获取事件的详细信息：鼠标位置，键盘键位
鼠标的位置：clientX 和 clientY
document的本质：可以看作一个最高级的节点，包含html 的所有内容，全局事件加在 document 上
事件对象的兼容性写法：var oEvent = ev || event

（2）事件冒泡

父级和子级的元素假如都有 onclick 事件，子级元素的被点击，则会触发父级元素的点击事件
阻止事件的冒泡：event.cancelBubble = true;

（3）鼠标事件

onmousemove事件
clientX 和 clientY 实际是可视区域的坐标，如果要获取相对与 document 的绝对坐标，需要和 scrolltop 等配合使用，封装相应的方法；
应用：div 跟随鼠标的移动

（4）键盘事件

keycode ：可以用来判断键盘的按键；应用：键盘控制 div 的移动；
ctrlkey、altkey、shiftkey：应用提交留言；

2、中级

（1）默认行为

默认行为就是浏览器自发产生的行为，不用人为写代码触发；
document.onContextMenu（右键菜单弹出）；
阻止默认行为，直接在事件的方法里 return false；
练习：阻止右键默认菜单，弹出自定义菜单；只能输入数字的文本框（keycode 和 onKeydown）；

（2）拖拽

1、基本原理：

元素位置的确定依靠鼠标位置和鼠标距离元素左上边界的长度来确定；
onmousedown计算鼠标和元素边界的距离，onmousemove重新定位元素，onmouseup停止事件；

2、拖拽的改进：

快速拖动鼠标会移出 div ：直接给 document 加事件；
火狐浏览器下空 div 的拖拽 bug：阻止默认行为；
防止 div 脱出页面：进行位置的修正；

3、应用

（1）事件绑定

老方法给同一个元素相同事件绑定不同的函数，会出现后面的把前面的覆盖了的问题；
解决以上问题需要用到新的事件的绑定方法

function myAddEvent(obj, ev, fn)
{
	if(obj.attachEvent)
	{
		obj.attachEvent('on'+ev, fn);
	}
	else
	{
		obj.addEventListener(ev, fn, false);
	}
}

事件的解绑：IE（detachEvent）；CHROME（removeEventListener）；

（2）高级拖拽

练习：不能脱出指定的元素；
练习：磁性吸附功能（靠近边界的时候把距离设置为0即可）；
练习：带框的拖拽；
事件捕获：将所有元素的事件集中到某一个元素上，解决IE下拖拽引起的其他元素的选中问题（setCapture()、releaseCapture()）；

（3）自定义滚动条

原理：横向拖拽；限制范围；计算比例；
应用：控制元素大小；控制透明度；控制文字的滚动；

六、AJAX技术

1、概念

Ajax 即 Asynchronous Javascript And XML（异步 JavaScript 和 XML）；
无刷新数据读取技术；

2、应用

读取静态数据，如txt文件等；
读取动态数据，如json；
用于网页的局部刷新；

其他：

eval（str）可以将 str 解析为 js 执行；
浏览器缓存是根据 url 进行缓存的，变更 url 可以阻止浏览器的缓存；

3、原理

（1）AJAX 原理

/**
 * ajax 的封装
 */

function myAjax(method,url,data,async,sucFn,faiFn){
	//get ajax obj
	if(window.XMLHttpRequest)
	{
		var oAjax=new XMLHttpRequest();
	}
	else
	{
		var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
	}
	//connection check method
	if(method.toUpperCase() == "GET"){
		oAjax.open(method, url+(data ? '?'+data : ''), async);
		oAjax.send(data);
	}else if(method.toUpperCase() == "POST"){
		oAjax.open(method, url, async);
		oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
		oAjax.send(data);
	}
	//state listener
	oAjax.onreadystatechange=function ()
	{
		if(oAjax.readyState==4)	
		{
			if(oAjax.status==200)
			{
				if(sucFn){
					sucFn(oAjax);
				}
			}
			else
			{
				if(faiFn){
					faiFn(oAjax);
				}
			}
		}
	};
};

（2）说明：

ajax 数据类型：xml 和 json；
字符集问题：统一字符集就不会出现乱码；
js 的变量与属性：使用未定义的变量会报错；使用未定义的属性仅仅是 undefine，不会报错；

（3）AJAX请求的几种状态

0：未初始化，还未调用 open 方法；
1：载入，已调用 send 方法，正在发送去请求；
2：载入完成，send 方法完成，收到所有的响应内容；
3：解析，解析响应内容；
4：完成，解析完成，可以在客户端使用了；

前端学习（三）javascript（*）