[JavaScript知识库]json、jquery、ajax

一，json

1.1 概念

json：javascript object notation，js对象表示法

作用：用于存储和交换文本信息

特点：

1. 速度快
2. 内存占用小
3. 易于解析

1.2 基本语法

json 数据使用键值对进行存储

键：是字符串，用单（双）引号括起来

值：

1. 数值，例如：3、-3.6
2. 字符串，例如：“abc”、“张三”
3. 布尔值
4. json数组
5. json对象
6. null

{
	"name": "张三",
	"age": 80,
	"sex": false,
	"score": null,
	"cars": ["宝马", "法拉利", "奔驰"],
	"children": [{
			"name": "李逵",
			"age": 20,
			"sex": "男"
		},
		{
			"name": "张飞",
			"age": 21,
			"sex": "女"
		},
		{
			"name": "刘备",
			"age": 20,
			"sex": "女"
		}
	]
}

json 数据的获取方式：

1. json对象.键
2. json对象[“键”]
3. json数组[索引]

json的循环方式：除了使用普通for循环，还可以使用如下方式：

for(var t in 数据源)

注：使用以上循环遍历json时，如果遍历的数据源是json数组，那么t是下标；如果遍历的数据源是json对象，那么t是对象中的键（获取的键是字符串类型的）

1.3 json数据与java对象的转换

步骤：

1. 准备工作，引入依赖

<dependencies>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-annotations</artifactId>
        <version>2.9.9</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-core</artifactId>
        <version>2.9.9</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.9.9</version>
    </dependency>
</dependencies>

2. 创建jackson的核心对象ObjectMapper

   ObjectMapper mapper = new ObjectMapper();
   

3. 执行转换

   1. java对象转换成json数据

      mapper.writeValueAsString(Object o);
      mapper.writeValue(File f,Object o);
      mapper.writeValue(OutputStream os,Object o);
      mapper.writeValue(Writer w,Object o);
      

   2. json数据转换成java对象

      mapper.readValue(String json,Class c);
      mapper.readValue(File f,Class c);
      mapper.readValue(OutputStream os,Class c);
      mapper.readValue(Writer w,Class c);
      

二，jQuery

2.1 概念

jQuery是一个前端框架，用于简化js的开发

jQuery的设计宗旨“write less do more”，提倡用更少的代码写出更多的功能。它封装了js常用的功能，优化了html文档的操作、事件处理、动画和AJAX交互。

jQuery本质上就是一个 js 文件。

2.2 jQuery的使用

1. 下载，jQuery文件，https://www.jq22.com/jquery-info122

注：任何一个版本的jQuery文件都有带有min和不带min的版本

jquery-xxx.js：开发版，给程序员看的，其中有良好的代码缩进和注释，体积更大

jquery-xxx.min.js：生产版，开发中使用的，没有缩进和注释，体积小

2. 在页面中引入jQuery

<script type="text/javascript" src="js/jquery-3.3.1.min.js">
</script>

2.3 js 对象与 jQuery 对象的转换

js -> jQuery

$(js对象)

jQuery -> js

方式1：
jQuery对象[索引]
方式2：
jQuery对象.get(索引)

注：jQuery对象不能调用js的属性和方法；js对象不能调用jQuery的属性和方法

2.4 jQuery的基本操作

1. 入口函数

   // 方式1
   $(document).ready(function(){
   })
   // 方式2
   $().ready(function(){
   })
   // 方式3
   $(function(){
   })
   

2. 样式设置

   jQuery对象.css("样式名","样式值");
   $btn.css("background","red").css("color","yellow").css("border","2px solid black");
   
   $btn.css({"background":"blue","color":"red","font-weight":"bold"});
   

3. 事件绑定

   jQuery对象.事件1(function(){
       
   }).事件2(function(){
       
   })
   

2.5 选择器

2.5.1 基本选择器

1. 元素选择器

   $("标签名")
   

2. id选择器

   $("#id值")
   

3. 类选择器

   $(".class值")
   

4. 并集选择器

   $("选择器1,选择器2,...")
   

5. 通配符选择器

   $("*")
   

2.5.2 层级选择器

1. 子代选择器

   $("选择器1 > 选择器2")
   

2. 后代选择器

   $("选择器1 选择器2")
   

2.5.3 属性选择器

形式1：

$("选择器[属性名]")

形式2：

$("选择器[属性名='属性值']")

形式3：

$("选择器[属性名='属性值'][属性名='属性值']...")

2.5.4 过滤选择器

1. 首元素选择器

   $("选择器:first")
   

2. 尾元素选择器

   $("选择器:last")
   

3. 非元素选择器

   $("选择器:not(选择器)")
   

4. 奇数选择器

   $("选择器:odd")
   

5. 偶数选择器

   $("选择器:even")
   

6. 等于索引选择器

   $("选择器:eq(index)")
   

7. 大于索引选择器

   $("选择器:gt(index)")
   

