Javascript基础2

一 day01 数组
1.概念？
数组是可以存放一组或一系列相关数据的容器；
2.什么时候使用数组？
数据量多的时候；
3.使用数组的好处？
集中管理数据，访问方便；
读取数据效率高；
4.数组元素？
存放在数组中并赋予唯一索引号的数据；
5.如何声明或定义数组?
a.以字面量的方式
var arr = [1,2,3,4,5,{name:"you",ago:25}];
b.构造函数方式
var arr = new Array[5];
6.下标？
最小下标：0
最大下标：length-1
7.属性？
length
8.如何给数组赋值？
a.初始化赋值
var arr = [1,2,3,4,5]
b.先声明，后赋值
var arr = [];
arr[0] = 90;
arr[1] = 99;
var arr = [];
  arr[0] = 90;
  arr[1] = 69;
  arr[2] = 99;
  arr[3] = 89;
  arr[4] = 79;
for(var i = 0;i < 5;i++){
arr[i] = Number(prompt("请输入第" + (i + 1) +"个成绩"))
}
for(i = 0;i < arr.length;i ++){
console.log(arr[i]);
}
9.数组的方法（增、删、改、截、拼、复、排、转）
1.作用 2.参数 3.返回值 4.是否影响原数组
A.增
前增unshift();
后增push();
1.在数组前面（后面）增加元素
2.参数个数不限（类型不限）
3.返回值为新增后的数组长度
4.影响
复制数组可以用push();
var arr = [2,3,4,5,6,];
var list = [];
for(var i = 0;i < arr.length;i++){
list.push(arr[i]);
}
console.log(list);
B.删
前删shift()
后删pop()
1.在数组前面（尾部）删除元素
2.没有参数，一次只能删除一个
3.返回值为删除的元素
4.影响
C.改
splice(起始下标，删除长度,新增元素...)
a.在数组上的任意位置新增，删除，修改数组
b.第一个参数：表示哪个下标位置开始；
  第二个参数：表示删除几个元素；
  第三个参数：新增数组元素
c.返回值为删除的元素数组；
d.不影响
D.截
slice(start,end)
a.截取数组中指定元素
b.第一个参数：表示从哪里开始（包含开始位置）；
  第二个参数：表示到哪里结束（不包含结束位置）；
c.返回值为截取到元素数组
d.不影响
F.拼
concat(新元素)
a.将参数拼接到数组末尾，产生新的数组
b.参数不限
c.返回值为拼接后的新数组
d.不影响
复制数组可以用concat();
var arr = [2,3,4,5,6];
var list = arr.concat();
E.复
a.slice()
b.concat()
var arr = [3,4,5,6,7]
var list = arr.slice();
console.log(list);
c.var arr = [2,3,4,6,]
  for(var i = 0;i < arr.length.i++){
list[i] = arr[i];
  }
G.排
reverse();a.将数组元素逆序,b.返回值为逆序后的数组；
sort();a.按编码排序，b.返回值为排序后的数组;
c.无参数
d.影响
sort(function(a,b){return a-b})
如果返回a - b,则从小到大排序
如果返回b - a,则从大到小排序
H.转
toString()
a.将数组转为字符串
b.没参数
c.返回值为转换后的字符串
d.不影响
join()
a.将数组转为带有指定分隔符字符串
b.参数：就是分隔符
c.返回值为转换后的字符串
d.不影响

10.for-in循环?
作用：用于遍历数组或者对象；
var obj = {name:"张三",age:18;adree:"北京"}
for(var i in obj){
console(i + ":" + obj[i]);
}
11.数组的排序（冒泡、选择）？
冒泡:
a. var arr = [55,66,99,88,77,44];
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;
}
}
}
console.log(arr);
b. var arr = [66,55,33,44,77,88];
for(var i = 1;i < arr.length;i++){
for(var j = arr.length - 1;j >= i;j --){
if(arr[j] < arr[j - 1]){
var t = arr[j];
arr[j] = arr[j - 1];
arr[j - 1] = t;
}
}
}
console.log(arr);
封装函数:
var arr = [66,55,33,44,77,88];
function Bub(arr){
for(var i = 1;i < arr.length;i++){
for(var j = arr.length - 1;j >= i;j --){
if(arr[j] < arr[j - 1]){
var t = arr[j];
arr[j] = arr[j - 1];
arr[j - 1] = t;
}
}
return arr;
}
}
consoloe.log(Bub(arr));
c.选择（从小到大）
var arr = [22,99,88,66,77,11]
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;
}
}
}
console.log(arr);
12堆和栈？
要点：堆，队列优先；栈，先进后出；
二 day02 ES5\string
1.严格模式？
"use strict"
2.ES5新增数组操作方法？
a.indexOf(查找元素,从哪里开始查找)
  查找指定元素在数组中首次出现的下标位置，如果没有，查找到该元素，则返回-1；
  lastIndexOf():查找指定字符在字符串中最后一次出现的下标位置，如果字符串中没有，则返回-1;
