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). 常用数据类型
字符型、布尔型、数值型;相互之间的转换方式、获取数据类型的方法
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对比
(六). 面向对象入门
简单介绍面向对象的基础入门,后在面向对象章节,详细介绍。