东师19春轻量级框架开发应用-小试牛刀
同学，你好！学习了如何使用JQ使div自适应窗口的高度，学习图片轮换效果后，现在你来小试牛刀，检验一下自己的学习成果吧！看看你是否已将知识消化吸收。以下4个任务请你根据自己的能力等级任选1个，完成后运行一下，如果达成预定的效果，请将代码复制到word文档中，将运行的结果截图粘贴到word文档中，将word文档作为附件提交上来。你也可以完成多个任务，提交多个成果哦！看看谁的任务完成得最好哦！提交成果后，请一定记得到问答栏目老师的学习活动主题帖下回帖参与学习活动哈，无论是提交成果还是回帖都会计入你的平时成绩哦。任务一：检验一下你是否学会了类选择器（基础）。在代码编辑器中第50行填写相应代码。$(".imooc")<!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> <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> <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选择器可以选择多个元素 ?.css("border", "3pxsolid red"); </script></body></html>
任务二：将jQuery对象转化成DOM对象（基础）。在代码的17行处填写任务代码。通过get方法，将jquery对象转化为dom对象，然后修改dom对象的颜色<!DOCTYPE html><html><head> <metahttp-equiv="Content-type" content="text/html;charset=utf-8" /> <title></title> <scriptsrc="http://code.jquery.com/jquery-1.11.3.js"></script></head><body> <div>元素一</div> <div>元素二</div> <div>元素三</div> <script type="text/javascript"> var$div = $('div'); //jQuery对象 //?div = ? div.style.color= 'red'; //操作dom对象的属性 </script></body></html>
任务三：检验一下你是否掌握了全选择器（*选择器）（基础）。在代码编辑器中第43行填写相应的代码。$("*")<!DOCTYPE html><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> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <divclass="aaron"> <p>class="aaron"</p> <p>选中</p> </div> <divclass="aaron"> <p>class="aaron"</p> <p>选中</p> </div> <divclass="imooc"> <p>class="imooc"</p> <p>jQuery选中</p> </div> <divclass="imooc"> <p>class="imooc"</p> <p>jQuery选中</p> </div>
<script type="text/javascript"> //获取页面中所有的元素 varelements1 = document.getElementsByTagName('*'); </script> <script type="text/javascript"> //获取页面中所有的元素 varelements2 = ? ; //原生与jQuery方法比较 //===表示数据和类型都相等 if(elements2.length === elements1.length){ elements2.css("border","1pxsolid red"); } </script></body>
</html>
任务四：检验一下你是否掌握了.val()方法（提高）。在代码编辑器中第37行填写相应代码val()。在代码编辑器中第42行填写相应代码val()。在代码编辑器中第48行填写相应代码val。<!DOCTYPE html><html><head> <metahttp-equiv="Content-type" content="text/html;charset=utf-8" /> <title></title> <style> p { color: red; margin:4px; }
b { color:blue; } </style> <scriptsrc="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> <h3>.val()</h3>
<selectid="single"> <option>慕课网</option> <option>博客园</option> </select> <selectid="multiple" multiple="multiple"> <optionselected="selected">imocc</option> <option>慕课网</option> <optionselected="selected">博客园</option> </select> <inputtype="text" value="click a button" /> <p></p> <scripttype="text/javascript"> //单个select，返回第一个 $("p").text( $("#single").? ) </script> <scripttype="text/javascript"> //多个select被选择，返回["imocc", "博客园"] $("p").text( $("#multiple").? ) </script> <scripttype="text/javascript"> //选择一个表单，修改value的值 $("input").?('修改表单的字段') </script></body></html>
页:
[1]