|
|
同学，你好！经过10周的学习，你已经不再是个前端小白了，现在这里有2个任务，请你任选一个完成。如果你感兴趣，也可以两个都完成哦，来证明你的实力吧。请注意，在老师批阅前，你可以多次提交，一旦老师批阅就不能再提交啦！请慎重提交哦。提交任务后请到课程问答栏目，找一下老师发的关于这个活动的主题帖，按老师的要求至少回复一个帖子，回帖也计入总成绩哦。
任务一
问题：前端实习小哥哥张小磊想要实现如下图所示的效果，他编写了一组代码，可问题是运行后得不到想要的结果。为什么呢？
任务：请你找出代码中的问题，并加以修改。
如果你自己搞不定，不妨试试求助卡和军师卡吧。
求助卡：到微信群内找伙伴寻求帮助，问问大家是怎么解决的。
军师卡：到平台问答区发帖请教辅导老师，请军师给你指点迷津。
张小哥的代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
div {
width: 100px;
height: 90px;
float: left;
padding: 5px;
margin: 5px;
background-color: #EEEEEE;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="aaron">
<p>class="aaron"</p>
<p>选中</p>
</div>
<div class="aaron">
<p>class="aaron"</p>
<p>选中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery选中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery选中</p>
</div>
<script type="text/javascript">
//通过原生方法处理
//样式是可以多选的，所以得到的是一个合集
//需要通过循环给合集中每一个元素修改样式
var divs = document.getElementsByClassName('aaron');
for (var i = 0; i < divs.length; i++) {
divs.style.border = "3px solid blue";
}
</script>
<script type="text/javascript">
//通过jQuery直接传入class
//class选择器可以选择多个元素
$("imooc").css("border:3px solid red");
</script>
</body>
</html>
任务二
问题：**公司前端实习生马小娇想要实现如下图所示的效果；点击通过jQuery的empty移除元素。她认真编辑了一组代码，可代码运行出现了问题，到底是哪里写错了呢？
任务：请你帮助小娇同学找到代码中的错误，并改正。
如果你自己搞不定，不妨试试求助卡和军师卡吧。
求助卡：到微信群内找伙伴寻求帮助，问问大家是怎么解决的。
军师卡：到平台问答区发帖向辅导老师请教，请军师给你指点迷津。
马小娇的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
div {
background: #bbffaa;
width: 300px;
}
</style>
</head>
<body>
<h2>通过empty移除元素</h2>
<div id="test">
<p>p元素1<p>
<p>p元素2<p>
</div>
<button>点击通过jQuery的empty移除元素</button>
<script type="text/javascript">
$("button").on('click', function() {
//通过empty移除了当前div元素下的所有p元素
//但是本身id=test的div元素没有被删除
$("test").empty
})
</script>
</body>
</html> |
|
发表于 2019-10-24 10:41:17
