2021-06-28

最新推荐文章于 2024-09-22 13:03:30 发布

奶油利口酒�

最新推荐文章于 2024-09-22 13:03:30 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/qq_55977356/article/details/118313934

版权

信息管理创新实践课程第九、十周学习周记
信息管理创新实践课程学习进度已至第九、十周，应课堂要求，创作此学习周记，并将以此方式持续记录。

学习内容
本节课初步学习JSON，可完成一些简单操作。
菜鸟教程自学地址：link.
编辑器：HBuilder X

知识点
1、JSON 语法规则
JSON 语法是 JavaScript 对象表示语法的子集：
数据在名称/值对中；
数据由逗号分隔；
大括号 {} 保存对象；
中括号 [] 保存数组，数组可以包含多个对象。

2、JSON 对象
2.1对象语法
JSON 对象使用在大括号({})中书写。
对象可以包含多个 key/value（键/值）对。
key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
key 和 value 中使用冒号(:)分割。
每个 key/value 对使用逗号(,)分割。

3、JSON 数组
JSON 数组在中括号中书写。
JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。

<!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>
	
			

	</head>
	<body>
		 <a href="#" class="list-group-item active" target="_blank"></a>
		
						<a href="#" class="list-group-item" target="_blank"></a>
		
						<a href="#" class="list-group-item" target="_blank"></a>
		
						<a href="#" class="list-group-item" target="_blank"></a>
		
						<a href="#" class="list-group-item" target="_blank"></a>
		<script>
		
											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": "北京工商大学大学",
		
													"url": "http://www.btbu.edu.cn",
		
													"slogan": "开始追逐梦想的地方！"
		
												},
		
												{
		
													"name": "百度",
		
													"url": "http://www.baidu.com",
		
													"slogan": "搜索你所需要的！"
		
												}
		
											];
		
												$("a").each(function(index, element) {
		
																	//通过设置DOM对象属性的方式设置<a>标签属性
		
																	element.innerHTML=JSONObject[index].name;
		
																	element.href=JSONObject[index].url;
		
																	element.title=JSONObject[index].slogan;
		
																});
		
											
		
											</script>
		
		
		
		

				
	
	</body>
</html>