JQuery第七章json

最新推荐文章于 2021-09-11 21:20:12 发布
最新推荐文章于 2021-09-11 21:20:12 发布
阅读量126 收藏
点赞数
分类专栏： jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/t5555666/article/details/108781537
版权

第七章json

1:什么是json？

	json== javascript	object	notation

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>
小涛涛啊！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery基础教程之第七章
11-04
JQuery基础教程之第七章后续章节看我后续资源jquery全套教程： JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础教程之第五章:http://download.csdn.net/source/745975 JQuery基础教程之第六章:http://download.csdn.net/source/747968 JQuery基础教程之第七章:http://download.csdn.net/source/747971 JQuery基础教程之第八章:http://download.csdn.net/source/747973 JQuery基础教程之第九章:http://download.csdn.net/source/747982 JQuery基础教程之第十章及附录:http://download.csdn.net/source/747999 JQuery基础教程源码:http://download.csdn.net/source/748030 jQuery in Action源码:http://download.csdn.net/source/748118
第七章 jQuery中的事件与动画
JiangMye的博客
07-19 1092
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&gt; *{
jQuery入门第七章（事件）
m0_56344602的博客
09-11 563
事件解绑 解绑事件 $(选择器).off('事件类型'); 如果要针对性解绑某个事件处理函数，需要把事件处理函数起个名字，再名字解绑。 $(选择器).off('事件类型', 事件处理函数名称); 事件对象 基本概念 每个事件在触发的时候，都有事件对象，记录了事件触发时候的一些信息。 如何获取事件对象 在事件处理函数写个形参名称，常用的名字 event , ev , e 。 鼠标事件对象中，可以获取鼠标坐标值 ， clientX， clientX ，pageX, pageY..
JSON学习
Bruski的博客
12-21 144
JSON概念 JSON: JavaScript对象表示法(JavaScript Object Notation) JSON是存储和交换文本信息的语法，类似XML。采用键值对的方式来组织，易于读写和解析。 JSON是独立与语言的，任何语言按照JSON语法都可以解析。 JSON与xml相比 长度比xml小 json读写快 json可以使用JavaScript內建方法解析：JSON.par...
第7章jQuery
wa2661391317的博客
03-05 252
jQuery是什么 jQuery是一个在页面中引用的JavaScript文件。它允许你通过CSS样式选择器来找到一些元素，并且在这些元素上使用jQuery提供的一些方法。 使用CSS样式选择器查找元素 和DOM主要的不同之处 jQuery代码也是写在js文件里面 为什么使用jQuery 1.简单的选择器； 2。使用更少的代码完成常见任务； 3.跨浏览器兼容性；w ...
第10章 jQuery的基本操作_jquery_
09-29
本章我们将深入探讨jQuery的基本操作，包括元素选取、属性操作、样式调整以及动画效果的实现。 1. **元素选取** jQuery提供了一系列方法来选取HTML元素，如`$()`函数，它是jQuery的核心，可以接受CSS选择器、HTML...
jQuery第三章代码
01-01
**jQuery第三章代码详解** jQuery，作为一款广泛使用的JavaScript库，极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本章我们将深入探讨jQuery的核心概念、语法特性以及实际应用，帮助你更好地理解和掌握...
jquery下json数组的操作实现代码
10-28
在jQuery中，处理JSON数据是常见的任务，特别是当涉及到与服务器进行异步通信时。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它允许我们以JavaScript对象的格式来存储和传输数据。在jQuery中，...
JSON与JQUERY
07-05
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它采用完全独立于...在提供的“使用JSON与jQuery实现Ajax_第10页_下载资料”文件中，可能包含更具体的实例和讲解，可以帮助进一步理解和掌握这些概念。
北大青鸟jQuery第二章上机练习加课后
03-05
在本课程"北大青鸟jQuery第二章上机练习加课后"中，我们将深入学习jQuery这一强大的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。jQuery的核心理念是“写得更少，做得更多”，通过简洁的...
JS/JQuery-第7章上机练习.zip
04-20
【原创作者田超凡，未经许可请勿转发，侵权仿冒必究】
jQuery第七章Ajax
l_jia_ming的博客
12-02 222
jQuery,Ajax,笔记
jQuery第七章知识点
suixinCaesar的博客
07-24 676
1.jQuery事件是对JavaScript事件的封装，常用事件分类:(基础事件 鼠标事件 键盘事件 window事件 表单事件),(复合事件 鼠标光标悬停 鼠标连续点击) 2.鼠标事件:mouseover( ),mouseenter( ),mouseout( ),mouseleave( ) 3.键盘事件:keydown( ),keyup( ),keypress( ) 4.hover()方法...
jQuery实战读书笔记(第7章 扩展jQuery)
weixin_33861800的博客
12-14 68
扩展 jQuery 有两种形式: 直接定义在 $ 上的实用函数 操作 jQuery 包装集的方法 1. jQuery插件开发指南 1.1 为文件和函数命名 为文件名添加jquery前缀 前缀后面是插件的名称 包含插件的主版本号和次版本号(可选项) 以.js结束 1.2 当心 $ (function($){ //...
第七章 jQuery中的事件与动画
weixin_30394669的博客
06-17 306
事件的分类 　　基础事件： 　　　　鼠标事件　　　　键盘事件　　　　window事件　　　　表单事件 　　复合事件： 　　　　鼠标光标悬停　　　　鼠标连续点击 基础事件: 　　　　 　　实例： 　　　　 mouseenter()和mouseover()用法的区别： 　　mouseover()：鼠标指针进入被选元素时会触发mouseover事件，如归鼠标指针在其被选元素的子元素上...
从0开始学习JSON库（一）
LINDA
05-09 2236
从零开始学习JSON库（一） LINDA 2018/5/8 前几天看了叶神的知乎专栏从零开始的JSON库教程，叶老师很详尽地跟我们讲解一个项目的正确打开方式： 1. 要做一个项目首先要知道做什么，即项目要实现的协议是怎么样的，可以先看相关的RFC文档。 2. 知道大概要做什么了，我们先从简单的入手，构思相应的数据结构，函数接口，罗列出来。 3. 先写对应接口的单元测试，当然，我们不...
jQuery第七章课后作业
suixinCaesar的博客
07-24 6116
4.制作页面导航特效，初识状态下仅显示“购物特权”主菜单，单击“购物特权”二级菜单在显示和隐藏之间切换，当鼠标指针移至二级子菜单上时，子菜单添加背景景色。 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;导航特效&lt;/ti
jiaoyanguizeduibi
最新发布
07-10
jiaoyanguizeduibi
qfedu二阶段jQuery
03-07
8. 支持插件扩展：jQuery拥有丰富的第三方插件，能够满足各种功能需求，且大部分插件都是免费且开源的。 二、jQuery的使用 2.1 jQuery下载 jQuery提供不同版本以适应不同需求，1.x版本兼容IE6、7、8，是最广泛使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值