JQuery-Demo6:显示 JSON 数据

JQuery-Demo6:显示 JSON 数据

  • 一. 需求
  • 二. 代码
  • 三. 效果

Github:show_users_JSON

一. 需求

请把这个 JSON 数据用 JQuery 在页面中构造出来。

var users = [
    {
     "name" : "TimHsu", "sex" : "1", "tel" : "13750066666"},
    {
     "name" : "Dicky", "sex" : "1", "tel" : "13750066666"},
    {
     "name" : "Peter", "sex" : "1", "tel" : "13750066666"},
    {
     "name" : "Alice", "sex" : "1", "tel" : "13750066666"},
    {
     "name" : "Tom", "sex" : "1", "tel" : "13750066666"}
];

二. 代码

show_users_JSON.html


<html>
<head>
    <title>显示 JSON 数据title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="show_users.css" />
head>
<body>
    <div id="div0">div>
body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">script>
<script src="show_users.js">script>
html>

省略 show_users_JSON.css

show_users_JSON.js

var users = [
    {
     "name" : "TimHsu", "sex" : "1", "tel" : "13750066666"},
    {
     "name" : "Dicky", "sex" : "1", "tel" : "13750066666"},
    {
     "name" : "Peter", "sex" : "1", "tel" : "13750066666"},
    {
     "name" : "Alice", "sex" : "1", "tel" : "13750066666"},
    {
     "name" : "Tom", "sex" : "1", "tel" : "13750066666"}
];

/* JavaScript */
// var list = document.createElement("ol");
// document.getElementById("div0").appendChild(list);
// for(var i = 0; i < users.length; i++) {
     
//     var item = document.createElement("li");
//     var itemText = document.createTextNode(users[i].name + " " + users[i].sex + " " + users[i].tel);
//     item.appendChild(itemText);
//     list.appendChild(item);
// }

/* JQuery */
$(document).ready(function() {
     
    $("div").append("
    "
    ); for(var i = 0; i < users.length; i++) { var li = $("
  1. "
    ).text(users[i].name + " " + users[i].sex + " " + users[i].tel); $("ol").append(li); // $("ol").append("
  2. " + users[i].name + " " + users[i].sex + " " + users[i].tel + "
  3. ");
    } });

    三. 效果

    JQuery-Demo6:显示 JSON 数据_第1张图片

    你可能感兴趣的:(JQuery)