JS基础总结 （针对初学者总结）

JS易遗忘点总结

1.          js引入方式

（1）   外部引入

<script src=”index.js”><script>

（2）写在HTML内

（3）写在<script>内

2. js基本数据类型

（1）number string  Boolean undefined  null  对象  symbol

3.创建方式

（1）函数创建方式

函数声明：function foo(){}

构造函数：var foo=function(){}

 

（2）   数组创建方式

字面量：var arr=[]

函数构造：var arr=new Array()

（3）   对象创建方式

字面量：var obj={}

函数构造：

var obj =new Object()

（4）   字符串创建方式

字面量 ：var str=”abc”

构造函数：

 var str =new String（）

（5）   日期创建：

var oDate = new Date()

var hours = oDate.getHours()

//获取月

oDate.setHours(oDate.getHours+2)

//设置月

（6）   正则创建

字面量：var reg =/abc/

构造函数：var reg =new RegExp(“abc”)

4.数组方法：

push 追加

pop  尾删

unshift  头加

shift  头删

slice 截取 （x,y）从x开始到y

splice 截取

（x,y）从x开始截取y个，可以追加

Reverse 数组翻转

sort 排序

join 数组转字符串

（”  ”）（” ++”）拼接方式

concat  数组合并

es6新增方法：

indexOf 判断值有无  返回索引或-1

forEach 遍历 索引和值 无返回值

//例：arr.map(function(item,index){

return item+2

})

map 遍历 索引和值  有返回值

filter 过滤 去掉不符合元素

some 一个满足 输出true

every 全部瞒足 输出true 否则false

reduce 回调累加 a+b 到  a+b+c   即：前两个作为第二组的一个值与下一个值相加

7.字符串方法：

charAt 取索某个引字符

indexOf 返回索引 无-1

substring 截取 （x,y）x到y位置

可颠倒

substr 截取 （x,y）x开始y个

split 字符串转数组 (“;”)

replace 替换 （new,old）

8.正则方法

 

test  返回布尔值

exec  返回匹配结果

可用字符串方法

search  match replace split

9.cookie创建

document.cookie=”name=value;expiress=”

8.计时器，延时器 清除器

setInterval(function,时间)

//多次执行 ，不终止

setTimeout(function,时间)

//多久后，执行一次

clearInterval()

clearTimeout() //()定时器的名字

9.Dom

getElementById

getElemengtsByTagName

getElemengtsByclassName

getElemengtsByName

querySector

querySectorAll

10.创建节点

（1）元素节点创建：

document.createElement(“div”)

属性节点创建：

setAttribute(“id”,”box1”)

文本节点创建：

createTextNode(“aa”)

（2）元素和文本添加方式：

父对象.appendChild(new)

元素和文本删除方式：

removeChild(old)

元素和文本替换方式：

replaceChild(new，old)

元素插入方式：

父对象.insertbefore(Op,Ospan)

属性获取方式：

getAttribute()

属性删除方式：

removeAttribute()

扩展：parentNode 元素父节点

11.offsetWith,offsetHeight,

offsetTop,offsetLeft

的相对于定位父级或body的可视问题

offsetWidth 元素宽

即：padding+border+width

offsetLeft/offsetTop

相对于定位父级的左边距和上边距 没有即HTML

扩展：offsetparent 父级

12.鼠标点击事件问题 （结合11易混点复习）

var evt =e ||event

用法例：evt.client

evt.target || evt.srcElement

//获取事件源

clientX,clientY  鼠标距浏览器距离

pageX，pageY 鼠标距文本距离 （在无滚动条时和client相同）

offsetX，offsetY 鼠标距事件源的距离

13.事件综合

（1）拖拽/鼠标事件 

onmousedown 鼠标点击

onmouseover 鼠标移入

onmousemove  鼠标移动

onmouseup   鼠标释放

onmouseout 鼠标移出

（2）键盘事件 （一般针对于input输入框）

onkeydown 任意键

onkeyup  键释放

onkeypress  字符键

（3）表单事件（针对于form）

onsubmit 提交时

onreset 重置时

14.事件行为  捕获 事件源 冒泡

（1）阻止默认行为

event.preventDefault()

event.returnValue=false

return false（常用）

（2）阻止冒泡

event.cancelBubble=true（支持IE）

event.stopPropagation()（不支持IE）

 注：本文章属个人总结，如有错误或者不到位的地方，各位多多指教，如感觉有用请多多关注，以后也会定期发布一些关于前端的知识点。