JSON----jQuery

最新推荐文章于 2024-08-08 08:13:00 发布

知来者犹可追

最新推荐文章于 2024-08-08 08:13:00 发布

阅读量237

点赞数

分类专栏：前端文章标签： JSON-jQuery

本文链接：https://blog.csdn.net/qq_43529877/article/details/84572416

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JSON

JSON（JavaScript Object Notation）是一种轻量级的文本数据交换格式；是存储和交换文本信息的语法；它比XML更小、更快、更容易解析；独立于语言：使用JavaScript语法来描述数据对象，但是JSON仍然独立于语言和平台，支持多种不同的编程语言；具有自我描述性，更容易理解；文本格式再语法上与创建JavaScript对象的代码相同。
1、JSON语法规则
数据再名称/值对中，数据由逗号分隔；{ } 保存对象,[] 保存数组
2、 JSON 名称/值对

格式：名称/值对例：“name”:“zhangsan”

3、JSON值
JSON值可以是：数字、字符串、逻辑值、数组、对象、null。
4、创建JSON对象

格式：var 对象名 = {键：值，...};
例：var obj = {"name":"zhangsan","age":18};

key必须是字符串，value的值可以是：数字、字符串、逻辑值、数组、对象、null。
key和value中必须使用冒号（：）分割；每个键值对之间用逗号（，）隔开。

访问对象值
两种访问方式：
1、由点（.）来访问对象的值。
2、也可以是由中括号([])来访问对象的值。

例：
1: 	document.write(obj.name);
2: 	document.write(obj["age"]);

循环对象
使用for-in来循环对象的属性
例：

for( o in obj){
	document.write(obj[o]);
}

嵌套JSON对象

var user = {
	"name": "李四",
	"age": 18,
	"sex": "女",
	"account": {
		"taobao": "t123",
			"jingdong": "jd123",
			"baidu": "b123"
		}
}
// 遍历
document.write(user.account.taobao + "<br/>");

for(u in user.account) {
	document.write(user.account[u] + "<br />");
}

JSON数组
JSON数组值必须是合法的JSON数据类型（子符串、数字、对象、数组、布尔值、null）

数组作为对象

格式：
例：var obj = [“TianMao”,“JingDong”,“TaoBao”];

对象中的数组

var user = {
	"name":"zhangsan",
	"age":18,
	"hobby":["swimming","running"]
}

遍历数组

for(var i=0;i<user.hobby.length;i++){
	document.write(user.hobby[i]+"<br>");
}

修改数组中的值

user.hobby[0] = "sing";

删除数组中值

//  指定删除的元素
1、delete  user.hobby[0];
// 默认删除最后一个
2、user.hobby.pop();

JSON数据转换为JavaScript对象
语法：parse(text , [reviver])
参数说明：text：必选，一个有效的JSON字符串；
reviver：可选，一个转换结果的函数，将对象的每个成员调用此函数。

例：
	var obj = JSON.parse('{"name":"zhangsan","age":18}');
	document.write(obj.name+":"+obj.age);

将JSON文本转换为JavaScript对象
eval（）函数使用的是JavaScript编译器，可解析JSON文本，然年后生成JavaScript对象。必须将文本包围在括号里。

var txt='{"user":['+
	'{"account":"admin","pwd":"admin"},'+
	'{"account":"user","pwd":"user"}]
}';
var obj = eval("("+txt+")");

document.write(obj.user[0].account);

jQuery

jQuery对象
jQuery对象是通过jQuery（ $() ）包装 D O M 对象后产生的对象； j Q u e r y 对象是 j Q u e r y 是 j Q u e r y 对象独有的，如果一个对象是 j Q u e r y 对象，那么他就可以使用 j Q u e r y 里的方法； j Q u e r y 对象无法使用 D O M 对象的任何方法，同样 D O M 也无法使用 j Q u e r y 中的任何方法。约定：如果获取的是 j Q u e r y 对象，那么要在变量前面加上$

例如：var $obj = jQuery 对象
var obj = DOM 对象

jQuery对象转成DOM对象
1、jQuery对象是一个数组对象，可以通过[index]的方法得到对象的DOM对象。
2、使用jQuery中的get(index)方法得到相应的DOM对象。
例：
//Jquery对象转换成DOM对象通过[index]和get(index)

$(document).ready(function(){
	var time = document.getElementById("p1");
	// DOM对象转化为JQery对象
	var $time = $(time);
	// 将jQuery对象转化为DOM对象
	var t=$("#p1")[0];
		alert(t.innerText);
		
		t=$("#p1").get(0); 	
});
-----------------------------
<body>
    <div id="div1">时间
        <p id="p1">昨天</p>
        <p id="p2">今天</p>
        <p id="p3">明天</p>
    </div>
</body>

获取p元素的内容
既可以获取值也可以设置值
1、.html()
2、.text()

ready()
等待DOM元素都加载完毕，类似window.onload（）
$(document).ready()和Window.onload区别

1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(d o c u m e n t) . r e a d y () 是 D O M 结构绘制完毕后就执行，不必等到加载完毕。 2 . 编写个数不同 w i n d o w . o n l o a d 不能同时编写多个，如果有多个 w i n d o w . o n l o a d 方法，只会执行一个。$ (document).ready()可以同时编写多个，并且都可以得到执行
3.简写方法
window.onload没有简化写法。 $document).ready(function(){})可以简写成$ (function(){});