同学，你好！学习了如何使用JQ使div自适应窗口的高度，学习图片轮换效果后，现...

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

同学，你好！学习了如何使用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[i].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>

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