07-12 作业

代码区
— 作用域和闭包

<script>
let staff={
id:1,
  name:"朱老师",
  age:20,
  setAge(age){
      if(age >=18 && age <60 ){
          return (this.age=age);
      }
      console.log("年龄:(18-60)之间");
  }, };
console.log(‘age=’,staff.age);
console.log(‘name’,staff.name);
staff.setAge(65);
let staff={
data:{id:1,name:”朱老师”,age:20,},
setAge(age){if(age>=18 && age <60){
return (this.data.age=age);
}
console.log(“年龄:(18-60)之间”);
},
};
console.log(staff.data.age);
staff.setAge(40);
console.log(staff.data.age);
访问属性
1.读属性
2.写属性
let staff={
data:{id:1,name:”朱老师”,age:20},
//读取的”访问起属性”
get age(){
console.log(“aaa”);
return this.data.age;
},
set age(age){if(age >=18 && age<60){
return(this.data.age=age);
}
console.log(“年龄:(19-60)之间”);
}
};
console.log(staff.age);
staff.age=81;
console.log(“age=”,staff.age);
块作用域
if(true){
var a =10;
let a=15;
console.log(“a”,a);
}
console.log(“a=”,a);
function demo1(a){
let b=20;
console.log(“a=%d,b=%d”, a , b);
}
demo1(10);
console.log(15,31);
function parent(){
let m =500;
return function (a){
let b=2;
console.log(a,b,m);
};
}
let f =parent();
console.log(f);
f(4);
console.log(parent());
parent(4);
//push推动 从尾部添加字母
let arr=[];
console.log(arr.push(“a”));
console.log(arr);
console.log(arr.push(“b”,”c”,”d”));
console.log(arr);
 //pop(无参数)  从尾部删除
   console.log(arr.pop());
   console.log (arr);
   unshift从头部添加
   console.log(arr.unshift(1,2,3));
   console.log(arr);
   console.log (arr.shift());
   console.log(arr);
    arr=["html" ,"css","js"];
    let res=arr.join();
    console.log(arr);
    res=arr.join("---");
    console.log(res);
  les= arr.join("</li><li>");
    console.log(les);
  console.log('<ul><li>$<res></ul></li>');
  //document.body.insertAdiacentHTML("beforeend",html);
  //cancat():
  console.log("hello".concat("php.cn"));
  console.log(["hello"].concat(["php.cn"]));
   //splice()实现数组的增删改查的操作
   arr=[1,2,3,4,5];
   res =arr.splice(3,1);
   console.log(res);
   //res=arr.splice(2,0,"html","css");
   res=arr.splice(3,0, ...["php","js"]);
   console.log(res);
   console.log(arr);
   //更新操作，即删除又新增
   res=arr.splice(2,1,"javascript");
   console.log(res);
   console.log(arr);
   //forEach() 对数组中的每一个成员使用一个回调方法进行处理
const items = document.querySelectorAll("li");
  items.forEach(function(item){
     item.style.color="red";
   })
   document.querySelectorAll("li").forEach(xxx=>(xxx.style.color="red"));
