0107作业

1. 实例演示事件代理的实现机制

答：事件代理有叫事件委托，根据事件冒泡的特点，触发子元素的事件，父元素的同名事件也会被触发，所以我们一般把元素的事件交给它的父元素的同名事件取出来的。
demo:

<lu>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</lu>

源代码：

document.querySelector('ul').addEventlistener(
'click',
ev=>{
console.log(ev.currentTarget);//事件的绑定者
console.log(ev.target);//事件的触发者
console.log(ev.target.innerHTML);
}
)

2. 完成留言板,添加留言删除功能

源码：

document.write();
let  divs=document.createElement('div');
document.appendChild(divs);
let   input=document.createElement('input');
input.setAttribute('type','text');
input.setAttribute('name','liuyan');
input.style.width="300px";
input.style.height="30px";
document.querySelector('div').appendChild(input);
let  ul=document.createElement('ul');
document.querySelector('div').appendChild(ul);
let  info=document.querySelector('input');
info.onkeydown=ev=>{   
if(ev.key=='Enter'){ 
if(ev.currentTarget.value.length===0) {    
alert('不能为空') ;
}else{     
let   liuy=document.createElement('li');
liuy.innerHTML=ev.currentTarget.value+"<em>删除<em>";
liuy.querySelector('em').onclick=function (ev){ 
document.querySelector('ul').removeChild(ev.target.parentNode);  
}         
document.querySelector('ul').appendChild(liuy)  
 }   
}  
}

直接在控制台运行

3. 自选不少于10个字符串方法进行练习

答：

console.log('字符窜方法练习：');
let  str="hello";
str=str.concat('world','字符窜开始操作')
console.log('%cconcat()连接字符窜');
console.log('%cconcat()连接字符窜');
console.log('%cconcat()连接字符窜','color:red');
console.log('%c-----------------------------------------------','color:cyan');
-----------------------------------------------
console.log('%c取子串slice','color:blue');
let  str1="mamashuojiusuannideyumingzaichangbaiduyenengsousuochulai";
str1.slice(0,3)
"mam"
str1.slice(5,3)
""
str1.slice(-1,-1)
""
str1.slice(0,-1)
"mamashuojiusuannideyumingzaichangbaiduyenengsousuochula"
str1.slice(-10)
"usuochulai"
console.log('slice(start,end)注意不包含end位置');
console.log('substr(start,lenght)','color:#fff')
console.log('substr(start,lenght)')
console.log('%csubstr(start,lenght)','color:#fff')
str1.substr(0,10);
str1.substr(10,10);
str1.substr(20);
"umingzaichangbaiduyenengsousuochulai"
str1.substr(-1);
console.log('trim()删除字符窜首位空格');
let  str2="     php       ";
console.log('---',str2,'---')
console.log('---',trim(str2),'---')
console.log('---',trim.str2,'---')
console.log('---',str2.trim(),'---')
let  str3="php";
console.log('---',str3,'---');
console.log('%c-----------------------------------------------','color:cyan');
-----------------------------------------------
console.log('split(para)para分隔符');
split(para)para分隔符 debugger eval code:1:9
let  str4="php|.com"
str4.split('|')
Array [ "php", ".com" ]
str4.split('@')
Array [ "php|.com" ]
str4.split('')
Array(8) [ "p", "h", "p", "|", ".", "c", "o", "m" ]
str4.split()
Array [ "php|.com" ]

---

console.log('计算字符串长度：')
let  str1=""abcdefg;
console.log(str1.length)
console.log('字符串大小写转化：')
str1.toUpperCase()
"MAMASHUOJIUSUANNIDEYUMINGZAICHANGBAIDUYENENGSOUSUOCHULAI"
str1.toUpperCase().toLocaleLowerCase()
"mamashuojiusuannideyumingzaichangbaiduyenengsousuochulai"
console.log('获取单个字符串：')
str1.charAt(0)
str1.charAt(1)
console.log('查找子串')
str1.indexOf('mamashuo')
str1.indexOf('shuo')
str1.indexOf('Xshuo')
str1.indexOf('shuo',10)
str1.indexOf('shuo',1)
debugger eval code:1:1
str1.lastIndexOf('shuo')
let str5="php@php"
str5.lastIndexOf('php')
str5.indexOf('php')

4. 预习常用的数组方法

答：

console.log('数组练习：')
console.log('slice(start,end):截取数组元素')
let  slicarr=[1,2,3,4,5,6,7]
slicarr.slice(0,2)
slicarr.slice(1,2)
console.log('join数组转化成字符串“”')
let arr=new    Array('www','baidu','com')
let  str=arr.join()
str=arr.join('')
console.log('数组排序函数：sort')
let  ar=[10,2,3]
ar.sort()
Array(3) [ 10, 2, 3 ]
function  numcomper(a,b){   return   a-b;}
ar.sort(numcomper);
console.log('堆栈方法：')
let  arr=new   Array();
arr.push(9);//返回值是1
arr.push(1,2,3);//返回值是arr的长度
arr.pop();//弹出最后一个元素
//再说不操作数组
let  arr1=[];
arr1.unshift(1)//返回1
arr1.unshift(1，10)//返回2
arr1.shift()//返回10
//数组组合
console.log([1,2,3].concat([4,5],6,7,8,9));
//数组截取：
console.log([1,4,7,2,5,8,3,6,9].slice(1));
//数组元素的删除：splice(start,lenght：删除长度,text:删除后插入的数据)返回别删除的吧元素
arrx=[1,2,3,4,5]
arrx.splice(2,2,'------')//返回删除的数据(数组形式的)
arrx//[1,2,'------',5]
//新增数据
arrx.splice(1，0，...[8,9,10])
//遍历：
//forEach
//array.forEach(function(currentValue, index, arr),    thisValue)
// currentValue    必需。当前元素  index    可选。当前元素的索引值。arr    可选。当前元素所属的数组对象。thisValue    可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值
//返回值:    undefined
let  arra=[1,2,3,4,5,6,7,8,9];
arra.forEach(item=>console.log(item))//没有返回值
//array.map(function(currentValue,index,arr), thisValue)
//currentValue    必须。当前元素的值
//index    可选。当前元素的索引值
//arr    可选。当前元素属于的数组对象
//在一个对象上操作时给thisValue传递this代表该对象
返回值：    返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
rs=arra.map(item=>item*2)//没有返回值
//过滤
//array.filter(function(currentValue,index,arr), thisValue)
//currentValue,index,arr,thisValue同上
//返回值：    返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
let  arra11=[1,2,3,4,5,6,7,8,9];
res=arra11.filter(item=>item%2);
//归内方法
//reduce(callback(pre,curr),start)
let  arra2=[1,2,3,4];
rs=arra2.reduce((pre,curr)=>pre+curr)