批改状态:不合格
老师批语:还是markdown语法的问题,如果不知道怎么使用,可以找助教
代码区
— 作用域和闭包
```
<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>
```
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号