JS常用webApi总结

在不用JQuery库的情况下，运用JS原生代码做一些页面效果 

---

DOM

1、获取元素    通过ID，Class，TagName,获取，经常使用的是 document.querySelector(),document.querySelectorAll()，如果要获取HTML与Body元素，则用document.body,document.documentElement。

2、事件基础    事件有三要素（1，获取事件源、2，事件类型【什么样的事件,例如click，mousemove】，3、事件处理函数）

3、改变元素的内容（innerText,innerHTML）innerText会去除空格和换行，但是不识别html，innerHTML会保留空格和换行，识别html

4、改变CSS属性用style，通过className改变class文件

5、排他思想很关键，在全选、单选样式时使用，

​
var element=docuemnt.querySelector('element');
for(var i=0;i

  6、自定义属性操作   setAttribute('index',2);   移除属性   removeAttribute('index')，自定义属性的目的是为了保存并使用数据

有些数据可以保存在页面中，不需要保存在数据库。

 7、节点操作     父级节点 parentNode   子级节点  childNode   兄弟节点  nextSibling   previousSibling

 8、创建节点     createElement('name')      添加节点    div.append(NodeName)   删除节点    removeChild(NodeName)

复制节点 cloneNode(true)

9、创建元素的三种方式， document.write('

123

'),document.innnerHTML='百度'  document.

createElement('NodeName')        innerHTML效率最低，createElement效率一般，innerHTML数组方式效率最高

10、事件监听

添加事件监听element.addEventListener('click',function(){})  删除事件（解绑事件）removeEventListener

11、DOM事件流

事件流会经历三个阶段  1、捕获阶段  2、当前目标阶段 3、冒泡阶段   

事件冒泡，会逐级向上运行事件

12、阻止默认行为    e.preventDefault() 阻止所有默认的行为

13、阻止事件冒泡    e.stopPropagation()      //  旧版  window.event.cancelBubble()   阻止冒泡事件  Bubble  泡泡的意思

14、常用的鼠标事件   1、 可以禁用左键鼠标菜单，contextmenu     2、可以禁止选中文字   selectstart   

                                    3、鼠标可以获取页面的坐标   e.clientX, e.clientY,   e.pageX, e.pageY e.screenX ,e.screenY

15、  元素偏移量offset系列    （获得元素距离带有定位父元素的位置，获取元素自身的宽度长度，返回的数值不带单位

16、offset和style中获取元素大小的区别，offset获取border、padding、width加起来的值并且不带单位，style带单位，只能获取width值

17、元素滚动值，scrollTop与scrollLeft（滚动距离），pageXOffset获取页面滚动的距离

18、mouseenter和mouseover的区别，mouseenter只有经过自己的盒子才会触发事件，mouseover触发自己的子盒子也会触发事件

19、动画函数的封装，animate(obj，target)，停止动画的本质就是停止定时器 clearInterval

20、如何实现缓动效果，缓动动画就是让元素运动速度有所变化，最常见的就是让它的速度慢下来

21、动画完整版代码：

function animate(obj,target,callback){
    //先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj,target);
    obj.timer= setInterval(function(){
    //步长值卸载定时器的里面
    //把步长值改为整数，不要出现小数的问题
    var step=(target-obj.offsetLeft)/10;
    setp=setp>0?Math.ceil(step):Math.floor(step);
    if(obj.offsetLeft==target){
        clearInterval(obj.timer){
            //回调函数
            callback && callback();
        }
        obj.style.left=obj.offsetLeft+step+'px';
    }
},15);
}

22、常见的网页特效：轮播图，节流阀，返回顶部，筋斗云案例

23、触屏事件，触摸事件对象主要作用于移动端的开发，TouchEvent(touchstart触摸元素,touchmove移动手指,touchend离开手指)

(拖拽元素)，手指移动也会触发屏幕滚动，所以要用e.preventDefault()禁止它的默认。