<input type="text" placeholder="技术蛋老师">
<button>发表评论</button>
<div></div>
<script>
var text=document.querySelector("input[type='text']");
var button=document.querySelector("button")
var div=document.querySelector("div")
button.οnclick=function(){
//var content=text.value;
//content="三联走一泼" //两个带关键字var变量的值被中间一个替换
//let关键字允许值得修改,let没有声明提升
//let content=text.value;
//let content='哈哈'; //赋值两个重复的let变量会报错
//let content=text.value;
// content="哈哈" //两个let,其中带关键字的值被使用,不带let的值被当成修改值
//div.innerHTML=content;
//let conten="哈哈哈" //报错。let没有声明提升
// const定义了以后,不能重复定义,不能修改值
// const content=text.value;
//const content='哈哈' //赋值两个重复的const会报错
// content="哈哈" //两个其中一个没赋值,会报错,所以const更严格
//div.innerHTML=content;
// const具有可变 的情况,用数组或对象形式来修改内容的
//要想解决const问题,把变量改为数组,把用户输入的内容设置为数组的第一个元素,
// 然后把输入的第一个元素显示出来,输入内容可以显示
// const content=[]; //content变量只是有个指针指向这个数组,数组是可以自已修改的,
// content[0]=text.value;
// content[1]="哈哈哈";
// div.innerHTML=content[1];
div.innerHTML=content;
var conten="哈哈哈" //执行没有报错,var关键字会进行声明提升
}
</script>
<p class="p1">床前明月光</p>
<p class="p2"></p>
<script>
var p1=document.querySelector("p.p1")
var p2=document.querySelector("p.p2")
var content="疑是地上霜";
// function content_default(){
// var content="李白睡的香";
// return content
// }
// p2.innerText=content_default()
{
let content="李白睡的香";
p2.innerText=content
//const let关键字和大括号来创建块级作用域
}
</script>
<style>
ul{
list-style: none;
}
ul>li{
width: 40px;
height: 40px;
margin: 20px;
float: left;
background-color: blueviolet;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>4</li>
</ul>
<script>
// 把li元素全部获取过来,然后进行循环,以数字5进行5次循环,每次循坏都会为li元素添加鼠标事件,监听事件里面创建一个文本节点,这个文本节点就用循环里面的i来赋值,并且修改li元素的高度,当鼠标移动的时候,box的显示了数值,也改变了高度,但是它们的都是一样的数值,一直的高度,var没有形成块级作用域,回调函数只保存这个参数i,等执行完了。i已经变成5, 等执行栈里面的正常任务执行以后才会执行队列里面的回调函数结果,这个时候所有任务队列再调用li的值肯定都是5
// var li=document.querySelectorAll("li");
// for(var i=0;i<5;i++){
// li[i].οnmοuseοver=function(){
// var text=document.createTextNode(i)
// this.appendChild(text);
// this.style.height=i*10+"px"
// }
// }
var li=document.querySelectorAll("li");
for(var i=0;i<5;i++){
let j=1;
li[i].οnmοuseοver=function(){
var text=document.createTextNode(i)
this.appendChild(text);
this.style.height=i*10+"px"
}
}
// 把每一次的迭代的变量i都赋值给变量j,因为块级作用域的关系,这样就会迫使每次迭代进行重新绑定,使得任务队列里面的回调函数都有不一样的数值,然后数值的高度就不一样了,完全按照迭代的顺序来, 把块级作用域锁定在整个for循环里,把var改成let,这样就不需要新增一个变凉了
// (const)不能修改值不能使用
var li=document.querySelectorAll("li");
for(var let=0;i<5;i++){
li[i].οnmοuseοver=function(){
var text=document.createTextNode(i)
this.appendChild(text);
this.style.height=i*10+"px"
}
}
</script>