一、图片隐藏(点击图片可选择是否显示该图片)
五、滑过被隐藏的图片也仍然显示图片
二、模拟相册(点击哪个图片,呈现哪个图片在大屏幕上)
六、滑过哪个图片,呈现哪个图片在大屏幕上
七、点击哪个图片,哪个图片变成背景(如果想让div和浏览器没有距离,要自己设置一下margin,marg默认值不是0.调用body标签可以直接使用document.body)
PS:由于同步异步问题,在绑定事件再调用自身要用this
三、value、innerHTML、innerTEXT区别
console.log(input.value);//输出值
console.log(div.innerHTML);//输出全部内容
console.log(div.innerText);//输出双标签内容
四、
1.所有的全局变量都是window的属性
2.所有的全局函数都是window的方法
console.log(document);
八、选中和取消(之后补充)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.οnlοad=function(){
/*1.图片隐藏
var button=document.getElementsByTagName('button')[0];
var img=document.getElementsByTagName("img")[0];
button.οnclick=function(){
if(button.innerHTML==="隐藏"){
button.innerHTML="显示";
img.style.display="none";
}
else{
button.innerHTML="隐藏";
img.style.display="block";
}
}*/
/*2.模拟相册,点击图片,图片改变
var show=document.getElementById("show");
var x=document.getElementsByClassName('picture');
for(var i=0;i<x.length;i++){
x[i].οnclick=function(){
var url=this.getAttribute("src");
show.setAttribute("src",url);
//console.log(this.src);//!!!!!是this
}
}*/
/*3.value、innerHTML、innerTEXT区别
var div=document.getElementsByTagName("div")[0];
var input=document.getElementsByTagName("input")[0];
input.value="000";
console.log(input.value);//输出值
console.log(div.innerHTML);//输出全部内容
console.log(div.innerText);//输出双标签内容
*/
/*4.全局属性
console.log(document);//document是整个文档,它其实也就是body、div这些标签一样
console.log(document.head);//body、title都行
window.location.href="https://www.baidu.com";*/
/*5.图片隐藏和显示进阶
var x=document.getElementsByTagName("img")[0];
var y=document.getElementsByTagName("img")[1];
y.style.display="none";
x.οnmοuseοver=function(){
y.style.display="block";
}
x.οnmοuseοut=function(){
y.οnmοuseοver=function(){
y.style.display="block";
}
y.οnmοuseοut=function(){
y.style.display="none";
}
}*/
/*6.模拟相册进阶
var show=document.getElementById("show");
var x=document.getElementsByClassName('picture');
for(var i=0;i<x.length;i++){
x[i].οnmοuseοver=function(){
var url=this.getAttribute("src");
show.setAttribute("src",url);
}
}*/
/*7.背景切换
var x=document.getElementsByClassName('picture');
for(var i=0;i<x.length;i++){
x[i].index=i+1;//同步异步问题
x[i].οnclick=function(){
console.log(this.index);
document.body.style.background="url("+this.index+".png) no-repeat";//!!!使用的是document.body
document.body.style.backgroundSize="cover";
}
}*/
/*8.选中和取消
var input=document.querySelectorAll("input");
function $(id){
return typeof id === "string" ? document.getElementById(id):null;
}
$("allchoose").οnclick=function(){
for(var i=0;i<input.length;i++){
input[i].checked=true;
}
}
$("allcancel").οnclick=function(){
for(var i=0;i<input.length;i++){
input[i].checked=false;
}
}
$("oppositechoose").οnclick=function(){
for(var i=0;i<input.length;i++){
if(input[i].checked===true)input[i].checked=false;
else input[i].checked=true;
}
}*/
}
</script>
<style type="text/css">
*{
margin: 0px;
}
li{
list-style:none;
float: left;
margin-right: 20px;
}
/*7.
body{
background: url(1.png) no-repeat;
background-size: cover;
}*/
#box{
height:200px;
background-color: white;
opacity: 0.5;
}
</style>
</head>
<body>
<!--1.图片隐藏
<button>隐藏</button>
<img src="1.png">-->
<!--2.模拟相册,点击图片,图片改变
<img id="show" src="1.png">
<ul>
<li><img class="picture" src="1.png"></li>
<li><img class="picture" src="2.png"></li>
<li><img class="picture" src="3.png"></li>
</ul>-->
<!--3.value、innerHTML、innerTEXT区别
<div>
<input type="text" value="12345">
<p>123456789</p>
</div>-->
<!--4.
1.所有的全局变量都是window的属性
2.所有的全局函数都是window的方法
-->
<!--5.图片隐藏和显示进阶
<img src="1.png">
<img src="2.png">-->
<!--6.模拟相册进阶
<img id="show" src="1.png">
<ul>
<li><img class="picture" src="1.png"></li>
<li><img class="picture" src="2.png"></li>
<li><img class="picture" src="3.png"></li>
</ul>-->
<!--7.背景切换
<div id="box">
<ul>
<li><img class="picture" src="1.png"></li>
<li><img class="picture" src="2.png"></li>
<li><img class="picture" src="3.png"></li>
</ul>-->
<!--8.选中和取消
<input type="checkbox" class="choose" >1
<input type="checkbox" class="choose" >2
<input type="checkbox" class="choose" >3
<input type="checkbox" class="choose" >4
<input type="checkbox" class="choose" >5
<button id="allchoose">全选</button>
<button id="allcancel">取消选择</button>
<button id="oppositechoose">反选</button>-->
</body>
</html>