JQuery JSON使用实验（1）

Hoshi ·

更新时间:2024-11-01

· 993 次阅读

1. 实例预期效果

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

2. HTML代码主体部分

页面使用Bootstrap进行设计，但与以往不同，HTML部分只是给出了页面元素，但超链接标签的href属性值和文本内容并没有直接在HTML中设置。


		JQuery JSON实例 - 通过JSON对象设置元素属性

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对象属性的方式设置标签属性
					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);
				});