//filter()对数组中的每个使用回调方法进行处理，只返回数据为true的元素
arr=[1,2,3,4,5,6,7,8];
res=arr.filter(a=>!(a%2));
console.log(res);
reduce();归并操作，将数组中的所有元素指定的回调处理一个单一结果返回
arr=[1,2,3,4,5];
res=arr.reduce(function(prev,curr){
console.log(prev,curr);
return prev+curr;
});
res=arr.reduce((prve,curr)=>prve+curr);
console.log(res);
arr=[5,6,7,8,9,12,13,14,15];
res=arr.reduce(function(prev,curr){
console.log(prev,curr);
return prev+curr;
});
res=arr.reduce((prve,curr)=>prve+curr);
console.log(res);
user={
1:1,
2:"name",
3:"admin@php.cn",
length:3,
}
for(let item of Array.from(user)){
console.log(item);
}
/* let staff={
id:1,
name:”朱老师”,
age:20,
setAge(age){
if(age >=18 && age <60 ){
return (this.age=age);
}
console.log(“年龄:(18-60)之间”);
},
};
console.log(‘age=’,staff.age);
console.log(‘name’,staff.name);
staff.setAge(65);
let staff={
data:{id:1,name:”朱老师”,age:20,},
setAge(age){if(age>=18 && age <60){
return (this.data.age=age);
}
console.log(“年龄:(18-60)之间”);
},
};
console.log(staff.data.age);
staff.setAge(40);
console.log(staff.data.age);
/*
访问属性
1.读属性
2.写属性
*/
let staff={
data:{id:1,name:”朱老师”,age:20},
//读取的”访问起属性”
get age(){
//console.log(“aaa”);
return this.data.age;
},
set age(age){if(age >=18 && age<60){
return(this.data.age=age);
}
console.log(“年龄:(19-60)之间”);
}
};
console.log(staff.age);
staff.age=81;
console.log(“age=”,staff.age);
//块作用域
if(true){
var a =10;
let a=15;
console.log(“a”,a);
}
console.log(“a=”,a);
function demo1(a){
let b=20;
console.log(“a=%d,b=%d”, a , b);
}
demo1(10);
console.log(15,31);
function parent(){
let m =500;
return function (a){
let b=2;
console.log(a,b,m);
};
}/
/let f =parent();
console.log(f);
f(4);
const items= document.querySelectorAll(‘.list .item’);
console.log(items);
Array.from(items).forEach(item => (item.style.color=”red”));
console.log(items[0]);
items[0].style.background=”yellow”;
//返回满足条件的元素集合第一个，常用来返回唯一元素
const first = document.querySelector(“.list .item “);
console.log(first);
console.log(first===items[0]);
const ul = document.querySelectorAll(“.list”);
console.log(ul);
const ul=document.querySelector(“.list”);
console.log(ul);
body
const body = document.querySelector(“body”);
body.style.backgroundColor=”lightcyan”;
console.log(document.head);
let $ =function(selector){
return document.querySelector(selector);
}
console.log($(“ul”));
let $ =selector=>document.querySelector(selector);
let $ =selector=>document.querySelector(selector);
console.log($(“body”).style.backgroundColor=”lightcyan”);
//表单获取的特殊性
const form= document.querySelector(“#IN”);
console.log(form);
document.forms获取表单ID选择器和nama
console.log(document.forms.IN);
console.log(document.forms.FM);
console.log(document.forms.IN === document.forms.FM);
console.log(document.forms.IN.login.value);
//DOM树中的所有内容成为节点
//节点类型：元素，文本，文档
let ul=document.querySelector(‘.list’);
console.log(ul.childNodes);
//children
 //Array.from(ul.children).forEach(item=>(item.style.color="red"));
 //[...ul.children].forEach(item=>(item.style.color="red"));
 //console.log(([...ul.children].shift().style.color="blue"));
 console.log((ul.firstElementChild.style.color="blue"));
 console.log(ul.lastElementChild.style.color="blue");
 //第二个元素
 console.log(ul.firstElementChild.nextElementSibling.style.color="red");
 //第四个元素
 console.log(ul.lastElementChild.previousElementSibling.style.color="blue");
 //第三个元素
 const li =document.querySelector(".item:nth-of-type(3)");
 console.log(li);
//创建只在内存中，不在页面中 creeateElement
let div=document.createElement(“div”);
let p =document.createElement(‘p’);
p.textContent=”Hello World”;
//将元素渲染到页面中
document.body.append(p);
console.log(document.querySelector(‘div’).id);
console.log(document.querySelector(‘div’).data-email);
对于这样的自定义属性，成为数据属性
console.log(document.querySelector(“div”)[“data-email”]);
//dataset专用获取’data-前缀的自定义’
let email2=document.querySelector(“div”).dataset.email;
let email1=document.querySelector(“div”).dataset.email;
console.log(email2);
console.log(email1);
</script>