同学，你好！经过10周的学习，你已经不再是个前端小白了，现在这里有2个任务，请你...

李老师 · 发表于 2019-10-15 16:53:03

同学，你好！经过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[i].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>

		自动登录	找回密码
密码			立即注册