JS入门

一. 总体介绍

   结合近半年来前端的项目的经验,这里梳理一下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对比

(六). 面向对象入门

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

   

 

posted @ 2017-02-08 16:57  Yaopengfei  阅读(434)  评论(0编辑  收藏  举报