任务1：操作img元素的属性
任务要求：
在一个美食评选的页面中，搭建一个由img元素和button元素组成的结构。用户通过单击按钮选择自己喜欢的美食，单击按钮后，按钮对应的美食图片变成一张内容为“已选择”的新图片。
效果如下图所示：
任务分析：
搭建一个由img元素和button元素组成的“图片+按钮”结构；JavaScript代码分别获取button元素和img元素，并为button元素注册单击事件，通过操作元素对象property属性的方式，将新的图片路径赋值给img元素对象的src属性。
任务实现：
<body>
<div>
<img src="images/3.jpg" alt="" title="火锅">
<button>选择</button>
</div>
<script>
var btn = document.querySelector("button");
var img = document.querySelector("img");
btn.onclick = function () {
img.src = "images/selected.jpg";
}
</script>
</body>
图片素材下载：
任务2：操作input元素的属性
任务要求：
单击按钮使input文本框显示“被单击了！”，并且将按钮设为禁用状态。
效果如下图所示：
任务分析：
任务实现：
<body>
<button>搜索</button>
<input type="text" value="输入内容">
<script>
//获取元素
var input = document.querySelector("input");
var btn = document.querySelector("button");
//注册事件
btn.onclick = function () {
input.value = "被单击了";
this.disabled = true;
}
</script>
</body>
任务3：操作attribute属性
任务要求：
掌握attrubute属性的设置，获取和移除。
任务分析：
通过元素对象的setAttribute()方法设置属性，getAttribute()方法获取属性值，setAttribute()方法移除属性。
任务实现：
<body>
<div></div>
<script>
var div=document.querySelector("div");
div.setAttribute("flag",2);
div.setAttribute("id","g");
console.log(div.id);
console.log(div.flag); //无法通过这种方式获取自定义属性
console.log(div.getAttribute("flag"));
div.removeAttribute("id");
div.removeAttribute("flag");
</script>
</body>
任务4：操作data-*属性
任务5：实现图片的轮播
任务要求：实现旅游风光轮播图效果。
效果图如下所示：
任务分析：
1、布局轮播图页面元素
2、分别使用数组定义图片路径和图片描述
3、定义函数完成一次换图
4、使用定时器启动定时换图功能
任务实现：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#ad{
width:640px;
height:360px;
margin:0 auto;
position:relative;
overflow: hidden;
}
#btm{
position:absolute;
bottom:0;
width:100%;text-align:left;
height: 50px;
font-size: 32px;
font-family: "microsoft yahei";
background: rgba(0,0,0,0.5);
color: #fff;
}
#pic{
width: 640px;
}
</style>
</head>
<body>
<div id="ad">
<img id="pic" src="img/news1.jpg" >
<div id="btm">泰山</div>
</div>
<script type="text/javascript">
var imgs=['img/news1.jpg','img/news2.jpg','img/news3.jpg',' img/news4.jpg'];
var txts=['泰山','趵突泉','故宫','长城'];
var index=0;
function changeImg(){
document.getElementById('pic').src=imgs[index];
document.getElementById('btm').innerHTML= txts[index];
index++;
if(index>3) index=0;
}
setInterval(changeImg,2000);
</script>
</body>
</html>
素材下载：
任务6：Tab栏切换
任务要求：
Tab栏在网站中的使用非常普遍，它的优势在于可以在有限的空间内展示多块的内容，用户可以通过单击标签项在多个内容块之间进行切换。
效果截图如下所示：
任务分析：
1、编写HTML页面，完成Tab栏的标签结构和内容区布局。
2、通过JavaScript实现Tab栏的切换效果。
3、通过JavaScript实现内容区的展示效果。
任务实现：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="tab.css">
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_com">
<div class="item" style="display:block;">商品介绍模块内容</div>
<div class="item" style="display:none;">规格与包装模块内容</div>
<div class="item" style="display:none;">售后保障模块内容</div>
<div class="item" style="display:none;">商品评价模块内容</div>
<div class="item" style="display:none;">手机社区模块内容</div>
</div>
</div>
<script>
//获取标签结构中的li元素
var lis = document.querySelectorAll(".tab_list li");
//获取内容部分的div元素
var items = document.querySelectorAll(".item");
//通过for语句注册单击事件
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute("index", i);
lis[i].onclick = changeTab;
}
function changeTab() {
for (var j = 0; j < lis.length; j++) {
if (lis[j] != this) {
lis[j].className = "";
} else {
this.className = "current";
}
}
var index = this.getAttribute("index");
for (var i = 0; i < items.length; i++) {
if (items[i] !== items[index]) {
items[i].style.display = "none";
} else {
items[index].style.display = "block";
}
}
}
</script>
</body>
</html>
CSS样式文件下载：
原创视频
