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