第一天
1.作用域: 全局作用域:作用在全局,页面每个位置都能使用
局部作用域:只能在函数调用时内部可用
特别:局部可以使用全局的,全局不能使用局部的
全局污染: 在函数内部对未声明的变量直接赋值,会造成全局污染,降低页面性能。
函数基础: 创建/声明/定义 两种方式: 1、直接量方式
function 函数名(形参){
操作;
}
2、构造函数方式
var 函数名=function(形参){
操作;
}
数组基础: 1、创建 两种方式: 1.直接量方式
var arr=[];
2、构造函数方式
var arr=new Array();
函数的唯一属性: length
获取数据:
arr[i];
设置:
arr[i]="";
遍历:
for(i=0;i<arr.length;i++){
console.log(arr[i]);
}
固定套路: 1.插入元素
arr[arr.length]="";
2.获取倒数第n个元素
arr[arr.length-n];
3.缩容
arr.length-=n;
length=最大下标+1;
最大下标=length-1
函数的三大不限制:
1.不限制长度
2.不限制数据类型
3.不限制下标越界(缺点):下标越界,会得到undefined,如果遍历会得到稀疏数组。
第二天:
DOM(Document Object Model) 文档对象模型
把页面看作一个倒挂的树状模型,以document为树根
查找元素
直接查找:
1.通过ID查找
elem=document.getElementById("id");
特殊:其实标签名不需要查找,可以直接使用 2.通过标签名查找
elem=document.getElementsByTagName("标签名");
特殊:1.得到的是一个集合,JS只能操作元素,不能直接操作集合,要么通过下标拿到某个元素,要么遍历得到所有元素,没找到会返回一个空集合。
2.不一定非要从document开始找,也可以从某个找到的父元素开始找。
3.通过class名查找
elem=document.getElementsByClassName("class名");
通过关系查找元素:
父亲:elem.parentNode;
儿子:elem.children;
第一个儿子:elem.firstElementChild;
最后一个儿子:elem.lastElementChild;
前一个兄弟:elem.previousElementSibling;
后一个兄弟:elem.nextElementSibling;
内容:
elem.innerHTML; //可以识别标签
elem.innerText; //智能识别纯文本
设置:
elem.innerHTML=""
elem.innerText=""
单标签:
获取:input.value
设置:input.value="属性值"
属性
elem.getAttribute("");
elem.setAttribute("")
简化版:elem.属性名
elem.属性名="属性值"
特殊:简化版只能操作标准属性,不能操作自定义属性
样式:
获取:elem.style.css属性名
设置:elem.style.css属性名="属性值"
background-color => backgroundColor
border-radius => borderRadius
绑定事件:
elem.on事件名=function(){
this这个->单个:当前元素
->多个:当前触发元素
}
第三天:
按值传递
var a=x,
b=a;
如果是原始类型 a变了,b不会变。
如果是引用类型,a变了,b会变,只是保存了一个地址值,浅拷贝。
hash数组
可以自定义下标的数组
创建:
var arr=[];
arr["自定义下标"]="新值";
访问:
arr["自定义下标"];
遍历:
for(var i in arr){
arr[i];
}
数组的API 1.数组转字符串
arr.join("自定义连接符");
该API可以做数据渲染
var arr=[];
var str="<option>"+arr.join("</option><option>")+"/option";
sel.innerHTML=str;
2.拼接
var newArr=arr.concat("");
3.截取
var subArr=arr.slice(starti,endi+1) //含头不含尾,可以写负数参数。
4.删插替
删除:
var subArr=arr.splice(starti,n); //直接修改原数组,也有返回值,返回的是被删除的子数组。
插入:
var subArr=arr.splice(starti,0,新值1...);
替换:
var subArr=arr.splice(starti,0,替换);
//删除和插入的个数不必相同
5.翻转
arr.reverse();
二级联动
1.select专属事件 elem.onchange=function(){};
2.select专属属性 selectedIndex();
3.必须使用二维数组
第四天:
数组的API:
1.数组排序
冒泡排序:
arr = [16, 36, 35, 48, 464, 36, 45, 2, 46, 3];
for (var j = 1; j < arr.length; j++) {
for (var i = 0, tmp = 0; i < arr.length - j; i++) {
if (arr[i] > arr[i + 1]) {
tmp = arr[i];
arr[i] = arr[i + 1];
arr[i + 1] = tmp;
}
}
}
console.log(arr);
数组排序:
arr.sort()
只能比较10以内的数组,因为是按照每个下标值的ascii码排序
arr.sort(function(a,b){return a-b升序});
//a后一个
//b前一个
return b-a降序
栈和队列:
栈:
开头进:arr.unshift(新值,...);
开头出:var first=arr.shift();
尾部进:arr.push(新值,...);
尾部出:var last=arr.pop();
队列:
从头进:arr.unshift(新值,...);
尾部出:var last=arr.pop();
尾部进:arr.push(新值,...);
尾部出:var last=arr.pop();
ES5新增:
判断:
1.判断every类似&&
var bool=arr.every(function(val,i,arr){
return判断条件;
})
2.判断some类似||
var bool=arr.some(function(val,i,arr){
return判断条件;
})
遍历:
forEach
arr.forEach(function(val,i,arr){
操作;
})
map
var newArr=arr.map(function(val,i,arr){})
过滤
var subArr=arr.filter(function(val,i,arr){})
汇总
var subArr=arr.reduce(function(prev,val,i,arr){})