这一道题涉及到排序，读取页面内容，输出显示到某一节点当中以及添加事件。

刚开始一直在想怎么获取某一节点的内容，后面采用的是sdata.childNodes，获取所有的节点。再通过schildNode[i].innerText即可获取去掉标签的内容。

  1. <!DOCTYPE>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>IFE JavaScript Task 01</title>
  6.   </head>
  7. <body>
  8.  
  9.   <ul id="source">
  10.     <li>北京空气质量：<b>90</b></li>
  11.     <li>上海空气质量：<b>70</b></li>
  12.     <li>天津空气质量：<b>80</b></li>
  13.     <li>广州空气质量：<b>50</b></li>
  14.     <li>深圳空气质量：<b>40</b></li>
  15.     <li>福州空气质量：<b>32</b></li>
  16.     <li>成都空气质量：<b>90</b></li>
  17.   </ul>
  18.  
  19.   <ul id="resort">
  20.     <!--
  21.     <li>第一名：北京空气质量：<b>90</b></li>
  22.     <li>第二名：北京空气质量：<b>90</b></li>
  23.     <li>第三名：北京空气质量：<b>90</b></li>
  24.      -->
  25.  
  26.   </ul>
  27.  
  28.   <button id="sort-btn">排序</button>
  29.  
  30. <script type="text/javascript">
  31.  
  32. /**
  33.  * getData方法
  34.  * 读取id为source的列表，获取其中城市名字及城市对应的空气质量
  35.  * 返回一个数组，格式见函数中示例
  36.  */
  37. function getData() {
  38.   var sdata=document.getElementById('source');
  39.  var data=[];
  40.   var schildNode=sdata.childNodes;//获取子节点数
  41.   var length=schildNode.length;
  42.   for (var i=0;i<length;i++){
  43.     if (schildNode[i].innerText)
  44.     {
  45.       var sarray=schildNode[i].innerText.split("：");//innerText可以去掉所有的标签
  46.       //使用split将字符串从冒号处分离
  47.       //也可以
  48.       //data.push([schildNode[i].innerHTML.slice(0, 7), schildNode[i].innerHTML.slice(10, 12)])
  49.      data.push(sarray)//可以直接将sarray数组放进去
  50.     }
  51.   }
  52.   return data;
  53. }
  54.  
  55. /**
  56.  * sortAqiData
  57.  * 按空气质量对data进行从小到大的排序
  58.  * 返回一个排序后的数组
  59.  */
  60. function sortAqiData(data) {
  61.   data.sort(function(pre,nex){
  62.     return nex[1]-pre[1];
  63.   })
  64.   return data;
  65. }
  66.  
  67. /**
  68.  * render
  69.  * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
  70.  * 格式见ul中的注释的部分
  71.  */
  72.  //没有采用创建节点的方式
  73. function render(data) {
  74.   var resort=document.getElementById('resort');
  75.   var li="";
  76.   for(var i=0;i<data.length;i++){
  77.     li=li+"<li>"+"第"+(i+1)+"名："+data[i][0]+"：<b>"+data[i][1]+"</b></li>";
  78.   }
  79.   resort.innerHTML=li;//使用innerHTML的方法，将li输出到网页中
  80.  
  81. }
  82.  
  83. function btnHandle() {
  84.   var aqiData = getData();
  85.   aqiData = sortAqiData(aqiData);
  86.   render(aqiData);
  87. }
  88.  
  89. function init() {
  90.  
  91.   // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数
  92.   var sortBtn=document.getElementById('sort-btn');
  93.   //使用addEventListener，false表明是冒泡事件
  94.   sortBtn.addEventListener('click',function(){
  95.     btnHandle();
  96.   },false);
  97. }
  98.  
  99. init();
  100.  
  101. </script>
  102. </body>
  103. </html>

