学习笔记2
一、数组常用方法
数组的添删查改
var arr=[1,2,3,4]
arr.push()//往数组的尾部添加数据
arr.unshift()//往数组的头部添加数据
arr.pop//删除数组尾部的那一个数据，返回的结果是被删除的那个数据
arr.shift//删除数组头部的那一个数据，返回值是被删除的那个数据
arr.splice(m,n)//从数组的索引m开始删除n个数据，返回值是被删除的那个数据的数组形式
arr.splice(m,n,a)//从数组的索引m开始删除n个数据,增加a在m
之前（a 可以是a，a及更多），返回值是被删除的那个数据的数组形式
arr.slice(m,n)//从数组的索引m开始截取n个数据，和字符串的用法一样不会改变原数组
arr.concat()//将指定数据合并到原数组的尾部，同样不改变原数组
arr.join(字符串)//用指定的字符串来代替原数组的逗号，返回值是一个字符串，不会改变原数组
arr.indexOf(数据)//从左到右判断数据在数组中的位置，如果存在就返回索引位置，不存在就返回-1
arr.lastIndexOf(数据)//从右到左判断数据在数组中的位置，如果存在就返回索引位置，不存在就返回-1
数组排序
arr.reverse//数组倒序，返回值是倒序的数组，会改变原数组
arr.sort//数组排序，返回值是数据按Unicode排序后的数组，会改变原数组
arr.sort（function（a，b）{ retur a-b/*b-a*/}）//升序或者降序的内部机制，回调函数的返回值是正数就交换位置，是负数就不交换位置(冒泡排序法)
二、DOM的基本操作
DOM：document object model(文档对象模型)
DOM节点
节点的分类 nodetype （用来检测节点的类型）
- 元素节点 1
- 属性节点 2
- 文本节点 3
- 注释节点 8
- 文档节点 9
- 空白节点 11
**DOM操作 **
基于节点树的操作
oBox.firstChild 第一个子节点
oBOx.lastChild 最后一个子节点
oBox.childNode 子节点的集合
oBox.nextSibling 上一个兄弟节点
oBox.previouSiblibing 下一个兄弟节点
基于元素节点的操作
oBox.firstElementChild 第一个元素子节点
oBOx.lastElementChild 最后一个元素子节点
oBox.children 元素子节点的集合
oBox.nextElementSibling 下一个兄弟元素 节点
oBox.previouElementSiblibing 上一个兄弟元素节点
DOM的属性
nodeName//节点的名字用大写显示
nodeValue//文本节点和注释节点的内容
nodeType//节点的类型
attributes//元素节点的属性集合
判断一个元素节点有没有子节点
element.hasChildNodes()//如果有则返回true，没有则返回false
创建节点
document.createElement(内容)//创建元素节点
document.createTextNode(内容)//创建文本节点
document.createComment(内容)//创建注释节点
document.createDocumentFragment(内容)//创建文档片段节点
添加节点（剪切操作）
parentNode.appendChild(a)//在parentNode的最后面添加节点a
parentNode.insertBefore(a,b)//把节点a添加在节点b前面
删除节点
parentNode.removeChild(a)//删除parentnode的子节点a
替换节点（剪切操作）
parentNode.replaceChild(a,b)//用节点a替换b节点
元素节点的常用属性
innerHTML//获取元素节点的内容，可读可写（如果内容中有符合html格式的，会被解析成标签）
innerText//获取元素节点的内容，可读可写（如果内容中有符合html格式的，不会被解析成标签）
attribute//获取元素节点的属性节点
三、脚步化CSS
dom.style//只能获取行内样式表，一般不用来获取样式，常用行内样式表来设置样式
getComputeStyle(oBOx,null)//获得显示（计算）样式表，是只读的不可以用来修改（获得的是字符串且带单位）
获取元素的显示属性
dom.clientWidth//获取的是width+左右的padding
dom.clientHeight//获取的是width+上下的padding
dom.offsetwidth//获取的是width+左右的padding+左右的border
dom.offsetHeight//获取的是width+上下的padding+上下的border
（以上获得的全是数字）
dom.offsetParent//获得有定位属性的父级
dom.offsetLeft//获取距离有定位属性父级的水平距离
dom.offsetTop//获取距离有定位属性父级的竖直距离
window.pageYOffset//获取页面滚动的水平距离
window.pageXOffset//获取页面滚动的竖直距离
window.innerWidth//获取页面的宽度
window.innerHeight//获取页面的高度
window.scrollTo(x,y)//让滚动条滚动到指定位置
window.scrollBy(x,y)//让滚动条每次滚动指定距离
四、定时器
setTimeout(function(){//延迟定时器，30毫秒后只执行一次
},30)//当一个函数作为i另一个函数执行时的参数，则这个函数是回调函数
setInterval(function(){//循环定时器，每隔30毫秒执行一次
},30)
定时器中的回调函数中的参数怎么传？
例子：
setInterval(function(a,b){
console.log(a+b)
},30,2,3)从定时器的第二个实参开始，之后的都表示回调函数的实参
结果
2,3
对于JS是单线程的，而单线程一定是同步的但是定时器是多线程的，所以浏览器会给定时器单独开辟一个线程，即放到其他同步代码执行完在执行定时器。
for(var i=0;i<5;i++)
{
setTimeout(function(){
console.log(i)
},i*30)//定时器内真正异步的部分是里面的回调函数部分
}
再来一个例子
for(var i=0;i<5;i++)
{
setTimeout(function(i){
console.log(i)
},30,i)
}//此次结果是0，1，2，3，4
五、日期对象&&数学对象
日期对象
获取日期时间
var date=new Date()//获取计算机的时间/时间戳
date.toLocaleString()//获得本地日期+时间字符串
date.toLocaleDateString()//获得本地日期字符串
date.toLocaleTimeString()//获得本地时间字符串
date.getFullYear()//获取年
date.getMonth()//获取月 0-11
date.getDate()//获取日
date.getHours()//获取小时
date.getMInutes()//获取分钟
date.getSeconds()//获取秒
date.setFullYear()//设置年
date.setMonth()//设置月 0-11
date.setDate()//设置日
date.setHours()//设置小时
date.setMInutes()//设置分钟
date.setSeconds()//设置秒
//新年倒计时
var date=new Date(2021,1,1);//设置时间戳
setInterval(function(){
var new=new Date;
var time=new-date;//获取到达过年前的毫秒数
var day=Math.floor(time/(1000*60*60*24));
var hour=Math.floor(time/(1000*60*60)%24);
var minute=Math.floor(time/(1000*60)%60);
var second=Math.floor(time/(1000)%60);
console.log('离过年还有'+day+'天'+hour+'小时'+minute+'分'+second+'秒');
},1000)
数学对象
Math对象
Math.PI//获取圆周率
Math.random()[0,1)//获取随机数(可以取到0不能取到1)
Math.min(很多参数)//返回的是实参中的最小值
Math.max(很多参数)//返回的是实参中的最大值
Math.ceil(实参)//向上取整
Math.floor(实参)//向下取整
Math.round(实参)//四舍五入
Math.abs(实参)//取绝对值
Math.sin(x)//求x的正弦值
Math.cos(x)//求x的余弦值
Math.tan(x)//求x的正切值
Math.pow(x,y)//求x的y次方
Math.aqrt(x)//求x的平方根
