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);
});
原创文章 8
获赞 2
访问量 2012