b.forEach:遍历数组
//求和
var sum = 0;
arr.forEach(function(item,index,array){
return sum += item;
})；
c.map()：映射
var arr = [1,2,6,];
arr.map(function(item,index,array){
return item + 2;
})
console.log(arr)//3.4.8
d.reduce():归并
//求和
var arr = [1,2,3,4];
arr.reduce(function(pre,next,index,array){
return pre + next;
})
console.log(arr);
e.filter()
var arr = [2,3,4,5,6];
arr.filter(function(item,index,array){
return !(item % 2)
})
console.log(arr);
3.字符串的两种创建方式？方法？属性？
a.字面量方式
var str = "明天会更好！"
b.构造函数方式
var str = new String("hoa are you do you do")
属性:length
方法：查、替、截、转
查
charAt():返回指定下标的字符
charCodeAt():返回指定下标位置的编码值
indexOf("查找的字符"，开始下标):查找指定在字符串中首次出现的下标位置，如果字符串没有找到，返回-1
lastIndexOf:查找指定在字符串中最后一次出现下标位置，如果字符串没有找到，返回-1
举例：
var str = "明天会更好！";
var newstr = new Str("how are you");
console.log(str.indexOf(2));
newstr.indexOf(2);
console.log(newstr);
//遍历字符串
for(var i = 0;i < str.length;i++){
console.log(str.charAt(i));
}
替
replace(odd,new):将字符串中指定的字符串换成新的字符串，一次只能换一个.
截
从父串中截取一段字符串出来
substring(start,end):参数大小随意(不包含结束位置)
slice(start,end):参数大小随意，支持负数(不包含结束位置)
substr(start,length):从指定位置开始截取指定长度的字符串(包含结束位置)
转
toUpperCase():小写转大写
toLowerCase():大写转小写
split("切割符"，length):将字符串转为数组

三 day03 Mtah\Date
1.Math(内置对象)
a.属性？
math.PI():圆周率
b.方法？
1).绝对值
math.abs();
2).求近似值
math.round():四舍五入(如果是负数>0.5时进一,<=0.5舍去)
math.floor():向下取整
math.ceil():向上取整
3).求最值
math.Max():最大值
math.Min():最小值
math.Max.apply(null,数组名):求数组中最大的值
math.Min.apply(null,数组名):求数组中最小的值
4).随机数
math.random():0-1之间的随机数(可以去0.但取不到1)
math.floor(math.random() * 最大值 + 1):1-n的随机数;
math.floor(math.random() * (max - min + 1)) + min;
5).求x的y次方
Math.pow(x,y)
6).求n的开方
Math.sqrt(n)
2.Date
a.如何创建日期对象?
var date = new Date()
b.方法?
getYear():2000年前返回的是年份中后两位数
  2000年及2000后，返回是当前年份-1900年。
getFullYear():获取年份;
getMonth():获取月份;
getDate():获取日
getDay:获取星期
getHours():获取小时
getMinutes:获取分
getSeconds:获取秒
getMilliseconds:获取毫秒
getTime:获取时间戳
时间戳:从1970年1月1日0时整到指定日期时间的毫秒数
扩展:
setFullYear():设置年份
setMonth():设置月份
setDate():设置日期
setHours():设置小时
setMinutes():设置分
setSeconds():设置秒

toLocaleString():返回本地格式Date字符串
toLocaleTimeString()：返回时间字符串
toLocaleDatestring():返回日期字符串
四 day04 BOM和DOM(上)
1.for-in循环?
作用:用于遍历数组或者对象;
2.confirm();
如果用户点击确定按钮，则confirm返回ture,点击取消按钮,则confirm返回false。
3.BOM？（游览器对象模型）
window:documnet、frames、history、location、navigator、screen
1).Location
window.location = "http://www.baidu.com";
window.href = "http://www.baidu.com";
4.定时器和计时器？
1)计时器：每间隔一段时间执行一次表达式.
setInterval(表达式[回调函数],毫秒数);
clearInterval():取消由setInterval设置计时
2)定时器：设定的毫秒数到达时间时，只执行一次表达式.
setTimeout(表达式[回调函数],毫秒数)
clearTimeout():取消由setTimeout()设置的定时.
5.window.onscroll事件？
a.documnet.documentElement.scrollTop:垂直滚动条，向下滚动的距离
b.document.body.scrollTop//chrome:垂直滚动条，向下滚动的距离
c.兼容写法:
document.documentElement.scrollTop || documnet.body.scrollTop;


