JS 进阶教程

#JS DOM

1、dom导航

• 节点对象的一些属性
  • nodeName
    • nodeName 是只读的
    • 元素节点的 nodeName 等同于标签名
    • 属性节点的 nodeName 是属性名称
    • 文本节点的 nodeName 总是 #text
    • 文档节点的 nodeName 总是 #document
  • nodeValue
    • 元素节点的 nodeValue 是 undefined
    • 文本节点的 nodeValue 是文本文本
    • 属性节点的 nodeValue 是属性值
  • nodeType：具体的值是数字，每个数字代表不同的节点类型

关于nodeList和HTMLCollection

• HTMLCollection是 HTML 元素的集合
• NodeList 是文档节点的集合
• 都是类数组，都有 length 属性和索引

2、属性操作

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

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

document对象的一些属性：cookie、domain、body（对象）、forms（对象集合）

5、表格应用

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

6、表单应用（表单验证）

• input 添加属性进行输入约束：disabled、required、pattern、max和min
• css 伪选择器选择相应约束的元素：disabled、invalid、valid、optional、required
• input 约束验证相关方法
  • checkValidity() ：input 的数据有效则返回 true
  • setCustomValidity() ：设置input元素的 validationMessage（校验提示信息）
• input 约束验证相关属性
  • validity   包含一系列和input元素的合法性相关的布尔属性
  • validationMessage   错误提示信息
  • willValidate   是否会进行校验
• validity包含的属性：customError、patternMismatch、rangeOverflow、rangeUnderflow、stepMismatch、tooLong、typeMismatch、、valueMissing、valid
• 注意：以上基于html的约束及其验证在IE浏览器不太好使！！！

---------------------------------------------------------------------

#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）完美运动框架

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