百度IFE-任务三：零基础JavaScript编码（三）

demo

任务目的

• 在上一任务基础上继续JavaScript的体验
• 接触一下JavaScript中的高级选择器
• 学习JavaScript中的数组对象遍历、读写、排序等操作
• 学习简单的字符串处理操作

任务描述

• 参考以下示例代码，读取页面上已有的source列表，从中提取出城市以及对应的空气质量
• 将数据按照某种顺序排序后，在resort列表中按照顺序显示出来

  
    
    
  


  

    
北京空气质量：90
    
上海空气质量：70
    
天津空气质量：80
    
广州空气质量：50
    
深圳空气质量：40
    
福州空气质量：32
    
成都空气质量：90
  

  

    

  

  排序

任务注意事项

• 实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识
• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释
• 建议不使用任何第三方库、框架
• 示例代码仅为示例，可以直接使用，也可以完全自己重写

解题思路

• 按照任务描述来看，可知其主要思路为：提取 ——— 排序 ——— 打印。下面对思路的三个阶段依次进行分析。

• 提取

  • 首先获取source列表，需要注意的是，这里我们要获取的是source列表中的li标签，而不是ul标签。所以不能直接用 getElementById() 方法，可以通过 nodeObject.children 语法来帮助获取元素的子节点。

    var city = document.getElementById('source').children;

  另外还可以使用HTML5新增的选择器 querySelectorAll：根据选择器规则返回所有符合要求的元素，使用方便（可以使用css选择符来查找节点）、兼容性好（IE 8+、FireFox 3.5+、Safari 3.2+、Chrome 4.0+、Oprea 10.1+ ），缺点是速率远远没有前者高。

  var city = document.querySelectorAll('#source>li');

  • 创建新数组，用于存放提取的数据。

  • 创建for循环，用于对全部的li标签进行提取。

  • 获取li标签中的文本，获取节点及其后代节点文本的语法有 textContent 和 innerText（可以感知样式，不会返隐隐藏元素的文本内容），因为要忽视li标签中的css样式，所以这里选择 innerText 方法。

  • 提取关键字，并放入数组中。这里使用 substr(start,length) 方法，第一个参数是要抽取的子串的起始下标，负数则从末尾算起。第二个参数为抽取的子串的长度。然后再用 push() 方法，依次放入数组。

    var node = [text.substr(0, 2), text.substr(-2, 2)];

• 排序
  使用sort()方法进行排序。

  data.sort(function(a,b){ return a[1] - b[1];});

• 打印

  • 首先获取resort列表。

  • 创建for循环。

  • 创建新的li标签。

    • 使用createElement()方法创建分别创建li标签和b标签。

      var oLi = document.createElement('li');

      var oB = document.createElement('b');

    • 按照任务描述，创建一个字符串变量。

      var arr = ["一","二","三","四","五","六","七"];

      var liText = '第' + arr[i] + '名：' + data[i][0] +"，" + '空气质量：';

    • 用appendChild()方法，将字符串变量，赋值给li标签。

    oLi.innerText = liText;
    oB.innerText = data[i][1];
    oLi.appendChild(oB);
    resort.appendChild(oLi);
    

完整代码

    
    



    
北京空气质量：90
    
上海空气质量：70
    
天津空气质量：80
    
广州空气质量：50
    
深圳空气质量：40
    
福州空气质量：32
    
成都空气质量：90


    


排序

参考资料

• querySelectorAll 方法相比 getElementsBy 系列方法有什么区别？
• HTML5的JavaScript选择器介绍
• Javascript获取子节点
• innerText，textContent和innerHTML