jQuery第七章 json

最新推荐文章于 2023-10-11 14:00:18 发布
最新推荐文章于 2023-10-11 14:00:18 发布
阅读量123 收藏
点赞数
分类专栏： jQuery内容 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/starry__sty/article/details/108922421
版权
该博客介绍了JSON的基本概念，包括它的用途、与XML的区别，强调了它可以存储各种类型数据的特点，并详细讲解了JSON的两种数据格式：对象和数组格式，同时涵盖了jQuery中的JSON相关方法和结构写法。
摘要由CSDN通过智能技术生成

1:什么是json？

	JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
	它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
	简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 
	易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率
	json本身是一个对象，主要作用是存储数据（json是存储和交换文本信息的语法，类似XML），json可以存储任何类型的数据。

2.json是干嘛的？

json是存储和交换文本信息的语法，类似XML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
//		1:
//		var arr=[1,2,3];
//		alert(arr[0])
//		2:
//		var obj={
//			name:'tom',
//			age:12,
//			job:'学生'
//		}
//		alert(obj.name)
//		3:
//		var o={
//			arr:['name','age','12'],
//		}
//		alert(o.arr[0])
//		4:
//		var arr=[
//				{'name1':'流量1','age1':'2','job1':'学生1'},
//				{'name2':'流量2','age2':'12','job2':'学生2'},
//				{'name3':'流量3','age':'3','job3':'学生3'}
//		]
//
//		alert(arr[2].job3)
//		5:输出打印数据   for in
//		var o={
//			name:'jack',
//			age:12,
//			job:'学生',
//			sex:'男'
//		}
//		document.write(o)
//		document.write(o.length)
//		取键写法
//		for(var i in o){
//			document.write(i+'<br>')
//		}
//		取值写法
//		for(i in o){
//			document.write(o[i]+'<br>')
//		}
//		6:
//		var obj={
//			arr:[
//					{name:'老栗1','age':1,sex:'男1',h:1},
//					{name:'老栗2','age':2,sex:'男2',h:2},
//					{name:'老栗3','age':3,sex:'男3',h:3},
//			]
//		}
//		for(var i=0; i<obj.arr.length;i++){
//			document.write(obj.arr[i].name)
//		}


	</script>
</html>

3:json和XML的区别？

小，快，容易解析

4:json可以存储任何类型的数据
5:json数据格式有2种写法：
1：对象格式
2：数组格式

6:json方法

eval()  将js代码转换成对象/不建议用，安全性太低
json提供2个方法，但是要求浏览器版本高
（现在浏览器不影响了，如果想让方法兼容低版本浏览器，请下载json.js）

stringify()		讲json转换成js字符
**stringify()方法除了可以转换以外，方法中的第2个参数是过滤
* 你要留哪个值，就以数组形式写到方法里面
* 第3个参数是数字   可以改变数据的距离
parse()			将js字符串转换成json
**parse()所有的字符必须加双引号	

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
//		1检查json
//		alert(typeof JSON)
//		2:parse() 将字符串转成json
//		var arr='[{"name":"laoli1","age":"1","sex":"男"},{"name":"laoli1","age":"1","sex":"男"},{"name":"laoli1","age":"1","sex":"男"}]'
//		alert(typeof arr)
//		alert(arr[0].name)
//		var a=JSON.parse(arr);
//		alert(typeof a)
//		alert(a[0].name)
//		3:eval()  将js代码转换成对象/不建议用，安全性太低
//		var arr='[{"name":"laoli1","age":"1","sex":"男"},{"name":"laoli1","age":"1","sex":"男"},{"name":"laoli1","age":"1","sex":"男"}]';
//		alert(typeof eval(arr))
//		alert(typeof JSON.parse(arr))
//		4:stringify()		讲json转换成js字符
//		var obj=[{name:'tom',age:12,h:170},{name:'jack',age:13,h:175},{name:'mac',age:14,h:180}];
//		alert(typeof obj)
//		var o=JSON.stringify(obj)
//		alert(typeof o)
		
//		var o=JSON.stringify(obj,['name','tom'],1)
//		alert(o)

	</script>
</html>

7：json结构写法