百度前端技术学院task15源代码的更多相关文章

  1. 百度前端技术学院task16源代码

    欢迎访问我的github:huanshen 做这道题目的时候遇到了很多困难. 1.怎么给空对象添加数据,愣是不知道从哪里下手:遍历对象,一个个输出操作: 2.中英文的正则表达式不知道,赶紧去百度: 3 ...

  2. 百度前端技术学院task35源代码——听指令的小方块3

    任务描述 如图,命令输入框由input变为textarea,可以允许输入多条指令,每一行一条 textarea左侧有一列可以显示当前行数的列(代码行数列),列数保持和textarea中一致 当text ...

  3. 百度前端技术学院task14源代码

    刚开始理解错误,以为是读取对象,结果后面才发现是二维数组. 另外对于数组排序,创建新的节点啊,输入到doM中啊,都不是很熟悉. <!DOCTYPE html> <html> & ...

  4. 百度前端技术学院task13源代码

    突然发现只看书不练习也是不行的,这么简单的我竟然都不会写了. 要注意innerHTML,innerText和outText之间的异同. 同时也要会使用DOM2的添加事件,移除事件等 <!DOCT ...

  5. 百度前端技术学院-task1.3源代码

    因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> < ...

  6. 百度前端技术学院（IFE）2016春季学期总结

    今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...

  7. 百度前端技术学院—-小薇学院(HTML+CSS课程任务)

    任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

  8. 通过Github Pages在线查看百度前端技术学院完成的任务成果

    前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHe ...

  9. 百度前端技术学院task1.10

    任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...

随机推荐

  1. Java 之 枚举（Enum）

    一.枚举 1.概述 枚举:JDK1.5引入的,类似于穷举,一一罗列出来 Java 枚举:把某个类型的对象,全部列出来 2.应用 什么情况下会用到枚举类型? 当某个类型的对象是固定的,有限的几个,那么就 ...

  2. android studio学习----添加项目依赖包总结

    Gradle Library Projects Gradle 项目可以依赖于其它组件.这些组件可以是外部二进制包,或者是其它的 Gradle 项目. 在本例中, app/build.gradle 中有 ...

  3. 有些CRM settype用事务码COMM_ATTRSET打不开的原因

    This question is asked by Dr. Lin. Issue For example, settype COM_COMMERCIAL could be opened via tco ...

  4. C# 连接数据操作的时候抛异常，连接超时

    先说说我的业务.我在发送优惠券的时候,同时给6千多个会员发送优惠券,执行了update 和insert语句,这写语句都是通过字符串拼接而来的.update和insert语句加起来一共是一万多条语句.在 ...

  5. 4.redis 的过期策略都有哪些？内存淘汰机制都有哪些？手写一下 LRU 代码实现？

    作者:中华石杉 面试题 redis 的过期策略都有哪些?内存淘汰机制都有哪些?手写一下 LRU 代码实现? 面试官心理分析 如果你连这个问题都不知道,上来就懵了,回答不出来,那线上你写代码的时候,想当 ...

  6. （原）在anaconda3+ubuntu16.04中编译Pose flow中的deepmatching动态库

    转载请注明出处: https://www.cnblogs.com/darkknightzh/p/11285239.html 参考网址: https://github.com/YuliangXiu/Po ...

  7. docker 网络模式 和 端口映射

    docker 的 网络模式 docker 自带 3 种 网络模式:分别是bridge网络,host网络,none网络,可以使用  docker network ls  命令查看. 1.none网络 这 ...

  8. Resin开放远程调试端口

    Resin开放远程调试端口在启动加载的resin.xml中,找到  <server-default>, 在其下加入 <jvm-arg>-Xdebug</jvm-arg&g ...

  9. Android: Error inflating class android.support.v4.view.ViewPager 问题的解决方法

    ViewPager是个很好很强大的控件,很多应用用它来实现很酷的效果,但是很多情况下在运行时会遇到Error inflating class android.support.v4.view.ViewP ...

  10. 安装sentry的几个命令

    docker run -d --name sentry-redis redis docker run -d --name sentry-postgres -e POSTGRES_PASSWORD=se ...