东北师范大学轻量级框架开发应用（资料）

同学情 · 发表于 2019-5-24 09:36:29

第一阶段作品展示

同学，经过前几周的学习，相信你已经掌握了本课程的一些基础性知识，下面请你动手完成以下作品，并提交上来。

你需要提交的作品：
用jquery写一个tab选项卡效果，请将代码复制到word文档中，将运行的结果截图粘贴到word文档中，将word文档作为附件提交上来。
要求：
1. 点击tab切换不同的内容。
2. 当前选择的tab需要有背景色。

小试牛刀2019-05-05
同学，你好！学习了如何使用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>

yan27545 · 发表于 2019-5-24 09:42:16

OK，资料不错

summer0213 · 发表于 2019-5-24 10:08:29

同学推荐的

贾炷拈 · 发表于 2019-5-24 11:02:59

谋学网还可以！

		自动登录	找回密码
密码			会员注册

VIP会员，3年作业免费下！	奥鹏作业，奥鹏毕业论文检测	新手作业下载教程，充值问题	没有找到答案，请在此处留言！
2022年5月最新全国统考资料	投诉建议，加盟合作！		奥鹏课程积分软件(2021年最新)

东北师范大学 轻量级框架开发应用 （资料）

本帖子中包含更多资源

东北师范大学轻量级框架开发应用（资料）