var obj={
	"sites": {
	    "site": [
	      {
	        "id": "1",
	        "name": "菜鸟教程",
	        "url": "www.runoob.com"
	      },
	      {
	        "id": "2",
	        "name": "菜鸟工具",
	        "url": "c.runoob.com"
	      },
	      {
	        "id": "3",
	        "name": "Google",
	        "url": "www.google.com"
	      }
	    ]
	}
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
	</body>
	<script type="text/javascript">
	
		
var obj={
"sites": {
    "site": [
      {
        "id": "1",
        "name": "菜鸟教程",
        "url": "www.runoob.com"
      },
      {
        "id": "2",
        "name": "菜鸟工具",
        "url": "c.runoob.com"
      },
      {
        "id": "3",
        "name": "Google",
        "url": "www.google.com"
      }
    ]
}
}
//alert(obj.sites.site[0].id)
for(var i=0; i<obj.sites.site.length; i++){
	for(var j in obj.sites.site[i]){
		document.write(obj.sites.site[i][j]+'<br>')
	}
}


//var obj={
//	"shop":[
//			{
//				"name":"Nike",
//				"money":"$130",
//				"sex":"通用",
//				"describe":"2019年春季新款",
//				"url":"<img src='img/1.jpg'>"
//			},
//			{
//				"name":"Nike",
//				"money":"$130",
//				"sex":"通用",
//				"describe":"2019年春季新款",
//				"url":"<img src='img/2.jpg'>"
//			}
//		]
//}

//document.write(obj.shop[1].name)
//document.write(obj.shop[0].url);

//	for(var i=0; i<obj.shop.length; i++){
//		for(a in obj.shop[i]){
//			document.write(obj.shop[i][a]+"<br>")
//		}
//	}


	</script>
</html>
starry__sty
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JQuery练习题2
m0_56628949的博客
06-17 125
JQuery练习题2
JQuery第七章Json
LW0512的博客
10-04 115
Json 1:什么是json？ JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。 2:json数据格式有2种写法： 1：对象格式 2：数组格式 3:json方法 eval() 将js代码转换成对象/不建议用，安全性太低 json提供2个方法，但是要求浏览器版本高（现在浏览器不影响了，如果想让方法兼容低版本浏览器，请下载json.js） stringify() 讲json转换成js字符 stringify()方法除了可以转换以外，方法中
JS/JQuery-第7章上机练习.zip
04-20
【原创作者田超凡，未经许可请勿转发，侵权仿冒必究】
jQuery练习七
syh945的博客
04-08 122
ex-7.html [code="html"] Untitled Document function replaceElement(ele1, ele2) { var $ele1Temp = $(ele1).c...
浴火凤凰组第七章上机+简答_jQuery+JavaScript上机_
10-03
里面有第七章的上机+简答题没有没有没有没有没有没有没有没有没有
jQuery选择器上机练习题及答案.rar
12-02
(答案见下载资源) 上机任务1 用chrome打开dom.sample2.html页面， 在chrome的控制台中输入jQuery代码并执行，完成以下选择动作： （1）查找id号为tigerLily的元素 （2）查找拥有类myList的元素 （3）查找所有的input元素 （4）查找所有img元素和tr元素 （5）查找id号为coffeePot和id号为someDiv的元素 （6）选择具有id属性的所有元素 （7）选择具有id属性的input元素 （8）选择其value属性等于A的元素 （9）选择其value属性等于A或等于C的元素 （10）选择其title属性值中含有dog的img元素 （11）选择其href属性值以http开头的a元素 （12）选择div元素内嵌套的span元素 上机任务2 用chrome打开dom.sample2.html页面， 在chrome的控制台中输入jQuery代码并执行，完成以下选择动作： （13）选择元素li，该元素作为拥有myList类的ul元素的直接子元素 （14）选择id号为radioA的input元素后面的第一个input兄弟元素 （15）选择id号为radioA的input元素后面的所有input兄弟元素 （16）选择dom sample页面中第3个tr元素 （17）选择其type属性值checkbox且索引为偶数的input元素 （18）选择非最后一行的tr元素 （19）选择所有的checkbox元素 （20）选择所有被选中的表单元素 （21）选择含有1972的td元素 （22）选择包含有sapn元素的div元素 （23）选择表格中每行的第一个单元格和最后一个单元格 （24）选择表格中第3行,标题行不算(要求用nth-child()过滤器) 上机任务3 用chrome打开dom.sample2.html页面，该页面中内嵌有几个CSS类：.red .green .blue .yellow .thickBorder .seeThrough 在chrome的控制台中输入jQuery代码并执行，完成以下选择动作： （1）将拥有alt属性的倒数第二个图片元素应用yellow类 （2）将第一个checkbox表单元素应用.green样式 （3）求id值为checkbox3的元素在所有表单元素里的顺序号 （4）用一条链式语句完成：先对所有img元素应用seeThrough样式，再为所有img元素和tr元素应用yellow样式 （5）用filter方法实现：选择单元格内容为Java或Smalltalk的单元格 （6）取图片集中的第2,3,4张图片 （7）用has方法实现:选择那些包含有ul元素的li元素 （8）将tbody每个单元格里的文字设为：我爱jQuery （9）查找form元素的后代元素中标签为label的元素 （10）查找表单元素中是否有id值为checkbox5的元素 提示： 为某dom元素应用某css样式可以使用jQuery中的addClass方法，例如:将id为tt的div元素应用.bt样式，可用些语句：$("#tt").addClass("color","red");
JQuery前端如何操作JSON
hdxx2022的博客
03-11 877
通过上面这个表达式，就完成了将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，名称为“json”，通过“json.”或者“json[]”的方式便可进行数据访问。通过上面的计算，也可以将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，但是该对象名称为“r”，通过“r.”或者“r[]”的方式可进行数据访问。4.对象和数组可以互相嵌套，即数组中的一个元素可以是一个对象也可以是一个数组，同理对象中的一个属性的值可以是一个对象也可以是一个数组。
JQuery前端之操作JSON的方法
xinyuerr的博客
10-11 1953
通过上面这个表达式，就完成了将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，名称为“json”，通过“json.”或者“json[]”的方式便可进行数据访问。通过上面的计算，也可以将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，但是该对象名称为“r”，通过“r.”或者“r[]”的方式可进行数据访问。4.对象和数组可以互相嵌套，即数组中的一个元素可以是一个对象也可以是一个数组，同理对象中的一个属性的值可以是一个对象也可以是一个数组。
jQuery解析json格式数据示例
10-18
本篇文章将详细探讨如何使用jQuery解析和操作JSON格式的数据。 首先，JSON是一种数据交换格式，它基于JavaScript的一个子集。数据格式清晰，易于人阅读和编写，同时也易于机器解析和生成。JSON格式通常由键值对组成...
第10章 jQuery的基本操作_jquery_
09-29
本章我们将深入探讨jQuery的基本操作，包括元素选取、属性操作、样式调整以及动画效果的实现。 1. **元素选取** jQuery提供了一系列方法来选取HTML元素，如`$()`函数，它是jQuery的核心，可以接受CSS选择器、HTML...
jQuery实现在下拉列表选择时获取json数据的方法
10-24
getJSON方法是jQuery提供的一个快捷方法，用于向服务器发送GET请求并处理返回的JSON数据。它的工作流程如下： 1. 发送一个GET请求到指定的URL。 2. 服务器响应JSON格式的数据。 3. JSON数据被自动解析成JavaScript...
jQuery第三章代码
01-01
**jQuery第三章代码详解** jQuery，作为一款广泛使用的JavaScript库，极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本章我们将深入探讨jQuery的核心概念、语法特性以及实际应用，帮助你更好地理解和掌握...
JQuery前端操作JSON。
asd3331380的博客
11-22 237
转自：微点阅读（www.weidianyuedu.com）微点阅读 - 范文大全 - 免费学习网站 一、关于Json的数据格式 从结构上看，所有的数据最终都可以分成三种类型： 第一种类型是scalar（标量），也就是一个单独的string（字符串）或数字（numbers），比如“北京”这个单独的词。 第二种类型是sequence（序列），也就是若干个相关的数据按照一定顺序并列在一起，又叫做array（数组）或List(列表)，比如“北京，东京”。 第三种类型是mapping（映射），也就是一个名/值对
jQuery第七章课后作业
suixinCaesar的博客
07-24 6145
4.制作页面导航特效，初识状态下仅显示“购物特权”主菜单，单击“购物特权”二级菜单在显示和隐藏之间切换，当鼠标指针移至二级子菜单上时，子菜单添加背景景色。 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;导航特效&lt;/ti
使用JQuery快速高效制作网页交互特效第七章上机二
weixin_44269168的博客
06-30 3083
{ padding: 0; margin: 0; } a { text-decoration: none; } .nav-box { width: 210px; margin: 5px 0 0 5px; } .nav-top a { display: block; height: 45px; font-size: 16px; line-height: 45px; padding: 0 10px...
使用jQuery高效制作网页特效 第七章习题
wsbbdbjay的博客
07-24 3311
1 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;导航特效&lt;/title&gt; &lt;style type="text/css"&gt;
51浅析建设工程全过程造价管理.docx
最新发布
09-12
51浅析建设工程全过程造价管理
31工程量清单计价模式下的造价控制与管理.docx
09-12
31工程量清单计价模式下的造价控制与管理
ASP.NET利用jQuery+Ajax+Json实现无刷新分页实例
"在ASP.NET编程中，利用jQuery、Ajax和Json实现无刷新分页的关键技术是一个常见的前端与后端交互场景。本文档提供了一个实例代码，展示了如何通过这些技术实现在服务器端处理数据并动态更新前端表格，而无需刷新整个...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值