其他分享
首页 > 其他分享> > JQuery JSON使用实验(1)

JQuery JSON使用实验(1)

作者:互联网

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元素的属性值呢?有几种方案可以尝试,请你试一试。

以下以方案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