stanwuc
stanwuc

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

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

你可能感兴趣的:(Web前端)