第十周学习周记——JSON的几个实验

最新推荐文章于 2021-06-24 12:42:47 发布

ATM机型号0429

最新推荐文章于 2021-06-24 12:42:47 发布

阅读量319

点赞数

分类专栏：学习文章标签： javascript css jquery

本文链接：https://blog.csdn.net/jix_Hu/article/details/117527595

版权

本周学习中，通过三个实验深入理解了JSON，包括使用JSON对象设置元素属性，展示摄影作品，以及实现天气预报功能。每个实验都包含代码展示和运行结果分析。

摘要由CSDN通过智能技术生成

第十周学习周记

前言
一、实验一：通过JSON对象设置元素属性
- 1. 代码
- 2. 运行结果
二、实验二：摄影作品
- 1. 代码
- 2. 运行结果
三、实验三：天气预报
- 1. 代码
- 2. 运行结果
总结

前言

上一周初步学习了JSON，这一周将通过几个实验来进一步了解JSON。

一、实验一：通过JSON对象设置元素属性

1. 代码

HTML文件代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery JSON实例 - 通过JSON对象设置元素属性</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script>
			$(document).ready(function(){
      
			var JSONObject = [
									{
     
										"name": "菜鸟教程",
										"url": "http://www.runoob.com",
										"slogan": "学的不仅是技术，更是梦想！"
									},
									{
     
										"name": "W3School",
										"url": "http://www.w3school.com.cn",
										"slogan": "领先的Web技术教程！"
									},
									{
     
										"name": "Uni-app",
										"url": "https://uniapp.dcloud.io",
										"slogan": "为开发者而生，简单易用的跨平台前端框架！"
									},
									{
     
										"name": "XXXX大学",
										"url": "http://www.btbu.edu.cn",
										"slogan": "开始追逐梦想的地方！"
									},
									{
     
										"name": "百度",
										"url": "http://www.baidu.com",
										"slogan": "搜索你所需要的！"
									}
								];
								$("a").each(function(index, element) {
     
									element.innerHTML=JSONObject[index].name;
									element.href=JSONObject[index].url;
									element.title=JSONObject[index].slogan;
								});
								 });
				</script