之前总结到JavaScript事件的绑定，下面进行后面知识点的总结，并且穿插几个案例。
一、JS事件的委托
首先要鲜明白一个问题，为什么JS里对集合的操作只能是用方括号【】进行单个操作？
原因是JS不能隐式迭代，也就是不能一次操作一堆，只能进行单个操作。所以再JS里对集合的操作是要加上集合元素索引的，用来进行对集合元素的操作。例如：
var btn=document.getElementsByClassName(“btn”)[0];
这里的【0】就代表这个类集合的第0个元素。
好的，接下来就说一下事件的委托。顾名思义，事件的委托就是一个元素将事件委托给另一个元素，也就是说父元素可以将事件委托给子元素来执行。这就是事件的委托。例如：
var ele_ul=document.getElementsByTagName(“ul”)[0];
ele_ul.οnclick=function (e){
var target=e.target|| e.srcElement;
if(target.nodeName.toLowerCase()===“li”)
{
console.log(“执行代码”);
}
}
在这个代码里，父元素ul将自己的点击事件委托给了自己的子元素li来执行。
在这里还有一个知识点就是，在事件里面的this表示的是当前dom元素对象。
二、DOM元素的操作
DOM元素的操作有五种：
* dom元素获取
* dom元素事件绑定
* dom元素节点操作
* dom元素属性操作
* 动态创建dom元素
DOM元素获取和事件绑定之前已经总结过，所以就从元素节点操作开始。
在DOM中，每一个节点都是一个对象。
1、过滤出某一个节点：
var ale = document.getElementsByTagName(“ul”)[0];
for(var i=0;i<ale.childNodes.length;i++)
{
if(ale.childNodes[i].nodeType==1)//过滤出节点type 1
{
console.log(ale.childNodes[i]);
}
}
2、节点属性：
DOM 节点有三个重要的属性，分别是：
nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型
childNodes：子节点（集合类型）
childNodes[0].nodeValue：当前子节点的节点值
在父节点里面找某一个子节点：
.childNodes[2].nextSibling：下一个节点同胞元素
.childNodes[2].previousSibling：上一个节点同胞元素
.childNodes[2].nextElementSibling：下一个同胞元素
.childNodes[2].previousElementSibling：上一个同胞元素
.childNodes[2].parentElement：获取当前节点的父元素
.children：获取当前元素的子元素
.children[0]：获取当前元素的第0个子元素
.firstChild：获取的是第一个节点
.lastChild：获取的是最后一个节点
.firstElementChild：获取的是第一个元素
.lastElementChild：获取的是最后一个元素
.childElementCount：获取当前子元素的个数
3、动态创建DOM元素
var div = document.createElement(“div”);//创建的dom
div.className = “block”;
//添加样式
//js操作的样式全是行内样式
// div.style=“width:100px;height:200px; background-color:red; border:1px solid green;”;
// div.style.border=“1px solid blue”;
//怎么操作内嵌样式
document.body.appendChild(div);
//等dom元素添加之后再去获取
console.log(window.getComputedStyle(div).width);//内嵌样式的获取方式
var btn=document.querySelector("#btn");
btn.className=“btnlist”;//类名称操作
btn.style.width=“200px”;
btn.style.border=“2px solid red”;
btn.style.margin=“10px”;
console.log(btn.offsetLeft);//offsetLeft 左偏移量
console.log(btn.offsetTop);//offsetTop 上偏移量
console.log(btn.offsetHeight);//offsetTop 上偏移量
console.log(btn.offsetWidth);//offsetTop 上偏移量
console.log(btn.offsetParent);//返回偏移容器 父容器
//给dom元素设置自定义属性
btn.setAttribute(“data-index”,0);
//获取自定义属性
console.log(btn.getAttribute(“data-index”));
//获取或设置元素html文本
btn.innerHTML
//获取或设置元素的文本
btn.innerText
三、数据类型转换
1、强制转换
parseInt(str)：强制转换为整型
parseFloat(str)：强制转换为浮点型
2、将字符串转换为数组
var s1=“abcdefa”;
//以什么符号分割
var a=s1.split("");
3、将数组转化为字符串
var a=s1.split("");
console.log(a.toString());
console.log(a.join(""));
4、查找字符
console.log(s1.indexOf(‘a’,0));//返回值是找到字符返回对应的索引位
console.log(s1.indexOf(‘a’,1));//查找字符 找不到返回-1
console.log(s1.indexOf(‘f’));//检测是否有字符 有返回索引没有返回-1
console.log(s1.lastIndexOf(‘a’, 1));
console.log(s1.search(‘d’));//查找字符返回当前索引位
5、字符串截断
//起始索引 长度
console.log(s1.substr(1, 2));
console.log(s1);
//起始索引 终止索引
console.log(s1.substring(1, 4));//截取的字符串
console.log(s1);
console.log(s1.slice(1,4));
console.log(s1);
6、字符的替换
console.log(s1.replace(‘a’, “m”));
console.log(s1);
7、字符串的拼接
var k=“jkliu”;
var h=“dsadsa”;
console.log(s1.concat(k,h));
console.log(s1.concat(k).concat(h));
8、根据索引取字符
console.log(s1.charAt(0));
//返回字符串的长度
console.log(s1.length);
9、如何遍历字符串
for(var i=0;i<s1.length;i++)
{
console.log(s1.charAt(i));
}
//遍历 for in
for(var index in s1)
{
console.log(s1.charAt(index));
}
四、数组对象
数组对象的作用是：使用单独的变量名来存储一系列的值。
数组关键字 Array；
数组的赋值：
var mycars = new Array();
mycars[0] = “Saab”;
mycars[1] = “Volvo”;
mycars[2] = “BMW”;
数组的取值：
console.log(arr);
数组里面的属性 ：length，代表数组的长度
console.log(array.length);
数组里面方法
var a=[1,2,3];
var b=[4,5,6];
var c=[7,8,9];
1、concat 拼接数组
var m=a.concat(b,c);
console.log(m);
2、every 检测数组里面所有元素是否符合条件 true false
var boo=m.every(function (val, index) {
return val>0;
});
console.log(boo);
3、fill 固定值替换 不写后两个参数 全替换 原数组受影响
var k=m.fill(“room”,0,1);
console.log(k);
4、filter 过滤方法 过滤出满足条件的元素
var fil=m.filter(function (val,index,arr){
if(val>8)
{
return val;
}
});
console.log(fil);
5、find 找数组满足条件的返回第一个值
var mm=m.find(function (val,index,arr){
return val>6;
});
console.log(mm);
6、forEach 数组遍历方法 相当代替for遍历数组 无返回值
m.forEach(function (val,index,arr){
});
7、map 映射 产生新数组 不写返回值 类似遍历数组
var k1=[1,2,3,4];
var newarr=k1.map(function (val,index,arr){
return val*2;
});
console.log(newarr);
8、reduce 累计器
var all=k1.reduce(function (val1,val2){
console.log(val1,val2);
return val1*val2;
});
console.log(all);
9、reserve 倒序
console.log(k1.reverse());
10、some 判断
var isboo=k1.some(function (val,index,arr){
if(val%5==0)
{
return val;
}
});
console.log(isboo);
11、排序
var o=[9,1,4,2,5,3,7,6,8];
console.log(o.sort());//默认小-大
o.sort(function (n1,n2){
return n2-n1;
});
console.log(o);
*剩下方法都是一对对应的
var h=[1,2,3];
12、push 后追加 unshift 前追加
h.push(4);
h.unshift(0);
13、两个删除 pop 后删除 shift 前删除
h.pop();
h.shift();
14、数组截断 slice splice
console.log(h.slice(0, 2));//返回值为截取的值
console.log(h.splice(0, 2));//返回也是截取的值 原数组受影响
五、排序算法
这里介绍四种常用的排序算法；
1、冒泡排序
将元素两个两个进行对比，将大的或者小的向规定的方向放，第一轮就会找出最大或者最小的，然后放到了规定的方向，第二轮开始寻找第二大或者第二小的，以此类推，最终完成排序操作。
var arr = [9, 1, 4, 3, 5, 2, 7, 8, 6, 6];
console.time();
console.log(mao_sort(arr));
console.timeEnd();
function mao_sort(num) {
if (num.length <= 1) {
return;
}
var temp = null;
for (var i = 0; i < num.length; i++) {
for (var k = 0; k < num.length - i - 1; k++) {
if (num[k] < num[k + 1]) {
temp = num[k];
num[k] = num[k + 1];
num[k + 1] = temp;
}
}
}
return num;
}
2、快速排序（递归）
将一组数中寻找一个基准数并以此分开成两段，分区过程，将比这个数大的数全放到它的右边，小于或等于它的数全放到它的左边。再对左右区间重复第二步，直到各区间只有一个数。
function quicksort(num) {
if (num.length <= 1) {
return num;
}
//中间索引
var centerindex = parseInt(num.length / 2);
var centernum=num.splice(centerindex,1);
var left=[];
var right=[];
for(var i=0;i<num.length;i++)
{
if(num[i]>centernum)
{
//左边
left.push(num[i]);
}else{
//右边
right.push(num[i]);
}
}
return quicksort(left).concat(centernum).concat(quicksort(right));
}
3、选择排序
每一次从待排序的数据元素中选出最小（或最大）的一个元素，存放在序列的起始位置，再从剩余未排序元素中继续寻找最小（大）元素，然后放到刚才已排序序列的后面。以此类推，直到全部待排序的数据元素排完。
function selectSort(num) {
if (num.length <= 1) {
return;
}
for (var i = 0; i < num.length; i++) {
//记录初始值
var temp = i;
var t = null;
for (var k = i; k < num.length; k++) {
if (num[k] < num[temp]) {
temp = k;
}
}
//交换位置
t = num[temp];
num[temp] = num[i];
num[i] = t;
}
return num;
}
4、插入排序
类似于扑克牌的排序整理，从第2个数开始，和前面的一个数比较，如果比它小，交换两个数，然后再与前面一个数比较，类推。。。直到当前数比它之前的数更大时或者当前数已经是第一个数时，停止循环，接着对下一个数进行插入操作，重复上述过程，直到对最后一个数进行完了插入操作，排序完成。
function insertSort(num) {
if (num.length <= 1) {
return;
}
//设置一个初始值
var temp = num[0];//9 1 4
for (var i = 1; i < num.length; i++) {
var temp = num[i];//4
for (k = i - 1; k >= 0; k–) {
if (temp > num[k]) {
num[k + 1] = num[k];
} else {
break;
}
}
num[k + 1] = temp;
}
for (var i = 1; i < num.length; i++) {
//拿一个 跟前面的所有比对 交换位置
var nowdata = num[i];//4
var before = i - 1;//前面的索引 1
while (nowdata > num[before] && before >= 0) {
num[before + 1] = num[before];//9143
before–;
}
num[before + 1] = nowdata;
}
return num;
}
六、总结
这周其实还做了放大镜、图片瀑布流、选项卡等小项目，在这里就不展示了。总的来说知识点还是很多，需要记忆理解以及运用，多练习才会体会到代码的巧妙之处。
