JavaScript笔记一 | 动态添加内容

选自百度前端学院任务十四：零基础JavaScript编码（二）

学习目的

学习JavaScript中的if判断语法，for循环语法
学习JavaScript中的数组对象
学习如何读取、处理数据，并动态创建、修改DOM中的内容

学习任务

参考以下示例代码，页面加载后，将提供的空气质量数据数组，按照某种逻辑（比如空气质量大于60）进行过滤筛选，最后将符合条件的数据按照一定的格式要求显示在网页上

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
  </head>
<body>

  <h3>污染城市列表</h3>
  <ul id="aqi-list">
<!--   
    <li>第一名：福州（样例），10</li>
  	<li>第二名：福州（样例），10</li> -->
  </ul>

<script type="text/javascript">

var aqiData = [
  ["北京", 90],
  ["上海", 50],
  ["福州", 10],
  ["广州", 50],
  ["成都", 90],
  ["西安", 100]
];

(function () {

  /*
  在注释下方编写代码
  遍历读取aqiData中各个城市的数据
  将空气质量指数大于60的城市显示到aqi-list的列表中
  */

})();

</script>
</body>
</html>

任务分析

初看题目，主要是两个方面的问题：一个是读取列表并过滤排序；另一个是将合适数据数据显示在<ul id="aqi-list"></ul>里。

过滤和排序

JS数组过滤可以用Array filter() 方法。题目要求是空气质量指数大于60的城市，所以fitlter()方法如下：

aqiData.filter(function(value){
      return value[1]>60;
  })

数组排序可以使用简单的冒泡排序，为了简化代码，可以用JavaScript sort() 方法。题目要求是从高到低，所以sort()所用里用的函数应该是return b[1]-a[1];

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

获取 DOM 元素对象并设置元素的内容

获取DOM元素对象的方法有多样，常用的有getElementById()、 getElementsByName()、 getElementsByTagName()。

getElementById()
通过标签id获取，如本题目获取 <ul id="aqi-list"> 对象：document.getElementById("aqi-list")。
document.getElementsByName()
要注意的是Elements是复数的，因为 Documnent中每一个元素的ID是唯一的，但NAME却可以重复。该方法所获得的是对象数组，可用数组获取元素的方法获取某一个对象，如：getElementsByName("docname")[0]即访问第一个对象。
getElementsByTagName()
通过标签名来获取的，同 getElementsByName()一样，获取的是对象数组，本题中只有一对<ul>标签，所以可以用document.getElementsByTagName("ul")[0]获得与document.getElementById("aqi-list") 同样的效果。

任务结果和代码

污染城市列表

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
  </head>
<body>

  <h3>污染城市列表</h3>
  <ul id="aqi-list">
<!--   
    <li>第一名：福州（样例），10</li>
  	<li>第二名：福州（样例），10</li> -->
  </ul>

<script type="text/javascript">

var aqiData = [
  ["北京", 90],
  ["上海", 50],
  ["福州", 10],
  ["广州", 50],
  ["成都", 90],
  ["西安", 100]
];

(function () {

  /*
  在注释下方编写代码
  遍历读取aqiData中各个城市的数据
  将空气质量指数大于60的城市显示到aqi-list的列表中
  */
  var str="";
  var pos=["一","二","三","四","五","六"];
  var outputData=aqiData.filter(function(value){
      return value[1]>60;
  }).sort(function(a,b){
      return b[1]-a[1];
  });
  outputData.forEach(function(value,index){
      str+="<li>第"+pos[index]+"名："+value[0]+"，"+value[1]+"</li>";
  });
  document.getElementById("aqi-list").innerHTML=str;

})();

</script>
</body>
</html>

本文由小TiD笔记发布在小TiD笔记，转载此文请保持文章完整性，并请附上文章来源（小TiD笔记）及本页链接。
原文链接： https://www.tidnotes.ga/2019/08/javascript%e7%ac%94%e8%ae%b0%e4%b8%80-%e5%8a%a8%e6%80%81%e6%b7%bb%e5%8a%a0%e5%86%85%e5%ae%b9.html

扫描分享到社交APP

WordPress之代码样式更改

本文主要是简述怎样实现在网页中插入的代码实现高亮显示小编为了实现类似CSDN中的代码显示，实验了不同的方案， […]

JavaScript笔记一 | 动态添加内容

学习目的

学习任务

任务分析

任务结果和代码

污染城市列表

发表评论

近期文章

分类

工具栏

标签云

关于我们

友情链接