一. 总体介绍

   结合近半年来前端的项目的经验，这里梳理一下JS常用知识，方便自己日后温习查找，同时给广大JS入门者提供一些帮助，文章中如有错误，欢迎指出。这里从JS基础、Dom操作、JS进阶、四大家族、动画、面向对象入门等方面着重介绍一套JS相对完善的前端JS体系。

   

 

二. 详细介绍

（一）. JS基础

　　(1). 常用8个常用事件：onclick(单击)、ondbclick(双击)、onfocus(聚焦)、onblur(离开)、onchange(内容改变)、onmouseover(移入)、onmouseout(移出)、onkeyup(键盘按下)、window.onload(页面加载)、window.unload(页面关闭)。

     (2). 常用的输出：alert()、console.log()、console.warn()、console.error()、document.write()。

     (3). 常用的获取方法： 

　　　  a.根据id获取：document.getElementById()

          b.根据类名获取：document.getElementsByClassName()

    　　 c.根据标签获取：document.getElementsByTagName()

     (4). 属性的获取和设置：

         A：class内的属性的设置：js对象.style.className='';

             class内的属性的获取：结合currentStyle和getComputedStyle进行封装。

         B：标签内其他属性：

             获取节点属性：getAttribute(“属性名”)

             设置节点属性：setAttribute(“属性名”，“属性值”)

　　　　  删除节点属性：removeAttribute(“属性名”)

     (5). 常用数据类型

        字符型、布尔型、数值型；相互之间的转换方式、获取数据类型的方法

　  (6). 数组

        A：数组声明的两种形式：常规new形式、类似于字面量的形式。

        B：数组增加的两种方式：push()和unshift()。

        C：数组删除的两种方式：pop()和shift()。

        D：数组的连接：concat()。

        E：数组和字符串的转换： join()和split()。

（二）. Dom操作

　(1). 获取节点

　　　A：父节点：parentNode

        B: 首尾节点：firstElementChild（firstChild）和 lastElementChild（lastChild）

        C: 上一个和下一个兄弟节点：nextElementSibling（nextSibling）和 previousElementSibling（previousSibling）

        D：子节点： childNodes和children

   (2). 节点操作

       A: 创建：document.createElement(' ')

       B：插入：insertBefore()和appendChild()

       C：移出: removeChild()

       D：复制：clone()

（三）. JS进阶　　

　(1). 函数基础

　　　A: 函数变量提升:  在函数内声明与函数外相同名称的变量，内部变量级别将提升；函数表达式和函数的区别。

        B：常用函数：slice、toFixed、substring等

        C：日期函数

        D：定时器函数：setTimeout() 、setInterval()。

        E：运算符基础：短路表达式

   (2). 闭包

　　　A: 闭包的目的和原理

        B：闭包常用的两种写法

        C：闭包的参数传递

        D：闭包的应用：闭包节流

  (3). 冒泡

　　　A: 冒泡的原理

        B：阻止冒泡的js的兼容写法

        C：阻止冒泡的JQuery兼容写法以及JQuery中一些方法中可以通过return false来阻止冒泡

        D：阻止冒泡和阻止默认行为的区别

（四）. 四大家族

  (1). offset家族　

　　　A: 自身宽高：offsetWidth和offsetHeight （包含padding和border）

        B：距有定位的长辈的距离： offsetLeft和offsetTop

        C：距有定位的长辈中最近的元素：offsetParent

        D：offsetXX和style.XX的区别

  (2). scroll家族　　

　　　A: scrollTop和scrollLeft的兼容性写法

        B：scrollTo(x,y)的用法

        C：与JQuery方式进行对比

        D：案例回到屏幕顶部

  (3). event家族

　　　A：event.pageX 、event.clientX 、eventscreenX

        B：盒子中某点位置的计算公式

  (4). client家族

　　　A：获取clientHeight或clientWidth的兼容性写法

        B：与scrollHeight和offsetHeight的区别

（五）. 动画　

  (1). 匀速动画

 　　封装公式

  (2). 缓动动画

      封装各种情况，与JQuery对比

（六）. 面向对象入门

　　简单介绍面向对象的基础入门，后在面向对象章节，详细介绍。