今日收获：
# Day10_JQuery&Ajax
## 全天目标
```
1.了解JQuery的基本概念
2.通过入门案例掌握JQuery的使用步骤
3.理解JQuery对象和JS对象区别与转换
4.掌握JQuery的基本选择器
5.掌握JQuery的属性选择器
6.掌握JQuery的常用DOM操作
7.理解JQuery遍历
8.理解JQuery绑定事件
9.理解JQuery事件切换
10.了解Ajax的概念
11.掌握Jquery实现Ajax的方式
```
## 今日内容
```
1.JQuery
1.1.JQuery概述
1.2.JQuery入门
1.3.JQuery对象和JS对象区别与转换
1.3.1.JQuery对象和JS对象概念
1.3.2.JQuery对象和JS对象区别
1.3.3.JQuery对象和JS对象转换
1.4.JQuery的选择器
1.4.1.基本选择器
1.4.2.属性选择器
1.5.常用DOM操作
1.6.Jquery遍历
1.7.事件绑定
1.8.事件切换
2.Ajax
2.1.Ajax概述
2.2.异步和同步
2.3.jquery方式
2.3.1.$.ajax()方式
2.3.2.$.get()方式
2.3.3.$.post()方式
```
## 1.JQuery
### 1.1 JQuery概述
**目标**
```
1.了解Jquery是什么。
2.了解Jquery能做什么。
```
**Jquery是什么**
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
**Jquery能做什么**
Jquery封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
**小结**
```
1.JQuery就是一个JS的框架，用于简化JS的开发
```
### 1.2.JQuery入门
**目标**
```
1.通过入门案例掌握Jquery的使用步骤。
```
#### 1.2.1.JQuery入门案例
**步骤**
```
1. 下载JQuery
2. 导入JQuery的js文件
3. 使用JQuery
```
**下载JQuery**
下载网址：https://code.jquery.com/jquery/
如果不能下载，可以使用资料中事先下载好的Jquery文件。
**Jquery的版本**
- 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)。
- 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)。
- 3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）。
**jquery-xxx.js 与 jquery-xxx.min.js区别**
- jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释，体积大一些。
- jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些，程序加载更快。
**案例**
**1.将资料中的Jquery文件拷贝到项目的js目录（注意这里拷贝的是xxx.min.js）**
**2.创建一个页面，名称为“02-JQuery快速入门.html”，在页面中引入Jquery文件，并编写代码。**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery快速入门</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1....</div>
<div id="div2">div2....</div>
<script>
//使用JQuery获取元素对象
var div1 = $("#div1");
alert(div1.html());
var div2 = $("#div2");
alert(div2.html());
</script>
</body>
</html>
**3.浏览器打开页面。**
**小结**
```
1.使用Jquery的步骤
第1步：下载JQuery的js文件
第2步：把JQuery的js文件导入到当前项目中。
第3步：在页面引入JQuery的js文件
第4步：使用Jquery
```
### 1.3.JQuery对象和JS对象
**目标**
```
1.理解JQuery对象和JS对象的概念
2.理解JQuery对象和JS对象的特点和区别
3.掌握JQuery对象和JS对象的转换
```
#### 1.3.1.概念
**目标**
```
1.理解JQuery对象和JS对象的概念
```
**概念**
JQuery对象：使用JQuery的语法$()获取到的页面元素，称之为JQuery对象。
JS对象：使用JS的语法获取到的页面元素，称之为JS对象。
**案例**
**1.创建一个页面，名称为03-JQuery对象和js对象的转换.html，在js区域编写代码**。
**2.JS对象获取**
```javascript
//1. 通过js方式来获取名称叫div的所有html元素对象
var divs = document.getElementsByTagName("div");
alert(divs);
```
**3.浏览器打开，查看效果**。
**4.JQuery对象**
```javascript
//2. 通过jq方式来获取名称叫div的所有html元素对象
var $divs = $("div");
alert($divs);
```
**5.浏览器打开，查看效果。**
**6.虽然获取的对象不一样，但是都可以当做数组来使用，都可以通过其length方法获取长度。**
```javascript
//1. 通过js方式来获取名称叫div的所有html元素对象
var divs = document.getElementsByTagName("div");
alert(divs.length);//可以将其当做数组来使用
//2. 通过jq方式来获取名称叫div的所有html元素对象
var $divs = $("div");
alert($divs.length);//也可以当做数组使用
```
**7.浏览器打开，查看效果。**
**小结**
```
1.使用JQuery中的语法$()获取的页面元素称之为JQuery对象，使用JS原生语法获取的页面元素称之为JS对象
```
#### 1.3.2.JQuery对象和JS对象的区别
**目标**
```
1.理解JQuery对象和JS对象的特点和区别
```
**案例**
**1.在03-JQuery对象和js对象的转换.html的js区域编写代码。**
**2.操作JS对象**
```javascript
//对divs中所有的div 让其标签体内容变为"aaa"
for (var i = 0; i < divs.length; i++) {
divs[i].innerHTML = "aaa";
}
```
**3.浏览打开，查看效果**
**4.操作JQuery对象**
```javascript
//对divs中所有的div 让其标签体内容变为"bbb" 使用jq方式
$divs.html("bbb");
```
**5.浏览器打开，查看效果**
**6.我们会发现用jquery操作比用原生的js操作要方便很多，所以我们得出一个结论**
- JQuery对象在操作时，更加方便。
- JQuery对象和js对象方法不通用的。
**在03-JQuery对象和js对象的转换.html的js区域编写代码。**
```javascript
$divs.innerHTML = "bbb";
```
**浏览器打开，查看效果，发现不起作用。**
**小结**
```
1.JS对象只能通过JS语法获取，操作时相对来说比较复杂
2.JQuery对象只能通过JQuery语法获取，在操作上比JS对象要简单很多
```
#### 1.3.3.JQuery对象和JS对象的相互转换
**目标**
```
1.掌握JQuery对象和JS对象的转换
```
**语法**
- JQuery对象转化为JS对象： jq对象[索引] 或者 jq对象.get(索引)
- JS对象转化为JQuery对象：$(js对象)
**案例**
**1.在03-JQuery对象和js对象的转换.html的js本区域编写代码。**
**2.JS对象转化为JQuery对象**
```javascript
for (var i = 0; i < divs.length; i++) {
//divs[i].innerHTML = "aaa";
$(divs[i]).html("ccc");
}
```
**3.浏览器打开，查看效果**
**4.JQuery对象转化为JS对象**
```javascript
//将第一个div的内容改为ddd,将第二个div的内容改为eee
$divs[0].innerHTML = "ddd";
$divs.get(1).innerHTML = "eee";
```
**5.浏览器打开，查看效果**
**小结**
```
1.JQuery对象转化为JS对象： jq对象[索引] 或者 jq对象.get(索引)
2.JS对象转化为JQuery对象：$(js对象)
```
### 1.4.基本操作
**目标**
```
1.掌握Jquery的事件绑定的方式
2.了解Jquery的入口函数
4.掌握Jquery控制css样式
```
#### 1.4.1 事件绑定
**案例**
**1.创建一个页面，名称为04-事件绑定.html，在js区域编写代码。**
```javascript
$("#b1").click(function(){
alert("abc");
});
```
**2.浏览器打开，查看效果**
当然，除了可以绑定click()点击事件之外，也可以绑定其他点击事件，比如submit()、blur()事件。
#### 1.4.2 入口函数
**JS的写法**
**1.在页面的js区域，编写代码**
```javascript
window.onload = function(){
//1.获取b1按钮
$("#b1").click(function(){
alert("abc");
});
}
```
**2.浏览器打开，查看效果**
**JQuery的写法**
**1.在js中注释掉其他代码，编写以下代码**
```javascript
//jquery入口函数(dom文档加载完成之后执行该函数中的代码)
$(function () {
//1.获取b1按钮
$("#b1").click(function(){
alert("abc");
});
});
```
**2.浏览打开，查看效果**
**两种入口函数的区别**
window.onload和$(function(){})都能实现dom文档加载完成之后再执行函数代码的操作，那window.onload和$(function(){})有什么区别？主要有以下两点区别：
- window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
- $(function)可以定义多次的
下面针对这两个区别来一一进行讲解。
- **window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉**
**案例**
**1.在js中注释掉其他代码，编写以下代码**
```javascript
window.onload = function fun1(){
alert("abc");
}
window.onload = function fun1(){
alert("bcd");
}
```
**2.浏览器打开，查看效果**
我们定义了两个window.onload，但是用浏览器打开的时候，发现只弹出了bcd,并没有弹出abc,说明后面的将前面的覆盖掉了。
- **$(function(){})可以定义多次的。**
**案例**
**1.在js中注释掉其他代码，编写以下代码**
```javascript
$(function(){
alert(123);
});
$(function(){
alert(234);
});
```
**2.浏览器打开，查看效果**
用浏览器打开，查看效果，发现123和234都弹出来了，所以呢$(function)是可以定义多次的。
#### 1.4.3 样式控制
JQuery要实现样式控制，需要使用到其中的css()函数来进行实现，接下来通过一个案例来具体介绍一下。
**案例**
案例需求：给id为div1的div设置背景色
**方式一**
**1.在js中注释掉其他代码，编写以下代码**
```javascript
$(function(){
$("#div1").css("background-color","red");
});
```
**2.浏览器打开，查看效果**
**方式二**
**1.在js中注释掉其他代码，编写以下代码**
```javascript
$(function(){
$("#div1").css("backgroundColor","pink");
});
```
**2.浏览器打开，查看效果**
**小结**
```
1.JQuery绑定事件采用的是$("#b1").click(function(){})，当然除了click事件也可以绑定其他事件
2.JQuery的入口函数采用的$(function () {})来实现
3.JQuery的样式控制$("#div1").css("","")来实现
```
### 1.5.JQuery选择器
**目标**
```
1.了解什么是选择器及基本使用语法和作用
2.掌握基本选择器
2.掌握属性选择器
```
#### 1.5.1 选择器概述
**目标**
```
1.了解什么是选择器及基本使用语法和作用
```
**选择器是什么**
Jquery中的选择器，指的是用来获取页面元素的一种特殊语法，与CSS中的选择器类似 。
**使用语法**
```javascript
var el = $("选择器");
```
**作用**
用来筛选获取页面标签元素。
**小结**
```
1.JQuery的选择器类似于CSS的选择器,CSS的选择器在筛选出标签之后，可以来控制它们的样式，而JQuery的选择器是在筛选出标签之后，可以来操作它们的方法、属性等。
2.JQuery选择器的使用语法为$("选择器")
3.JQuery选择器的作用就是用来筛选获取页面标签元素
```
#### 1.5.3 基本选择器
**目标**
```
1.理解JQuery中基本选择器的使用
```
**分类**
- id选择器
- 标签选择器（元素选择器）
- 类选择器
- 并集选择器
**准备工作**
将资料中的选择器目录拷贝到项目中。用浏览器打开01-基本选择器.html，查看页面，每个按钮上都有字，字就是点击按钮实现的效果。
**id选择器**
语法：$("#id的属性值") 获得与指定id属性值匹配的元素
**案例**
**1.在01-基本选择器.html的js区域，给id为b1的按钮绑定点击事件**
```javascript
$("#b1").click(function () {}
```
**2.在其中通过id选择器筛选对应的标签，并设置样式**
```javascript
$("#b1").click(function () {
$("#one").css("backgroundColor","pink");
});
```
**3.浏览器打开，查看效果**
**标签选择器（元素选择器）**
语法：语法： $("html标签名") 获得所有匹配标签名称的元素
**案例**
**1.在01-基本选择器.html的js区域，给id为b2的按钮绑定点击事件**
```javascript
$("#b2").click(function () {});
```
**2.在其中通过标签选择器筛选对应的标签，并设置样式**
```javascript
$("#b2").click(function () {
$("div").css("backgroundColor","pink");
});
```
**3.浏览器打开，查看效果**
**类选择器**
语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
**案例**
**1.在01-基本选择器.html的js区域，给id为b3的按钮绑定点击事件**
```javascript
$("#b3").click(function () {}
```
**2.在其中通过类选择器筛选对应的标签，并设置样式**
```javascript
$("#b3").click(function () {
$(".mini").css("backgroundColor","pink");
});
```
**3.浏览器打开，查看效果**
**并集选择器**
语法：$("选择器1,选择器2....") 获取多个选择器选中的所有元素
**案例**
**1.在01-基本选择器.html的js区域，给id为b4的按钮绑定点击事件**
```javascript
$("#b4").click(function () {}
```
**2.在其中通过并集选择器筛选对应的标签，并设置样式**
```javascript
$("#b4").click(function () {
$("span,#two").css("backgroundColor","pink");
});
```
**3.浏览器打开，查看效果**
**小结**
```javascript
1. 标签选择器（元素选择器）
* 语法： $("html标签名") 获得所有匹配标签名称的元素
2. id选择器
* 语法： $("#id的属性值") 获得与指定id属性值匹配的元素
3. 类选择器
* 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
4. 并集选择器：
* 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
```
#### 1.5.4 属性选择器
**目标**
```
1.理解JQuery中属性选择器的使用
```
**分类**
- 属性名称选择器
- 属性选择器
- 复合属性选择器
**准备工作**
浏览器打开02-属性选择器.html，查看页面，每个按钮上都有字，字就是点击按钮实现的效果。
**属性名称选择器**
语法：$("A[属性名]") 包含指定属性的选择器
**案例**
**1.在02-属性选择器.html的js区域，给id为b1的按钮绑定点击事件**
```javascript
$("#b1").click(function () {}
```
**2.在其中通过属性名称选择器筛选对应的标签，并设置样式**
```javascript
$("#b1").click(function () {
$("div[title]").css("backgroundColor","pink");
});
```
**3.浏览器打开，查看效果**
**属性选择器**
**语法**
- $("A[属性名='值']") 指定属性等于指定值的选择器
- $("A[属性名!='值']") 指定属性不等于指定值的选择器
- $("A[属性名^='值']") 指定属性以指定值开头的选择器
- $("A[属性名$='值']") 指定属性以指定值结尾的选择器
- $("A[属性名*='值']") 指定属性包含指定值的选择器
**案例1**
**1.在02-属性选择器.html的js区域，给id为b2的按钮绑定点击事件**
```javascript
$("#b2").click(function () {}
```
**2.在其中通过属性选择器筛选对应的标签，并设置样式**
```javascript
$("#b2").click(function () {
$("div[title='test']").css("backgroundColor","pink");
});
```
**3.浏览器打开，查看效果**
**案例2**
**1.在02-属性选择器.html的js区域，给id为b3的按钮绑定点击事件**
```javascript
$("#b3").click(function () {}
```
**2.在其中通过属性选择器筛选对应的标签，并设置样式**
```javascript
$("#b3").click(function () {
$("div[title!='test']").css("backgroundColor","pink");
});
```
**3.浏览器打开，查看效果**
**案例3**
**1.在02-属性选择器.html的js区域，给id为b4的按钮绑定点击事件**
```javascript
$("#b4").click(function () {}
```
**2.在其中通过属性选择器筛选对应的标签，并设置样式**
```javascript
$("#b4").click(function () {
$("div[title^='test']").css("backgroundColor","pink");
});
```
**3.浏览器打开，查看效果**
**案例4**
**1.在02-属性选择器.html的js区域，给id为b5的按钮绑定点击事件**
```javascript
$("#b5").click(function () {}
```
**2.在其中通过属性选择器筛选对应的标签，并设置样式**
```javascript
$("#b5").click(function () {
$("div[title$='est']").css("backgroundColor","pink");
});
```
**3.浏览器打开，查看效果**
**案例5**
**1.在02-属性选择器.html的js区域，给id为b6的按钮绑定点击事件**
```javascript
$("#b6").click(function () {}
```
**2.在其中通过属性选择器筛选对应的标签，并设置样式**
```javascript
$("#b6").click(function () {
$("div[title*='es']").css("backgroundColor","pink");
});
```
**3.浏览器打开，查看效果**
**复合属性选择器**
语法：$("A\[属性名='值'][]...") 包含多个属性条件的选择器
**案例**
**1.在02-属性选择器.html的js区域，给id为b7的按钮绑定点击事件**
```javascript
$("#b7").click(function () {}
```
**2.在其中通过属性选择器筛选对应的标签，并设置样式**
```javascript
$("#b7").click(function () {
$("div[id][title*='es']").css("backgroundColor","pink");
});
```
**3.浏览器打开，查看效果**
**小结**
```javascript
1. 属性名称选择器
* 语法： $("A[属性名]") 包含指定属性的选择器
2. 属性选择器
* 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器
3. 复合属性选择器
* 语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器
```
### 1.6.常见DOM操作
**目标**
```
1.掌握Jquery操作元素内容的方式
2.掌握Jquery操作元素属性的方式
```
#### 1.6.1 操作元素内容
**目标**
```
1.掌握Jquery操作元素内容的三种方式
```
**相关API**
```javascript
1. html(): 获取/设置元素的标签体内容
2. text(): 获取/设置元素的标签体纯文本内容
3. val()： 获取/设置元素的value属性值
```
**案例**
**准备工作**
将资料中的dom操作目录拷贝到项目中，浏览器打开01-html&text&val.html。
**val()操作**
**获取输入框的value属性的值**
**1.在01-html&text&val.html页面中编写js代码**
```javascript
// 获取myinput 的value值
var value = $("#myinput").val();
alert(value);
```
**2.浏览器打开，查看效果**
**设置输入框的value属性的值**
**1.在01-html&text&val.html页面中注释其他代码，编写js代码**
```javascript
$("#myinput").val("李四");
```
**2.浏览器打开，查看效果**
**html()操作**
**获取div的标签体内容**
**1.在01-html&text&val.html页面中注释其他代码，编写js代码**
```javascript
//获取mydiv的标签体内容
var html = $("#mydiv").html();
alert(html);
```
**2.浏览器打开，查看效果**
**设置div的标签体内容**
**1.在01-html&text&val.html页面中注释其他代码，编写js代码**
```javascript
$("#mydiv").html("<p>aaaa</p>");
```
**2.浏览器打开，查看效果**
**text()操作**
**获取div标签的纯文本内容**
**1.在01-html&text&val.html页面中注释其他代码，编写js代码**
```javascript
// 获取mydiv文本内容
var text = $("#mydiv").text();
alert(text);
```
**2.浏览器打开，查看效果**
**设置div标签的纯文本内容**
**1.在01-html&text&val.html页面中注释其他代码，编写js代码**
```javascript
$("#mydiv").text("bbb");
```
**2.浏览器打开，查看效果**
**小结**
```
1.html()获取/设置元素的标签体内容
2.text()获取/设置元素的标签体纯文本内容
3.val()获取/设置元素的value属性值
```
#### 1.6.2 操作元素属性
**目标**
```
1.掌握Jquery操作元素属性的方式
```
Jquery操作元素属性的方式分为两种
- 通用属性操作
- 对class属性操作
##### 1.6.2.1.通用属性操作
**目标**
```
1.掌握Jquery操作通用属性的操作
```
**相关API**
```javascript
1. attr(): 获取/设置元素的属性
2. removeAttr():删除属性
3. prop():获取/设置元素的属性
4. removeProp():删除属性
```
**案例**
**准备工作**
浏览器打开02-prop.html页面，查看页面内容
**获取节点的name属性**
**1.在02-prop.html页面中注释其他代码，编写js代码**
```javascript
//获取北京节点的name属性值
var name = $("#bj").attr("name");
alert(name);
```
**2.浏览器打开，查看效果**
**设置节点的name属性的值**
**1.在02-prop.html页面中注释其他代码，编写js代码**
```javascript
$("#bj").attr("name","dabeijing");
```
**2.浏览器打开，按F12，查看效果**
**新增节点属性**
**1.在02-prop.html页面中注释其他代码，编写js代码**
```javascript
$("#bj").attr("discription","didu");
```
**2.浏览器打开，查看效果**
**删除节点属性**
**1.在02-prop.html页面中注释其他代码，编写js代码**
```javascript
$("#bj").removeAttr("name");
```
**2.浏览器打开，查看效果**
**获取选中状态**
**获取选中状态其实就是获取input标签的checked的值。**
**1.在02-prop.html页面中注释其他代码，编写js代码**
```javascript
var checked = $("#hobby").prop("checked");
alert(checked);
```
**2.浏览器打开，查看效果**
**3.使用attr()方式来获取**
```javascript
var checked = $("#hobby").attr("checked"); //获取不到，弹出undefined
alert(checked);
```
**4.浏览器打开，查看效果**
那为什么之前的使用attr可以获取到，但是这个使用attr会获取不到，而使用prop就会获取到，
**attr和prop的区别**
- 如果操作的是元素的固有属性，则建议使用prop。
- 如果操作的是元素自定义的属性，则建议使用attr。
**小结**
```
1.Jquery操作元素属性可以使用attr()或者prop()操作，prop()是操作元素的固有属性，attr()是操作元素的自定义属性
```
##### 1.6.2.2 对class属性操作
**目标**
```
1.掌握Jquery操作class属性的操作
```
**相关API**
```
1. addClass():添加class属性值
2. removeClass():删除class属性值
3. toggleClass():切换class属性,如果存在（不存在）就删除（添加）一个类。例如：toggleClass("one"): 判断如果元素对象上存在class="one"，则将属性值one删除掉。如果元素对象上不存在class="one"，则添加。
```
**案例**
**准备工作**
**浏览器打开03-class&css.html页面，查看页面效果，按钮中的文本就是案例需求**
**使用通用方式增加class属性**
**1.在03-class&css.html页面中，编写js代码**
```javascript
$("#b1").click(function () {
$("#one").prop("class","second");
});
```
**2.浏览器打开，查看效果**
**使用addClass()增加class属性**
**1.在03-class&css.html页面中注释其他代码，编写js代码**
```javascript
$("#b2").click(function () {
$("#one").addClass("second");
});
```
**2.浏览器打开，查看效果**
**使用removeClass()删除class属性**
**1.在03-class&css.html页面中注释其他代码，编写js代码**
```javascript
$("#b3").click(function () {
$("#one").removeClass("second");
});
```
**2.浏览器打开，查看效果**
**使用toggleClass()切换class属性**
**1.在03-class&css.html页面中注释其他代码，编写js代码**
```javascript
$("#b4").click(function () {
$("#one").toggleClass("second");
});
```
**2.浏览器打开，查看效果**
**小结**
```
1.addClass():添加class属性值
2.removeClass():删除class属性值
3.toggleClass():切换class属性
```
### 1.7.JQuery遍历
**目标**
```
1.掌握Jquery中的遍历方式
```
**遍历实现方式两种**
- js的遍历方式
- Jquery的遍历方式
- jq对象.each(callback)
- $.each(object, [callback])
- for(元素对象 of 容器对象) （ jquery 3.0 版本之后提供的方式）
**案例**
**准备工作**
将资料中的jquery遍历目录拷贝到项目中，浏览器打开01-遍历.html页面，查看页面内容
**案例需求**
将li标签中的文本内容全部获取到
#### **1.7.1JS的遍历方式**
**1.在01-遍历.html页面中，编写js代码**
```javascript
$(function(){
//1.获取ul下的所有li
var citys = $("li");
//2.遍历li
for (var i=0;i<citys.length;i++){
//获取内容
alert(i+":"+citys[i].innerHTML);
}
});
```
**2.浏览器打开，查看效果**
#### **1.7.2.Jquery的遍历方式**
**jq对象.each(callback)方式遍历**
jq对象.each(callback)中的callback是回调函数，本质就是一个function(){}
**1.在01-遍历.html页面的js区域注释其他代码，编写js代码**
```javascript
citys.each(function(index,element){
//获取li对象
//第一种方式,无法获取索引
//alert(this.innerHTML);
//第二种方式，在回调函数中定义参数，index(索引) element(元素对象)
alert(index+":"+element.innerHTML);
})
```
**2.浏览器打开，查看效果**
**$.each(object, [callback])方式遍历**
**1.在01-遍历.html页面的js区域注释其他代码，编写js代码**
```javascript
//citys : 要遍历的对象，可以是js对象或者jquery对象
//function中的操作和jq对象.each(callback)中是一样的
$.each(citys,function(){
alert($(this).html());
})
```
**2.浏览器打开，查看效果**
**for(元素对象 of 容器对象)方式遍历**
**1.在01-遍历.html页面的js区域注释其他代码，编写js代码**
```javascript
for(li of citys){
alert($(li).html());
}
```
**2.浏览器打开，查看效果**
**小结**
```
1. jquery对象.each(function(index,element){});
2. $.each(object, function(index,element){})
3. for(元素对象 of 容器对象)
```
### 1.8.JQuery绑定事件
**目标**
```
1.掌握JQuery的标准绑定事件方式
2.了解JQuery的绑定事件函数on
3.了解JQuery的解绑函数off
4.了解JQuery的toggle事件切换
```
#### 1.8.1 JQuery标准的绑定方式
目标
```
1.掌握JQuery的标准绑定事件方式
```
**语法**
```javascript
jq对象.事件方法(回调函数)；
```
**注意**
如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
例如：表单对象.submit(); //让表单提交
案例
**准备工作**
将资料中的jquery事件绑定与解绑目录拷贝到项目中，打开01-绑定事件.html页面，查看内容
**给input输入框绑定一个点击事件**
**1.在01-绑定事件.html页面中编写js代码**
```javascript
$(function () {
//1.获取name对象，绑定click事件
$("#name").click(function(){
alert("我被点击了....")
});
})
```
**2.浏览器打开，查看效果**
**给name绑定鼠标移动到元素之上事件，绑定鼠标移出事件**
**1.在01-绑定事件.html页面注释其他代码，编写js代码**
```javascript
$("#name").mouseover(function(){
alert("鼠标来了...");
});
$("#name").mouseout(function(){
alert("鼠标走了...");
});
```
**2.浏览器打开，查看效果**
**3.其实这个操作是可以简化的，可以编写成链式编程**
```javascript
$("#name").mouseover(function(){
alert("鼠标来了...");
}).mouseout(function(){
alert("鼠标走了...");
});
```
但是这种方式不建议你写好多个，因为写好多个阅读起来不太方便。那除了上面的事件可以绑定之外，我们也可以绑定其他事件。
**注意事项**
那这里我们演示一个问题，比如focus事件，获取焦点的事件。
**1.在01-绑定事件.html页面注释其他代码，编写js代码**
```javascript
alert("我要获得焦点了...")
$("#name").focus();//让文本输入框获得焦点
```
这里面呢，我们没有写回调函数，如果不写回调函数，会自动触发浏览器默认的回调事件。
**2.浏览器打开，查看效果**
所以当绑定一个事件，不设置回调函数的话，会自动触发浏览器默认的回到函数，类似事件还有submit事件（表单对象.submit()），你可以设置回调函数进行操作，你可以不设置，不设置会直接触发浏览器默认的提交表单操作。
**小结**
```
1.可以采用jq对象.事件方法(回调函数)；来实现标准的绑定事件，需要注意的是如果不设置回调函数，将会触发浏览器默认的事件。
```
#### 1.8.2 on绑定事件&off解除绑定
**目标**
```
1.了解on绑定事件操作
2.了解off解除绑定操作
```
**语法**
on绑定事件语法
```javascript
jq对象.on("事件名称",回调函数)
```
off解除绑定语法
```
jq对象.off("事件名称");
```
**案例**
打开02-on绑定事件.html页面，查看内容
**需求**
给“使用on绑定点击事件”按钮绑定事件，点击“使用off解绑点击事件”按钮对“使用on绑定点击事件”按钮解绑事件。
**1.在02-on绑定事件.html页面编写js代码**
```javascript
$(function(){
//1.使用on给按钮绑定单击事件，click
$("#btn").on("click",function(){
alert("我被点击了...")
});
//2.使用off解除btn按钮的单击事件
$("#btn2").click(function(){
//解除btn按钮的单击事件
$("#btn").off("click");
})
});
```
**2.浏览器打开，查看效果**
当页面加载出来就会给按钮设置点击事件，当点击第二个按钮就会解除绑定单击事件。
**3.如果off不传递任何参数，将会将组件上的所有的事件解绑**
```javascript
$("#btn").off();//将组件上的所有事件全部解绑
```
**4.浏览器打开，查看效果**
**小结**
```
1.使用jq对象.on("事件名称",回调函数)来绑定事件
2.使用jq对象.off("事件名称");来进行解绑事件，如果写成jq对象.off();会将该jq对象上的所有事件解绑
```
#### 1.8.3 事件切换
目标
```
了解JQuery的事件切换
```
**语法**
```javascript
jq对象.toggle(fn1,fn2...);
```
当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....
**案例**
打开03-事件切换.html页面，查看内容
**需求**
点击按钮变成绿色，再次点击粉红色
**1.在03-事件切换.html页面编写js代码**
```javascript
$("#btn").toggle(function(){
//改变div背景色backgroundColor 颜色为 green
$("#myDiv").css("backgroundColor","green");
},function(){
//改变div背景色backgroundColor 颜色为 pink
$("#myDiv").css("backgroundColor","pink");
})
```
**2.浏览器打开，查看效果，发现不行**
原因，JQuery 1.9之后将toggle移除了，需要借助migrate插件来恢复此功能。
**3.将资料中的jquery-migrate-1.0.0.js拷贝到项目中，引入到03-事件切换.html页面中**
**4.浏览器打开，查看效果**
**小结**
```
1.使用toggle可以实现事件切换，语法是：jq对象.toggle(fn1,fn2...);，但是要注意的是在jquery 1.9的时候移除了此功能，需要借助jQuery Migrate插件来恢复此功能
```
## 2.Ajax
### 2.1 Ajax概述
**目标**
```
1.了解Ajax是什么
```
**Ajax是什么**
ASynchronous JavaScript And XML 异步的JavaScript 和 XML
**Ajax能做什么**
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。提升用户的体验。
**小结**
```
Ajax是一个用来提高用户体验度的一个技术,可以实现页面的局部刷新
```
### 2.2.异步和同步
### 2.3 JQuery原生方式实现Ajax
**目标**
```
1.理解通过Ajax请求访问服务器的方式
```
Ajax请求访问服务器的方式有三种
- $.ajax()
- $.get()
- $.post()
#### 2.3.1 $.ajax()方式实现
**目标**
```
1.理解通过$.ajax()实现请求访问服务器方式
```
**语法**
```javascript
$.ajax({ 键值对 });
```
**案例**
**1.创建JavaEE Web项目，名称为AjaxDemo**
**2.创建html页面，名称为Ajax请求.html**
**3.在页面中编写js代码**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script>
//定义方法
function fun() {
//使用$.ajax()发送异步请求
$.ajax({
url:"/AjaxDemo/ajaxServlet",//请求路径
type:"POST",//请求方式
//data:"username=zhangsan&age=23",//请求参数
data:{"username":"zhangsan","age":23},
success:function (data) {
alert(data)
},//响应成功回调的函数
error:function () {
alert("出错了...")
},//表示如果请求响应出现错误，会执行的回调函数
datatype:"text"//设置接受到的响应数据的格式
})
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" οnclick="fun();"><input>
</body>
</html>
```
注意：键值对之间要以“,”分隔，不然会报错，但是最后一个键值对可以不写“,”。
**4.创建servlet，编写代码**
```java
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset-utf-8");
String username = request.getParameter("username");
response.getWriter().write("hello,"+username);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
}
```
**5.启动tomcat，运行测试**
**小结**
```
使用$.ajax({ 键值对 });可以实现请求访问服务器操作，其中的键值对要以“,”分隔，最后一个键值对可以不写“,”常用的键值对有四个“url,type,data,success”
```
#### 2.3.2 $.get()方式实现
**目标**
```
1.理解通过$.get()请求访问服务器操作
```
**作用**
发送Get请求
**语法:**
```javascript
$.get(url, [data], [callback], [type])
```
**参数:**
```javascript
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
```
**案例**
**1.拷贝Ajax请求.html页面，改名为Ajax请求_Get.html**
**2.在页面中编写js代码**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script>
//定义方法
function fun() {
$.get("/AjaxDemo/ajaxServlet",{username:"rose"},function(data){
alert(data);
},"text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" οnclick="fun();"><input>
</body>
</html>
```
注意：键值对之间要以“,”分隔，不然会报错，但是最后一个键值对可以不写“,”。
**4.创建servlet，编写代码**
```java
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset-utf-8");
String username = request.getParameter("username");
response.getWriter().write("hello,"+username);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
}
```
**5.启动tomcat，运行测试**
**小结**
```
使用$.ajax({ 键值对 });可以实现请求访问服务器操作，其中的键值对要以“,”分隔，最后一个键值对可以不写“,”常用的键值对有四个“url,type,data,success”
```
#### 2.3.2 $.get()方式实现
**目标**
```
1.理解通过$.get()请求访问服务器操作
```
**作用**
发送Get请求
**语法:**
```javascript
$.get(url, [data], [callback], [type])
```
**参数:**
```javascript
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
```
**案例**
**1.拷贝Ajax请求.html页面，改名为Ajax请求_Get.html**
**2.在页面中编写js代码**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script>
//定义方法
function fun() {
$.get("/AjaxDemo/ajaxServlet",{username:"rose"},function(data){
alert(data);
},"text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" οnclick="fun();"><input>
</body>
</html>
```
**3.启动tomcat,运行测试**
**小结**
```
1.通过$.get()请求服务器的语法：$.get(请求路径, 请求参数, 回调函数, 响应结果的类型)
```
#### 2.3.3 $.post()方式实现
**目标**
```
1.理解通过$.post()请求访问服务器操作
```
**作用**
发送Post请求
**语法:**
```javascript
$.post(url, [data], [callback], [type])
```
**参数:**
```javascript
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
```
**案例**
**1.拷贝Ajax请求_Get.html页面，改名为Ajax请求_Post.html**
**2.在页面中编写js代码**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script>
//定义方法
function fun() {
$.post("/AjaxDemo/ajaxServlet",{username:"rose"},function(data){
alert(data);
},"text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" οnclick="fun();"><input>
</body>
</html>
```
我们会发现，$.post()请求和$.get()请求写法上是一样的，只是请求方式换了换。
**3.启动tomcat,运行测试**
**小结**
```
1.通过$.post()请求访问服务器的语法是：$.post(请求路径, 请求参数, 回调函数, 响应结果的类型)
```
304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
