day01
一、什么是数组？
存储一组或一系列相关数据的容器
二、数组的好处？
- 数据集中管理，提高性能
三、数组元素
存储在数组中的数据
四、数组下标
能够唯一标准一个容器的索引号 ， 从0开始 数组的长度 -1
五、数组属性
length : 数组长度
六、如何声明数组？
1. 字面量 ： [] : 无论[]中写什么数据，都是这个数组的元素
2. 构造函数的方式： new Array()
1> 如果仅有一个参数且是正整数时，表示这个为数组的长度
2> 如果仅有一个参数且是小数或者是负数时，报错
3> 如果有多个参数或者是非数字类型，则表示数组元素
七、如何给数组赋值
- 初始化数组
- 先声明，后f赋值
注：操作数组空间，都要使用循环遍历数组（记得从0下标开始遍历）
八、数组方法：（增删改截拼复排转）（方法的作用、参数、返回值、是否会影响原对象）
增：
1. 前增 unshift（元素，元素，....）
作用：在数组的前面增加元素（一个数组按一个元素增加）
返回值：新增后数组的长度
是否会影响原对象：是
案例：
var arr =[true,false,null];
console.log(arr.unshift(9,8,7,[6,5,4],,3)); //8
console.log(arr); //[9,8,7,[6,5,4],3,true,false,null]
2. 后增 push(元素，元素,...)
作用：在数组的后面增加元素（一个数组按一个元素增加）
返回值：新增后数组的长度
是否会影响原对象：是
var arr = [true,false,null];
console.log(arr.push(9,8，7，[6,5，4],3)); //8
console.log(arr); //[true,false,null,9,8,7,[6,5,4],3]
删：
1. 前删 shift()
作用：删除数组前面的一个元素（一次只能删除一个元素）
返回值：被删除的元素
是否会影响原数组：是
var arr = [true,false,null];
console.log(arr.shift()); //true
console.log(arr); //[false,null]
2. 后删 pop()
作用：删除数组后面的一个元素（一次只能删除一个元素）
返回值：被删除的元素
是否会影响原数组：是
var arr = [true,false,null];
console.log(arr.pop()); //null
console.log(arr); //[true,false]
改： splice(start,dellength,ele,ele,......)
作用：可以在数组的任意位置进行增、删、改的操作。
返回值：被删除的元素数组
是否会影响原数组：是
var arr = [1,2,3,4,5,6,7,8,9]
console.log(arr.aplice(5));//[6,7,8,9]
console.log(arr);//[1,2,3,4,5]
var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.splice(5,2));//[6,7]
console.log(arr); //[1,2,3,4,5,8,9]
var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.splice(5,2,true)); //[6,7]
console.log(arr);//[1,2,3,4,5,true,8,9]
截： slice(start,end)
作用：截取数组中的部分元素。
返回值：截取到的新数组
是否会影响原数组：否
var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.slice(4));//[5,6,7,8,9]
console.log(arr); // [1,2,3,4,5,6,7,8,9]
var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.slice(4,6));//[5,6]
console.log(arr); // [1,2,3,4,5,6,7,8,9]
var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.slice(-6,-4)); //[4,5]
console.log(arr); // [1,2,3,4,5,6,7,8,9]
var arr = [1,2,3,4,5,6,7,8,9];
拼：concat(ele,ele,...)
作用：将新的元素拼接到指定数组的后面。（如果元素是数组，展开最外层数组，将里面的元素进行拼接）
返回值：拼接后的新数组
是否会影响原数组：否
var arr = [1,2,3]
console.log(arr.concat(true,[4,5,[6,7,8],9]));//[1,2,3,true,4,5,Array(3),9]
console.log(arr); //[1,2,3]
复：
function copyArr(arr){
return arr.slice(0);
}
function copyArr(arr){
return arr.concat();
}
function aopyArr(arr){
var list = [];
for(var i = 0,len = arr.length;i < len;i ++){
list.push(arr[i]);
}
return list;
}
排 ：
1. reverse() :
作用：将数组元素逆序存放
返回值：逆序后的数组
是否会影响原数组：是
var arr = [5,3,6,2,7];
console.log(arr.reverse());//[7,2,6,3,5]
console.log(arr);//[7,2,6,3,5]
2.sort()
作业：按字符编码排序
var arr = [5,3,6,10,100,2,7];
console.log(arr.sort());//[10,100,2,3,5,6,7]
console.log(arr);//[10,100,2,3,5,6,7]
sort(function(a,b){return a - b;}) //按数字从小到大排
sort（function(a,b){return b - a;}) //按数字从大到小排
转：
1. toString() （它不是数组的方法，是Object对象的方法）
数字.toString(2~36) : 将数字转为指定进制的字符串
数组转字符串
2. join('连接符');
作用：将数组连接成以指定连接符的字符串
返回值：转换后的字符串
是否会影响原数组：否
九、整数数组、字符串数组、对象数组、二维数组
[1,2,3,4,5]
['a','b','c']
[{},{},{}]
[[],[],[],[]]
var arr = [[[[5]]]];
console.log(arr[0][0][0][0])
十、 for in 只能遍历对象
语法 ：
for(变量 in 对象){
遍历对象时，变量代表key
语句组；
}
var arr = [1,2,3,4];
for(var i in arr){
console.log(i,ar[i]);
}
var obj = {id : 1,name : '苹果',price : 50 ,num :8};
//遍历对象
for(var key in obj){
console.log(key,obj[key]);
}
十一、冒泡排序：相邻的俩个数进行比较，符合条件，交换位置。
function sortByBubbleFromSmallToBig(arr){
for(var i = 1;i < arr.length;i ++){
for(var j = 0;j < arr.length - i;j ++){
if(arr[j] > arr[j + 1]){
var t = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = t;
}
}
}
return arr;
}
day02
一、选择排序：取一个元素与剩下所有的元素进行比较，符合条件，交换位置
function sortSelectorFromSmallToBig(arr){
for(var i = 0; i < arr.length - 1; i ++){
for(var j= i + 1;j <arr.length; j ++){
if(arr[i] > arr[j]){
var t = arr[i];
arr[i] = arr[j];
arr[j] = t;
}
}
}
return arr;
}
二、利用堆栈理解值传递与引用传递
//基本数据类型（只有一个值，且值存放在栈空间中）的值都属于值传递
//复合数据类型（多个值，栈空间中存放的是指向堆的地址，而堆中存放的才是数据）的值都属于引用传递
三、JSON 是一个跨平台跨语言的一种网络数据传输格式。
[] : 如果里面有字符串，一定使用双引号
{} : key必须加双引号，value如果是字符串，必须加双引号
注：在JSON中value的值不能是： undefined NaN function Infinity 一个JSON文件里只能有一个JSON数据
原生JS环境 JSON
[1,2,3,'4'] [1,2,3,"4"]
{name : '张三'} {"name":"张三"}
{'name' : "张三"}
{"name":"张三"}
{eat : function(){
return '吃';
}}
四、严格模式
"use strict"; //必须放到作用域的开头部分
什么影响？
1. 不能够隐式声明变量，必须添加关键字
2. 函数的形参不允许重复
3. 函数中形参值的变化不会影响arguments中的值。
4. arguments中的callee方法不能再表示自己的函数（淘汰了）
5. with() :已禁用
6. 新增的关键字 : eval arguments
7. 取消了八进制
五、 arguments : 内置的伪数组对象（实参副本）
六、ES5新增的数组方法（都不会改变原数组）
1. indexOf(元素,[start]) : 查找元素在数组中第一次出现的下标位置。如果没有找到，返回-1,；第二个参数，从哪个下标开始向后查找。
2. lastIndexOf(元素，[start]) : 查找元素在数组中从右向左第一次出现的下标位置。如果没有找到，返回-1；第二个参数，从哪个下标开始向前查找。
3. forEach(function(value,index,array){}) 遍历数组
4. map(function(Value,index,array){return ...}) 遍历数组，返回一个新数组（可以对数组中的每一个元素进行操作）
5. filter(function(value,index,array){return 过滤条件}) 过滤满足条件的元素，返回一个新数组
6. some(function(Value,index,array){return ...}) 判断数组中的元素是否符合条件，符合条件，返回true,同时结束循环。如果都不符合条件，返回false.
7. every(function(value){
return ...
}) 判断数组中的元素是否符合条件，如果都符合条件，返回true。如果有一个不符合，则返回false,同时退出循环。
8. reduce(function(prev,next,index,array){
return ...
}) 归并。 prev第一次循环的时候，取的是数组中第一个元素。next是依次从第二个元素开始遍历。从第二次循环开始，将prev与next运算后的结果再次赋值给prev
七、String 字符串
1. 如何声明字符串?
1> 字面量 '' ""
2> new String()
2. 属性： length 长度 字符串下标也是从0开始，最大的下标是 length - 1
3. 方法 ： 查 替 截 转 （都不会改变原串）
查：
1. indexOf('字符串',start) 查找字符串在父串中第一次出现的下标位置。如果没有找到，返回-1；第二个参数，从哪个下标开始向后查找。
2. lastIndexOf('字符串',start) 查找字符串在父串中从右向左第一次出现的下标位置。如果没有找到，返回-1；第二个参数，从哪个下标开始向前查找。
3. charAt(下标) : 查找指定下标位置的字符
4. charCodeAt(下标): 查找指定下标位置字符的编码值。
替：
replace(旧串,新串) 替换字符串，一次只能替换一个
截： 截取字符串中指定范围的子串
1. substring(start,end) 支持参数互换，不支持负数
2. slice(start,end) 支持负数，不支持参数互换
3. substr(start,length) 截取指定长度的字符串
转：
1. toUpperCase() : 小写字母转大写字母
2. toLowerCase() : 大写字母转小写字母
3. split('切割符',[length]) : 将字符串转为数组
4. 静态方法： String.fromCharCode() 将编码转为字符
4E00 19968
9FA5 40869
20902（回文数）
day03
一、Math : 内置的数学对象，注：Math对象不可以new!!!
1. 属性：
Math.PI : 圆周率
2. 方法：
Math.abs() : 绝对值
Math.round() : 四舍五入
注：如果是负数时， > 0.5 进一 <= 0.5 舍去
Math.ceil() : 向上取整
Math.floor() : 向下取整
Math.max() : 最大值
Math.min() : 最小值
对数组求最大值或最小值
Math.max.apply(null,array)
Math.min.apply(null,array)
Math.pow(m,n) : 求m的n的次方
Math.sqrt(n) : 求开方
Math.random() : 0到1之间的岁间数（包含0，不包含1）
万能随机公式
Math.floor(Math.random() * (max -min + 1) + min)
Math.round(Math.random() * (max - min) + min);
二、日期对象
1. 创建日期对象
var date = new Date();
var date = new Date(2002,2,5,18,30,50);
var date = new Date(2002,2,5);
var date = new Date('2002-3-5 18:30:50');
var date = new Date('2002-3-5');
var date = new Date("month dd,yyyy hh:mm:ss");
var date = new Date("month dd,yyyy");
2. 获取
date.getFullYear(); 年
date.getMonth(); 月
date.getDate(); 日
date.getDay(); 星期
date.getHours() 时
date.getMinutes() 分
date.getSeconds() 秒
date.getMilliseconds() 毫秒
date.getTime() 时间戳
3. 设置
date.setFullYear()
date.setMonth()
date.setDate()
date.setHours()
date.setMinutes()
date.setSecounds()
date.setMilliseconds()
date.setTime()
4. 本地字符串
date.toLocaleString()
date.toLocaleDateString()
date.toLocaleTimeString()
day04
一、BOM ：浏览器对象模型
二、顶级对象是 ：window
三、顶级对象的六大子对象是 ：document location history navigator screen frames
四、location
跳转页面
window.location
location.href
location.assign()
五、history
刷新页面
history.go(0)
location.reload([true]) false : 从缓存中加载数据 true:从web服务器中加载数据
六、navigator
userAgent : 浏览器的名称、版本和操作系统的信息
七、window对象的方法
1. alert() : 警告框
2. prompt() : 输入框
3. confirm() : 选择框
4. open() : 打开新窗口
5. close() : 退出当前窗口
八、计时器
setInterval(函数,毫秒值) 间歇性的计时器（循环--可以控制循环间隔时间的）
clearInterval(计时器返回值) 停止计时器
setTimeout(函数，毫秒值) 延时器，定时器 一次性的计时器
clearTimeout(返回值) 停止延时器
九、onscroll 滚动事件
低版本谷歌： document.body.scrollTop
其他版本谷歌或其他浏览器 ： document.documentElement.scrollTop
十、DOM ：文档对象模型
十一、获取
document.getElementById(id) : 返回对象
document.getElementsTagName(标签名) : 返回类数组（伪数组）
document.getElementsByName(name) : 返回类数组（伪数组）
//IE9以下不兼容
document.getElementsByClassName(class) : 返回类数组（伪数组）
//IE8以下不兼容
document.querySelector(选择器) : 返回对象
document.querySelectorAll(选择器) : 返回类数组（伪数组）
function byClassName(obj,className){
if(obj.getElementsByClassName){ //支持
return obj.getElementsByClassName(className);
}else{
//获取全部
var eles = obj.getElementsByTagName('*');
var arr = [];
for(var i = 0,len = eles.length; i < len;i ++){
if(eles[i].className === className){
arr.push(eles[i]);
}
}
return arr;
}
}
day05
一、创建对象
1. 元素节点对象
document.createElement()
2. 文本节点对象
document.createTextNode()
3. 文档碎片（提高性能）
document.createDocumentFragment()
二、添加节点对象
1. 父节点.appendChild(子对象) //追加节点
2. 父节点.insertBefore(新子节点,指定的子节点) //插入节点
三、修改节点对象
父节点.replcaeChild(新节点，旧节点)
四、删除节点对象
父节点.removeChild(子节点) //删除子节点
当前节点.remove() //删除自己 有兼容
五、克隆节点对象
节点对象.cloneNode([true]); false : 默认值，只克隆当前节点，不包含内容。true : 克隆当前节点，包含内容。
六、常见节点及节点属性
nodeName nodeType nodeValue
元素节点 标签名 1 null
属性节点 属性名 2 属性值
（attributes）
文本节点 #text 3 文本内容（纯文本）
七、访问或设置元素节点中的属性
支持
1. 对象.属性
对象['属性']
2. 不支持
对象.setAttribute('属性','值')
对象.getAttribute('属性')
对象.removeAttribute('属性')
八、
outerHTML : 设置或获取当前标签及所有内容
innerHTML : 设置或获取当前标签中的内容（包含超文本，会解析超文本）
innerText : 设置或获取当前标签中的内容（只有纯文本，不会解析超文本）
九、获取所有的子节点？
1. childNodes : 元素子节点和文本子节点
删除空白文本子节点
function removeSpaceText(node){
//获取所有的子节点
var childs = node.childNodes;
for(var i = 0;i < childs.length; i ++){
if(childs[i].nodeType ===3 && /^\s+$/.test(childs[i].nodeValue)){
node.removeChild(childs[i]);
}
}
return node;
}
2. children : 只获取元素子节点
十、高级选取
parentNode : 父节点
firstChild : 第一个子节点
lastChild : 最后一个子节点
previousSibling : 前一个兄弟节点
nextSibling : 下一个兄弟节点
//有兼容
firstElementChild : 第一个元素子节点
lastElementChild : 最后一个元素子节点
previousElementSibling : 前一个元素兄弟节点
nextElementSibling : 后一个元素兄弟节点
十一、
offsetWidth : 元素的相对宽度 width + border + padding
offsetHeight : 元素的相对高度 height + border + padding
十二、获取非行内样式
getComputedStyle(ele,1)['属性'] 标准浏览器
ele.currentStyle['属性'] IE9以下
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr];
}
十三 、
offsetLeft
offsetTop
1358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
