首页 > 其他分享> > JQuery JSON使用实验（1）

JQuery JSON使用实验（1）

2020-04-29 12:03:35 作者：互联网

1. 实例预期效果

页面效果
点击页面列表中每一项，可以跳转到相应网站。

2. HTML代码主体部分

页面使用Bootstrap进行设计，但与以往不同，HTML部分只是给出了页面元素，但超链接标签的href属性值和文本内容并没有直接在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>
	</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>
	</body>
</html>

3. JSON对象定义

本实例中，页面显示的文本内容和跳转的链接地址都以JSON对象的方式进行定义，以下代码定义了一个JSON对象数组。

				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": "搜索你所需要的！"
					}
				];

3. 通过JSON对象设置HTML元素属性

接下来，需要根据JQuery语法在文档就绪事件$(document).ready中设置HTML元素的属性和内容。
如何通过JSON对象设置HTML元素的属性值呢？有几种方案可以尝试，请你试一试。

方案1：为每个超链接标签设置id属性，通过JQuery选择器或者通过JS DOM
依次获得每个元素，然后设置它的href属性。其中，JQuery设置属性和内容可以参考相关教程。
方案2：通过JQuery选择器获取所有元素，然后使用JQuery遍历方法中的each()方法，为每个元素设置属性和内容。其中，为每个元素设置内容和属性又有两种方式，可以使用JS DOM，也可以使用JQuery的attr()和text()方法。

以下以方案2为例，部分示例代码如下：

（1）使用JS DOM对象

				$("a").each(function(index, element) {
					//通过设置DOM对象属性的方式设置<a>标签属性
					element.innerHTML=JSONObject[index].name;
					element.href=JSONObject[index].url;
					element.title=JSONObject[index].slogan;
				});

以上代码中index是超链接元素集合中每个元素的索引，从0开始；element是当前元素。
或者也可以使用另一种方法，如下：
（2）使用JQuery的attr()和text()方法

				$("a").each(function(index, element) {
					//通过JQuery的attr()和text()方法
					$(this).text(JSONObject[index].name);
					$(this).attr("href", JSONObject[index].url);
					$(this).attr("title",JSONObject[index].slogan);
				});

标签：JQuery,index,slogan,name,JSON,实验,属性
来源： https://blog.csdn.net/flyroc08/article/details/105806796