6.DOM？
a.作用?
通过javascript操作DOM,可以重构整个HTML文档，添加，移除，改变页面上的项目.
b.DOM基本操作(查询、修改、创建、删除)
查询
document.getElementById("id名")：通过id名查找对象；
document.getElementsByTageName("标签名")：通过标签名查找对象；
document.getElementsByName("name属性值")：通过name属性值获取对象列表；
document.getElementsClassName("class属性值")：通过class属性值查找对象列表；
document.documentElement:获取html对象
document.body:获取body对象
querySelector:通过选择器获取一个元素，返回一个对象
querySelectorAll:通过选择器获取一组元素，返回一个集合
修改
父节点.replacechild(newnode,oldnode):方法用新的节点替换某个节点
创建
createElement():创建一个元素节点
createTextNode():创建一个文本节点
删除
父节点.removechild(nodechild):删除节点
追加节点
appendchild():向指定的子节点列表追加新的节点
克隆
对象.cloneNode():克隆指定节点
对象.cloneNode(true):克隆指定节点及其所有子节点
7.DOM元素和文本
a.node节点属性
节点可以分为元素节点、属性节点、文本节点。这些节点有三个属性:nodeName、nodeType、nodeValue
b.节点类型:元素1、属性2、文本3
节点类型 nodeNamenodeType nodeValue
元素 元素名称1    null
属性 属性名称2 属性值
文本 #text3 文本内容
五 day05 DOM（下）
1.自定义属性及getAttribute方法?
a.自定义属性:由程序员自己给标签添加的属性
b.getAttribute():获取特定元素节点属性的值(自己设定的属性)
c.setAttribute("属性名","属性值"):修改或添加元素节点属性
d.romoveAttribute("属性名"):移除特定节点属性
2.outerHTML/innerText
a.outerHTML:获取对象及其内容的HTML形式（了解）
b.innerText:获取位于对象起始和结束标签的文本（不包含HTML）
c.innerHTML：获取位于对象起始和结束标签的文本（包含HTML）
3.childNodes/过滤空白节点
childNodes属性：获取到指定节点中的所有子节点
返回元素节点和文本节点两种
4.匹配空白节点使用正则?
/^\s+$/.test(子节点.nodeValue)
5.忽略空白文本节点?
var oUl = document.getElementById("ull");
var childs = oUl.childNodes;//获取所有节点
function nospace(nodes){
var  arr = [];
//遍历节点
for(var i = 0;i < nodes.length;i++){
//找出空白文本
if(nodes[i].nodeType == 3 && /^\s+$/.test.(node[i].nodeValue){
continue;
}else{
arr.push(nodes[i]);//将非空白节点添加到数组中
}
}
return arr;
}
childs = nospace(childs);
console.log(childs);
6.删除空白文本节点?
function removespace(node){
var nodes = node.childNodes；
for(var i = 0;i < node.length;i++){
//找出空白文本
if(node[i].nodeType == 3 && /^\s+$\.test(node[i].nodeValue){
node[i].parentNode.removechild(node[i]);
}
}
return node;
}
removespace(oUl);
console.log(oUl.firstchild.nodeName);
7.高级选取?
层次几点属性:节点的层次结构划分为：父节点与子节点、兄弟节点两种。
a.firstchild:用于获取当前元素节点的第一个子节点，相当于childNodes[0]
b.lastchild:用于获取当前元素的最后一个节点，相当于childNodes[box.childNodes.length - 1]
c.parentNode:用于返回该节点的父节点
d.previousSibling.返回该节点的前一个同级节点
e.nextsibling:返回该节点的后一个同级节点
f.children：只获取元素子节点
g.attributes:获取属性节点
h.createTextNode:创建文本节点
i.父节点.insertBefore(newNode,exsitNode);
8.offsetWidth/offsetHeight/offsetLeft/offsetTop?
a.offsetWidth指obj对象的宽度，整型，单位像素
offsetWidth = width + padding + border
b.offsetHeight值obj对象的高度，整型，单位像素
offsetHeight = height + padding + border
c.offsetLeft指obj距离左方或上层位置，整型，单位像素
d.offsetTop指obj距离上方或上层位置，整型，单位像素
9.获取非行内样式兼容问题?
function getstyle(obj,attr){
return obj.currentstyle ? obj.currentstyle[attr] : obj.getComputedstyle(obj.false)[attr];
}
10.获取class属性值兼容？
alert(oDiv.getAttribute("class") == null ? oDiv.getAttribute("className") : oDiv.getAttribute("class"));