请登录 注册 快捷导航

当前位置：首页 › 奥鹏作业答案 › 东北师范大学 › 东师19春轻量级框架开发应用-小试牛刀

[离线作业] 东师19春轻量级框架开发应用-小试牛刀

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

东师, 轻量级, 框架, 开发, 应用

轻量级框架开发应用-小试牛刀（任务二）答案.zip

47.64 KB, 下载次数: 6, 下载积分: 贡献 1

售价: 20 金币  [记录]  [购买]

答案参考

相关帖子

奥鹏在线作业/离线作业辅导qq 1647861640
回复

举报

刚刚去过
快速回复 返回顶部 返回列表