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

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

<!DOCTYPE>

<html>

  <head>

    <meta charset="utf-8">

    <title>IFE JavaScript Task 01</title>

  </head>

<body>

  <ul id="source">

    <li>北京空气质量：<b>90</b></li>

    <li>上海空气质量：<b>70</b></li>

    <li>天津空气质量：<b>80</b></li>

    <li>广州空气质量：<b>50</b></li>

    <li>深圳空气质量：<b>40</b></li>

    <li>福州空气质量：<b>32</b></li>

    <li>成都空气质量：<b>90</b></li>

  </ul>

  <ul id="resort">

    <!--

    <li>第一名：北京空气质量：<b>90</b></li>

    <li>第二名：北京空气质量：<b>90</b></li>

    <li>第三名：北京空气质量：<b>90</b></li>

     -->

  </ul>

  <button id="sort-btn">排序</button>

<script type="text/javascript">

/**

 * getData方法

 * 读取id为source的列表，获取其中城市名字及城市对应的空气质量

 * 返回一个数组，格式见函数中示例

 */

function getData() {

  var sdata=document.getElementById('source');

 var data=[];

  var schildNode=sdata.childNodes;//获取子节点数

  var length=schildNode.length;

  for (var i=0;i<length;i++){

    if (schildNode[i].innerText)

    {

      var sarray=schildNode[i].innerText.split("：");//innerText可以去掉所有的标签

      //使用split将字符串从冒号处分离

      //也可以

      //data.push([schildNode[i].innerHTML.slice(0, 7), schildNode[i].innerHTML.slice(10, 12)])

     data.push(sarray)//可以直接将sarray数组放进去

    }

  }

  return data;

}

/**

 * sortAqiData

 * 按空气质量对data进行从小到大的排序

 * 返回一个排序后的数组

 */

function sortAqiData(data) {

  data.sort(function(pre,nex){

    return nex[1]-pre[1];

  })

  return data;

}

/**

 * render

 * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中

 * 格式见ul中的注释的部分

 */

 //没有采用创建节点的方式

function render(data) {

  var resort=document.getElementById('resort');

  var li="";

  for(var i=0;i<data.length;i++){

    li=li+"<li>"+"第"+(i+1)+"名："+data[i][0]+"：<b>"+data[i][1]+"</b></li>";

  }

  resort.innerHTML=li;//使用innerHTML的方法，将li输出到网页中

}

function btnHandle() {

  var aqiData = getData();

  aqiData = sortAqiData(aqiData);

  render(aqiData);

}

function init() {

  // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数

  var sortBtn=document.getElementById('sort-btn');

  //使用addEventListener，false表明是冒泡事件

  sortBtn.addEventListener('click',function(){

    btnHandle();

  },false);

}

init();

</script>

</body>

</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. Object-C学习之NSSet和NSMutableSet

    转自:http://blog.csdn.net/likandmydeer/article/details/7939749 一.简介 集合(set)是一组单值对象,它可以是固定的(NSSet).也可以是 ...

  2. Fundebug前端JavaScript插件更新至1.8.2，修复2个小BUG

    摘要: 修复2个BUG,请大家及时更新. Fundebug前端异常监控服务 Fundebug是专业的程序异常监控平台,我们JavaScript插件可以提供全方位的异常监控,可以帮助开发者第一时间定位各 ...

  3. Wordpress 设置中文语言包

    从官方安装的是英文版的,想要切换成中文语言包 1.修改项目目录下面的wp-config文件: 添加define(‘WPLANG’, ‘zh_CN’); 保存文件 2.进入站点控制板(dashboard ...

  4. np.random 系列函数

    1 random()   # 产生区间 [0, 1) 均匀分布的浮点数样本值 np.random.seed(42) 2 rand(d0, d1, ..., dn)    # 产生区间 [0, 1) 均 ...

  5. 《Pro Continuous Delivery With Jenkins 2.0》随书笔记

    今天同时看完<Pro Continuous Delivery With Jenkins 2.0>, 这书与工作关系很大,但也是快速翻翻. 本书着重点jenkins高可用环境搭建,与gith ...

  6. Cutting Bamboos(2019年牛客多校第九场H题+二分+主席树)

    题目链接 传送门 题意 有\(n\)棵竹子,然后有\(q\)次操作,每次操作给你\(l,r,x,y\),表示对\([l,r]\)区间的竹子砍\(y\)次,每次砍伐的长度和相等(自己定砍伐的高度\(le ...

  7. 借助模板类自动实现COM连接点接收器（Sink）

    本文的更新:借助模板类自动实现COM连接点接收器(Sink)更新 (2014-06-09 17:09) 最初的代码源自free2000fly的一个标准的 COM 连接点接收器(Sink)的实现, 使用 ...

  8. 201871010112-梁丽珍《面向对象程序设计（java）》第四周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...

  9. flask实战-个人博客-数据库-生成虚拟数据 --

    3.生成虚拟数据 为了方便编写程序前台和后台功能,我们在创建数据库模型后就编写生成虚拟数据的函数. 1)管理员 用于生成虚拟管理员信息的fake_admin()函数如下所示: personalBlog ...

  10. java中的this关键字三种作用

    1.表示类中的属性和调用方法2.调用本类中的构造方法3.表示当前对象