本小节基本要求
- 了解html文件
要点：
- JSON格式的数据
- Javascript(简称js)语言
- 样式选择器之ID选择器
Step1：构建JSON格式数据
新建文件夹，建立一个.json后缀的文件，这个文件里存放的是我们的文章数据。
{
"hot": [
{ "id": 1,
"title": "Zabbix"
},
{
"id": 2,
"title": "Prometheus"
},
{
"id": 3,
"title": "Java yyds!"
},
{
"id": 4,
"title": "什么？卡卡罗特对波又输了？"
},
{
"id": 5,
"title": "一千零一夜"
},
{
"id": 100,
"title": "问风"
}
],
"new": [
{ "id": 6,
"title": "ElasticSearch"
},
{
"id": 7,
"title": "Kafka"
},
{
"id": 8,
"title": "从你的全世界路过"
},
{
"id": 9,
"title": "如果那天可以好好聊聊"
},
{
"id": 10,
"title": "带着记忆回到14年"
},
{
"id": 11,
"title": "孤流拒海"
}
]
}
- hot:最热文章列表
- new:最新文章列表
- 共计12篇文章标题
什么？你问我JSON格式的数据为什么长这样？为什么带个{},为什么带个[ ]?
因为大家都这样写，所有就成这样咯。
ps：现在开发网站几乎全部都是用的json格式构建的数据。学会这种格式，难道不重要吗？
这是一个很火的学习网站：www.baidu.com
Step2：Id选择器使用
为什么添加ID选择器，看Step4
Step3：引入jquery文件:这是个工具
下载地址：https://code.jquery.com/jquery-1.11.0.min.js
直接右键屏幕另存为就可以了。
创建js文件夹，将文件放入，并且在body.html页面引入该文件：如下：
<script type="text/javascript">
function getData() {
$.ajax({
type: "GET",
url: "../data/article.json",
dataType: "json",
headers:{'Content-Type':'application/json;charset=utf8'},
success: function (res) {
let hot_w = res.hot;
let new_w = res.new;
var hot_html = ""
var new_html = ""
hot_w.forEach(function (d) {
var h = "<li>" + d.title + "</li>"
hot_html += h;
})
new_w.forEach(function (d) {
var n = "<li>" + d.title + "</li>"
new_html += n;
})
console.log($.parseHTML(hot_html))
console.log($(".hot .card-body ul"))
$("#hot-w").append($.parseHTML(hot_html))
$("#new-w").append($.parseHTML(new_html))
}
})
}
getData()
</script>Step5：右键运行，结果如下：
JS部分：
<script src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
function getData() {
$.ajax({
type: "GET",
url: "../data/article.json",
dataType: "json",
headers:{'Content-Type':'application/json;charset=utf8'},
success: function (res) {
let hot_w = res.hot;
let new_w = res.new;
var hot_html = ""
var new_html = ""
hot_w.forEach(function (d) {
var h = "<li>" + d.title + "</li>"
hot_html += h;
})
new_w.forEach(function (d) {
var n = "<li>" + d.title + "</li>"
new_html += n;
})
console.log($.parseHTML(hot_html))
console.log($(".hot .card-body ul"))
$("#hot-w").append($.parseHTML(hot_html))
$("#new-w").append($.parseHTML(new_html))
}
})
}
getData()
</script>body部分：
<body>
<div class="tbody">
<main class="is-main">
<div class="main-left">
<div class="gonggao">
哈喽，我是公告位
</div>
<div class="panel">
<div class="guangao">哈喽，我是广告位</div>
</div>
<div class="content">
<div class="card">
<div class="hot">
我是热门文章
</div>
<div class="card-body">
<ul id="hot-w">
</ul>
</div>
</div>
<div class="card">
<div class="new">
我是最新文章
</div>
<div class="card-body">
<ul id="new-w">
</ul>
</div>
</div>
</div>
</div>
<div class="main-right">
<!-- <div class="my-info">-->
<!-- 我是个人信息框-->
<!-- </div>-->
</div>
</main>
</div>
</body>我都用了哪些新知识：
- ajax：
一种用于请求网址的技术
- Javascript(简称JS)：
一种脚本语言，你所看到的所有网站都离不开这门技术
- css选择器之id选择器：
样式选择器，前几篇讲过类选择器，详细了解入口
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 ivillcn@qq.com 举报，一经查实，本站将立刻删除。文章链接：https://www.shangraobbs.com/n/4334.html