8. 小于索引选择器

   $("选择器:lt(index)")
   

2.6 DOM操作

2.6.1 内容的操作

1. text()：获取/设置元素标签体内的内容
2. html()：获取/设置元素标签体内的html结构
3. val()：获取/设置value的属性值

注：

1. 方法中不写参数，表示获取
2. 方法中写参数，表示设置

2.6.2 属性的操作

1. 通用属性操作
   1. attr()：获取/设置属性
   2. removeAttr()：移除属性
   3. prop()：获取/设置属性
   4. removeProp()：移除属性

注：

1. attr()方法可以对元素的固有属性进行操作，也可以对自定义的属性进行操作；
2. prop()方法只能对元素的固有属性进行操作

2. class属性操作
   1. addClass()：添加class属性值
   2. removeClass()：移除class属性
   3. toggleClass()：切换class属性

2.6.3 标签的操作

1. a.append(b)：将b作为a的最后一个子元素
2. a.prepend(b)：将b作为a的第一个子元素
3. a.appendTo(b)：将a作为b的最后一个子元素
4. a.prependTo(b)：将a作为b的第一个子元素
5. a.insertAfter(b)：将a移动到b之后
6. a.insertBefore(b)：将a移动到b之前
7. a.after(b)：将b移动到a之后
8. a.before(b)：将b移动到a之前

9. 创建元素节点（标签）：

   $(标签名)
   例如：创建一个超链接
   $("<a href='http://www.baidu.com'>百度</a>")
   

10. a.remove()：移除a元素

11. a.empty()：清空a元素标签体中的内容，保留自身

2.6.4 事件绑定

$(选择器).事件(function(){
})

举例：

// 为一个id是btn的按钮赋予点击事件
$("#btn").click(function(){
})

$(选择器).on("事件",function(){
})

举例：

// 为一个id是btn的按钮赋予鼠标移入事件
$("#btn").on("mouseover",function(){
})

$(选择器).off("事件")

举例：

// 取消id为btn按钮的鼠标移入事件
$("#btn").off("mouseover")

2.6.5 遍历

// 方式1
$.each(容器,function(变量名){
 
})

// 方式2
jQuery对象.each(function(变量名){
 
})

注：

1. 以上两种方法的匿名函数中必须定义形参，该形参是每一个元素下标
2. jQuery中不能使用break和continue，要使用return false代替break、return true代替continue

三，AJAX

3.1 概念

Asynchronous JavaScript And Xml，异步的js和xml

同步：客户端向服务器发送请求后，必须等待服务器的响应，只有在服务器响应后，客户端才能执行其他操作

异步：客户端向服务器发送请求后，客户端不需要等待服务器的响应，就可以继续操作

作用：异步请求，局部刷新

AJAX是一种无需加载整个页面，就可以更新页面中部分内容的技术，提高了用户体验

3.2 使用原生js的方式完成ajax

1. 创建执行异步请求的核心对象XMLHttpRequest

   var xmlhttp;
   if(window.XMLHttpRequest){
       // true，说明当前浏览器是高版本的浏览器，内建XMLHttpRequest对象
      	// Chrome、Firefox、IE7+ 等
       xmlhttp = new XMLHttpRequest();
   }else{
       // false，说明当前浏览器是老版本的浏览器，没有内建XMLHttpRequest对象，需要创建ActiveXObject
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   

2. 建立连接

   xmlhttp.open(参数1,参数2,参数3);
   

   参数：

   1. 提交方式：get、post
   2. 请求的地址
   3. 是否使用异步：true（使用异步）、false（不使用异步）

3. 发送请求

   xmlhttp.send();
   

   注：

   1. get请求，提交的数据必须拼接在请求的地址之后，并且send()方法的参数必须为空

   2. post请求，提交的数据要写在send()方法的参数中，并且在发送请求前，必须先添加如下语句：`

      xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      

4. 接收服务器响应回来的数据

   xmlhttp.onreadystatechange = function(){
       if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
          //
       }
   }
   // 当服务器的响应状态为4，也就是请求已经完成并且服务器的响应已就绪；以及响应状态为200时，才能获取服务器响应回来的数据
   

   通过xmlhttp.responseText可以获取服务器响应回来的数据

3.3 使用jQuery完成ajax

1. $.get(参数1，参数2，参数3，参数4)：以get提交方式实现ajax
   

2. $.post(参数1，参数2，参数3，参数4)：以post提交方式实现ajax
   

   参数：

   1. 请求的地址
   2. 提交的数据（json）
   3. 服务器响应后执行的功能，用于接收服务器响应的数据，函数的参数就是接收到的响应的数据
   4. 接收到的服务器响应数据的类型，取值：json、text

3. $.ajax({
       url:请求的地址,
       data:提交的数据（json）,
       success:function(d){
           
       },
       dataType:接收数据的类型
       type:提交方式，get/post
   })
   

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系