Web前端知识点总结

1. B/S架构资源

静态资源：使用静态网页开发技术发布的资源

所有用户访问，得到的结果是一样的。

如：文本，图片，音频、视频, HTML,CSS,JavaScript。

如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏器。

用HTML搭建基础网页，用CSS美化、布局页面，用JavaScript控制页面的元素，让页面有动态效果。

动态资源：使用动态网页及时发布的资源

所有用户访问，得到的结果可能不一样。

如：jsp/servlet,php,asp…。

如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。

2. HTML

1	Hyper Text Markup Language 超文本标记语言，是最基础的网页开发语言

超文本：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本

标记语言：由标签<标签名称> 构成的语言，如html、xml，不属于编程语言。

标签：标签可以嵌套，不区分大小写，建议用小写，分为两类：

围堵标签：有开始标签和结束标签。如

自闭标签：开始标签和结束标签在一起。如 < br/>

标签	说明	属性
< html>	文档的根标签
< head>	头标签，用于指定html文档的一些属性，引入外部的资源
< title>	标题标签
< body>	体标签
< !DOCTYPE html >	html5中定义该文档是html文档
< !– 注释内容 – >	注释
< h1> to < h6>	标题标签，h1到h6字体大小逐渐递减
< p>	段落标签
< br/>	换行标签
< hr>	展示一条水平线	color/width/size/align
< b>	字体加粗
< i>	字体斜体
< font>	字体标签	color/face/size
< center>	文本居中
< img src=” “ alt=” “>	展示图片（src为图片URL，alt为图片替代文本）	align/height/width
< ol> < li>< /li> < /ol>	有序列表	type
< ul> < li>< /li> < /ul>	无序列表	type
< a href=””>< /a>	超链接标签	target( _self/ _blank)
< div>	块级标签
< span>	行内标签
< header>	页眉
< footer>	页脚

超链接的功能：1. 生成可以被点击的样式； 2. 点击后跳转到href指定的url

若需要保留1功能，去掉2功能，则：href = "javascript:void(0)"

3. 表格标签

table：定义表格

width：宽度

border：边框

cellpadding：定义内容和单元格的距离

cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条

bgcolor：背景色

align：对齐方式

tr：定义行

bgcolor：背景色

align：对齐方式

td：定义单元格

colspan：合并列

rowspan：合并行

th：定义表头单元格

4. 表单标签

1	用于采集用户输入的数据，和服务器进行交互的标签。

action：指定提交数据的URL，若是写一个#，那么就是提交到本页面

method：指定提交方式，表单项中的数据要想被提交，必须指定其name属性

get：请求参数会在地址栏中显示，参数大小不能超过255，不太安全

post：请求参数不会在地址栏中显示，参数的大小没有限制，多用于提交视频和图片，比较安全

input：可以通过type属性值，改变元素展示的样式

text：文本输入框，默认值（参数placeholder：指定输入框的提示信息）

password：密码输入框

radio：单选框，多个单选框的name属性值必须一样，在value属性中指定其被选中后提交的值

checkbox：在value属性中指定其被选中后提交的值

file：文件选择框

hidden：隐藏域，用于提交一些信息，不需要用户输入

submit：提交按钮，可以提交表单

image：图片提交按钮，src属性指定图片的路径

label：label的for属性一般会和input的id属性值对应。点击label区域，会让对应的input输入框获取焦点

select：下拉列表，子元素option为指定列表项

textarea：文本域，cols：指定列数， rows：默认多少行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FormTest</title>
</head>
<body>

<form action="#" method="get">
    姓名：<input type="text" placeholder="请输入姓名" name = "username"> <br>
    密码：<input type="password" placeholder="请输入密码" name="password"> <br>
    性别：<input type="radio" name = "gender" value="男"> 男
          <input type="radio" name = "gender" value="女"> 女<br>
    爱好：<input type="checkbox" name = "hobby" value = 1> 小米
          <input type="checkbox" name = "hobby" value = 2> 华为
          <input type="checkbox" name = "hobby" value = 3> 锤子<br>
    <label for="file">文件</label>：<input type="file" id="file"><br>
    隐藏：<input type="hidden"><br>
    提交：<input type="submit" value="提交"><br>
	图片提交：<input type="image" src="baidu.png"><br>
    地区：<select name="place" id="place" ><br>
    <option>请选择地区</option>
    <option value ="北京">北京</option>
    <option value="深圳">深圳</option>
    <option value="厦门">厦门</option>
    </select>
</form>
</body>
</html>

5. CCS

1
2

Cascading Style Sheets 层叠样式表，多个样式可以作用在同一个html的元素上，用于页面美化和布局控制
好处：功能强大，将内容展示和样式控制分离，易于分工合作，提高效率，同时可以使页面中的样式得以复用。

CCS与Html的结合：
内联样式：在标签内使用style属性指定css代码：

<div style="color:red;">hello css</div>
内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码：
1
2
3
4
5
6
7
8
9
>    <head>
>        <style>
>            div{color:blue;}
>        </style>
>    </head>
>    <body>
>    	<div>hello css</div>
>    </body>
>

外部样式：先定义css资源文件，再在head标签内，定义link标签，引入外部的资源文件

<link rel="stylesheet" href="css/a.css">

（也可以写为：<style> @import "a.css"; </style>）

6. CCS选择器

选择器：筛选具有相似特征的元素
选择器 {
		属性名1:属性值1;
		属性名2:属性值2;
		...
		}

基础选择器：

id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一。语法：#id属性值{}

类选择器：选择具有相同的class属性值的元素。语法：.class属性值{}

元素选择器：选择具有相同标签名称的元素。语法：标签名称{}

扩展选择器：

选择所有元素。语法：*{}

并集选择器：同时筛选多个选择器。语法：选择器1,选择器2{}

子选择器：筛选选择器1元素下的选择器2元素。语法：选择器1 选择器2{}

直系父选择器：筛选选择器2的父元素选择器1。语法：选择器1 > 选择器2{}

属性选择器：选择元素名称，属性名=属性值的元素。语法：元素名称[属性名="属性值"]{}

伪类选择器：选择一些元素具有的状态。语法：元素：状态{} 如：超链接标签 < a>：

a:link{}：初始化的状态

a:visited{}：被访问过的状态

a:active{}：正在访问状态

a:hover{}：鼠标悬浮状态

7. CCS属性

字体、文本：

font-size：字体大小

color：文本颜色

text-align：对齐方式

line-height：行高

背景background：可以设置背景色或填充图片

边框border：设置边框，符合属性

尺寸width：宽度height：高度

盒子模型：控制布局

margin：外边距

padding：内边距，默认情况下内边距会影响整个盒子的大小

box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小

浮动：float，脱离文档流布局（靠左：left；靠右：right）

8. JavaScript基本语法

JavaScript是一门客户端脚本语言，运行在客户端的浏览器中，每一个浏览器都有JavaScript的解析引擎。
JS可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
脚本语言：不需要编译，可以直接被浏览器内核解析执行的语言。
客户端脚本语言的标准：ECMAScript，统一了所有客户端脚本语言的编码方式。

结合html

内部JS：定义< script>，标签体内容就是js代码
外部JS：定义< script>，通过src属性引入外部的js文件

注意： < script>可以定义多个，可以定义在html页面的任何地方，但是定义的位置会影响执行顺序。

建议书写位置：1. head标题中 2. body最下方

数据类型

原始数据类型：五种

number：数字。包含整数、小数、NaN(Not a Number,代表不是数字的数字类型)

string：字符串。 “abc”、 “a”、 ‘abc’

boolean：true和false

null：一个对象为空的占位符(注意：null运算是其typeof类型为object，属设计错误)

undefined：未定义。一个没有初始化的变量，会被默认赋值为undefined

引用数据类型：对象

变量

1	JavaScript是弱类型语言，定义变量的语法：var 变量名 = 初始化值

强类型：在开辟变量存储空间时，定义了空间将来存储数据的数据类型。只能存储固定类型的数据。

弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

运算符

被正负号修饰的运算数（+(-)）会自动转换为number类型，如果字面值不是数字，则转为NaN，true转为1，false转为0。

==：直接比较字面值，类型不同时，先进行类型转换，再比较

===：全等于，在比较之前，先判断类型，如果类型不一样，则直接返回false

进行逻辑运算时：

number：0或NaN为假，其他为真

string：除了空字符串(“”)，其他都是true

null&undefined:都是false

对象：所有对象都为true

9. JavaScript基本对象

Function:函数对象

创建：
var fun = new Function(形式参数列表,方法体)；

function 方法名称(形式参数列表){
方法体
}
var 方法名 = function(形式参数列表){
方法体
}
方法：

length:代表形参的个数

特点：

JS中不存在方法重载，方法的调用只与方法的名称有关，和参数列表无关

方法是一个对象，如果定义名称相同的方法，后执行的方法会覆盖之前的方法

第二种创建方法执行优先级较高，若定义名称相同，会被第三种创建方法覆盖

在方法声明中有一个隐藏的内置对象（数组）arguments，封装所有的实际参数

Array:数组对象

创建：

var arr = new Array(元素列表);

var arr = new Array(默认长度);

var arr = [元素列表]

方法：

join(参数)：将数组中的元素按照指定的分隔符拼接为字符串

push(参数)：向数组的末尾添加一个或更多元素，并返回新的数组长度

特点：

JS中的数组长度可变，元素类型也可变。

Date:日期对象

创建：var date = new Date();

方法：
toLocaleString()：返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

RegExp:正则表达式对象

1	正则表达式也是一个字符串，是专门解决字符串规则匹配的工具，用来定义匹配规则

创建：

var reg = new RegExp(“正则表达式”);

var reg = /正则表达式/; （表达式不需要双引号，不需要加转义字符）

方法：

test(参数)：验证指定的字符串是否符合正则定义的规范

match(参数)：可以匹配正则，返回的是匹配正则的内容

表达式	含义
x	字符 x
\\	反斜线字符
[abc]	a、b 或 c（简单类）
[^abc]	任何字符，除了 a、b 或 c（否定）
[a-zA-Z]	a 到 z 或 A 到 Z，两头的字母包括在内（范围）
\w	单词字符：[a-zA-Z_0-9]
X?	X，一次或一次也没有
X*	X，零次或多次
X+	X，一次或多次
X{n}	X，恰好 n 次
X{n,}	X，至少 n 次
X{n,m}	X，至少 n 次，但是不超过 m 次
^	开始
$	结束

Global:全局对象

1	Global中封装的方法不需要对象就可以直接调用

方法：

encodeURI()：url编码

decodeURI()：url解码

encodeURIComponent()：url编码（编码的字符范围更大）

decodeURIComponent()：url解码

parseInt()：将字符串转为数字（逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number）

isNaN()：判断一个值是否是NaN（NaN六亲不认，连自己都不认。NaN参与的==比较全部问false）

eval()：将一个字符串转换为JS代码，并把它作为脚本代码来执行

10. BOM

1	Browser Object Model 浏览器对象模型：将浏览器的各个组成部分封装成为对象

Window:窗口对象

弹出框相关方法：

alert()：显示带有一段消息和一个确认按钮的警告框

confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。

如果用户点击确定按钮，则方法返回true

如果用户点击取消按钮，则方法返回false

prompt()：显示可提示用户输入的对话框，返回用户输入的值。

打开关闭窗口相关方法：

close()：关闭调用此方法的浏览器窗口

open()：打开一个新的浏览器窗口，返回新的window对象

定时器相关方法：

setTimeout(js代码或者方法对象，毫秒值)：在指定的毫秒数后调用函数或计算表达式

返回值：唯一标识，用于取消定时器

clearTimeout()：取消由 setTimeout() 方法设置的 timeout

setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式

clearInterval()：取消由 setInterval() 设置的 timeout

注意：Window可以获取其他BOM对象【history/location/navigator/screen】，DOM对象【document】。

Window对象不需要创建可以直接使用，window.方法名()，且window本身可省略

Location:地址栏对象

方法：reload()：重新加载当前文档，同刷新

History:历史记录对象

方法：

back()：加载 history 列表中的前一个 URL

forward()：加载 history 列表中的下一个 URL

go(参数)：加载 history 列表中的某个具体页面（参数：前进(正数)或后退(负数)几个历史记录）

length：返回当前窗口历史列表中的 URL 数量。

Navigator:浏览器对象

Screen:显示器屏幕对象

11. DOM

Document Object Model 文档对象模型：将标记语言文档的各个组成部分封装为对象。可以使用这些对象对标记语言文档进行CRUD的动态操作。
W3C标准中，DOM被分为三个不同的部分：
1. 核心DOM -针对任何结构化文档的标准模型
2. XML DOM -针对XML文档的标准模型
3. HTML DOM -针对HTML文档的标准模型

Document:文档对象

获取：在HTML DOM模型中可以通过window对象来获取

获取Element对象方法：

getElementById()：根据id属性值获取元素对象。

getElementsByTagName()：根据标签名称获取元素对象们，返回值是一个数组

getElementsByClassName()：根据Class属性值获取元素对象们，返回值是一个数组

getElementsByName()：根据name属性值获取元素对象们，返回值是一个数组

创建其他DOM对象方法：

createAttribute(name)：创建Attribute属性对象

createComment()：创建Comment注释对象

createElement()：创建Element元素对象

createTextNode()：创建Text文本对象

Element:元素对象

属性：

previousSibling：获取该元素的前一个节点

nextSibling：获取该元素的后一个节点

innerHTML：可以获取标签内所有的内容，包括标签

innerText：可以获取标签内所有的文本内容，不包括标签

方法：

removeAttribute()：删除属性

setAttribute()：设置属性

Node:节点对象

特点：所有dom对象都可以被认为是一个节点

属性：parentNode 返回节点的父节点

方法：

appendChild()：向节点的子节点列表的结尾添加新的子节点。

removeChild()：删除（并返回）当前节点的指定子节点。

replaceChild()：用新节点替换一个子节点。

Attribute:属性对象

Text:文本对象

Comment:注释对象

12. 事件监听机制

1	概念：某些组件（按钮，文本输入框...）被执行了某些操作（单击，双击，键盘按下，鼠标移动...）后，触发某些代码的执行。

常见的事件：

点击事件：

onclick：单击事件

ondblclick：双击事件

焦点事件：（input框里面有光标的时候，叫获取焦点）

onblur：失去焦点

onfocus：元素获得焦点

加载事件：

onload：在页面当中所有的内容加载完之后触发，常作为入口函数

window.onload = function(){}

鼠标事件：

onmousedown 鼠标按钮被按下

onmouseup 鼠标按键被松开

onmousemove 鼠标被移动

onmouseover 鼠标移到某元素之上

onmouseout 鼠标从某元素移开

键盘事件：

onkeydown 某个键盘按键被按下

onkeyup 某个键盘按键被松开

onkeypress 某个键盘按键被按下并松开

选择和改变：

onchange 域的内容被改变。失焦后触发

onselect 文本被选中

表单事件：

onsubmit 确认按钮被点击

onreset 重置按钮被点击

13. 综合案例

动态表格

<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">
</div>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
</table>

<script>
//给添加按钮绑定单击事件
document.getElementById("btn_add").onclick = function () {
	//获取文本框内容
    var id = document.getElementById("id").value;
    var name = document.getElementById("name").value;
    var gender = document.getElementById("gender").value;
    //将输入的内容添加到表格    
	var table = document.getElementsByTagName("table")[0];
	table.innerHTML += '<tr>\n' +'<td>'+ id +'</td>\n' +
		'<td>'+ name +'</td>\n' +'<td>'+ gender +'</td>\n' +
		'<td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>\n' +'</tr>';
}
//定义删除方法
function delTr(obj) {  //节点关系：a -> td -> tr -> table
	var table = obj.parentNode.parentNode.parentNode;
	var tr = obj.parentNode.parentNode;
	table.removeChild(tr);
}
</script>

表单校验

<script>
// 校验name的方法
function checkName() {
	var name = document.getElementById("name").value;
	var flag = /^[a-zA-Z]{1,12}$/.test(name);
	var name_add = document.getElementById("span_name");
	if(flag) {
		name_add.innerHTML = "<img height = '25' width = '35' " +"src = 'img/gou.png'>"
	}else{
		name_add.innerHTML = "姓名格式有误";
	}
	return flag;
}
</script>
<!--表单校验的第一种方式-->
var form = document.getElementById("form");
form.onsubmit = checkName;
<!--表单校验的第二种方式-->
<form action="#" id="form" onsubmit="return checkName()">
    ...
</form>

14. Bootstrap

1	一个前端开发的响应式布局框架，基于HTML、CSS、JavaScript开发，简洁灵活，使得 Web 开发更加快捷。

<!--快速入门：导入Bootstrap文件和jQuery包，创建html页面，引入必要的资源文件： -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都必须跟随其后！ -->
    <title>Index</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- Bootstrap中js插件都是依赖于jquery的，要第一步引入-->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
	<h1>Hello World！</h1>
</body>
</html>

响应式布局

1 2	响应式布局可以使同一套页面兼容不同分辨率的设备。实现方式依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子。

实现步骤：

定义容器：作用相当于< table>，样式：< div>

容器分类：1. container：两边留白； 2. container-fluid：每一种设备都是100%宽度

定义行：作用相当于< tr>，样式：< row>

定义元素：指定元素使用的设备和格子数目，样式：col-设备代号-格子数目

设备代号：

xs：超小屏幕手机 (<768px)

sm：小屏幕平板 (≥768px)

md：中等屏幕桌面显示器 (≥992px)

lg：大屏幕大桌面显示器 (≥1200px)

注意：

一行中如果格子数目超过12，则超出部分自动换行

栅格类属性可以向上兼容，小尺寸设备代号兼容大尺寸设备显示

如果设备真实宽度小于栅格指定的设备代码的临界值，会一个元素占满一整行

15. JQuery

jQuery是一个快速、简洁的JavaScript框架，封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互，本质上就是一些js文件。

JQuery对象和JS对象方法不通用，需要转换：

jq – > js：jq对象[索引] 或者 jq对象.get(索引)

js – > jq：$(js对象)

入口函数：$(function(){}); 与window.onload不同，可以定义多次

样式控制：$("#div1").css("backgroundColor","pink");

选择器操作

基本选择器

标签选择器(元素选择器)：$("html标签名")获得所有匹配标签名称的元素

id选择器：$("#id的属性值")获得与指定id属性值匹配的元素

类选择器：$(".class的属性值") 获得与指定的class属性值匹配的元素

并集选择器：$("选择器1,选择器2....")获取多个选择器选中的所有元素

层级选择器

后代选择器：$("A B") 选择A元素内部的所有B元素

子选择器：$("A > B") 选择A元素内部的所有B子元素

属性选择器

属性名称选择器：$("A[属性名]") 包含指定属性的选择器

属性选择器：$("A[属性名='值']") 包含指定属性等于指定值的选择器

复合属性选择器：$("A[属性名='值'][]...")包含多个属性条件的选择器

过滤选择器

首元素选择器：first 获得选择的元素中的第一个元素

尾元素选择器：last 获得选择的元素中的最后一个元素

非元素选择器：not(selector) 不包括指定内容的元素

偶数选择器：even 偶数，从 0 开始计数

奇数选择器：odd 奇数，从 0 开始计数

等于索引选择器：eq(index) 指定索引元素

大于索引选择器：gt(index) 大于指定索引元素

小于索引选择器：t(index)小于指定索引元素

标题选择器：header 获得标题（h1~h6）元素，固定写法

表单过滤选择器

可用元素选择器：enabled获得可用元素

不可用元素选择器：disabled 获得不可用元素

选中选择器：checked 获得单选/复选框选中的元素

选中选择器：selected 获得下拉框选中的元素

DOM操作

内容操作

html()：获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font>

text()：获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容

val()：获取/设置元素的value属性值

属性操作

attr()：获取/设置元素的属性（偏向操作元素的固有属性）

removeAttr()：删除属性

prop()：获取/设置元素的属性（偏向操作元素自定义的属性）

removeProp()：删除属性

addClass()：添加class属性值（并且保留原class属性）

removeClass()：删除class属性值

toggleClass()：切换class属性（若对象已有要切换的class属性，则删除；不存在则添加）

css()：操作对象的css样式

CRUD操作

A.append(B)：对象A将对象B追加到自己元素内部的末尾

A.appendTo(B)：对象A将自己添加到对象B元素内部的末尾

A.prepend(B)：对象A将对象B追加到自己元素内部的开头

A.prependTo(B)：对象A将自己追加到对象B元素内部的开头

A.after(B)：对象A将对象B添加到自己后边，对象A和对象B是兄弟关系

A.before(B)：对象A将对象B添加到自己前边，对象A和对象B是兄弟关系

A.insertAfter(B)：对象A将自己添加到对象B后边，对象A和对象B是兄弟关系

A.before(B)：对象A将自己添加到对象B前边，对象A和对象B是兄弟关系

A.remove()：将对象A删除掉，也可以添加一个参数，删除指定标签内部的某个标签

A.empty()：将对象A的后代元素全部清空，但是保留当前对象以及其属性节点

高级操作

动画操作

默认显示和隐藏方式

show([speed,[easing],[fn]])

hide([speed,[easing],[fn]])

toggle([speed],[easing],[fn])

滑动显示和隐藏方式

slideDown([speed],[easing],[fn])

slideUp([speed,[easing],[fn]])

slideToggle([speed],[easing],[fn])

淡入淡出显示和隐藏方式

fadeIn([speed],[easing],[fn])

fadeOut([speed],[easing],[fn])

fadeToggle([speed,[easing],[fn]])

三个参数含义：

speed：表示动画时长的毫秒数，或三个预定义的值(slow,normal, fast)

easing：用来指定切换效果，默认是swing(慢>快>慢)，可用参数linear(匀速)

fn：在动画完成时执行的函数，每个元素执行一次

遍历操作

jq对象.each(callback)：citys.each(function(index,element) {});

$.each(object, [callback])：JQuery.each(citys,function(index,element) {});

for…of：for(city of citys) {}; （jquery 3.0 版本之后提供的方式）
事件绑定
标准绑定：jq对象.事件方法(回调函数)；

绑定事件：jq对象.on(“事件名称”,回调函数)

解除绑定：jq对象.off(“事件名称”)
事件切换：jq对象.toggle(fn1,fn2…) （通过单击循环切换方法）
1
2
>     1.9版本中.toggle() 方法删除，JQuery Migrate（迁移）插件可以恢复此功能。
>

插件操作

$.fn.extend(object)：增强JQuery的对象的功能

>     $.fn.extend({
>         check:function () {
>        		this.prop("checked", true);
>         },
>         uncheck:function () {
>         	this.prop("checked", false);
>         }
>     })
>

$.extend(object)：增强JQuery全局的功能

>      $.extend({
>          max: function (a, b) {
>          	return a > b ? a : b;
>          },
>         min: function (a, b) {
>         	return a < b ? a : b;
>         }
>     })
>

16. AJAX

ASynchronous JavaScript And XML，可以使网页实现异步更新的技术，在服务器处理请求的过程中，客户端可以不需要等待服务器端的响应，进行其他的操作。这意味着可以在不重新加载整个网页的情况下，对网页的部分进行更新。

JQuery实现方式：
//1.使用$.ajax()发送异步请求
$.ajax({
	url:"ajaxServlet", // 请求路径
    type:"POST", //请求方式
    data:{"username":"jack","age":23}, //请求参数
    success:function (data) {	//响应成功后的回调函数
        alert(data);
    },
    error:function () {	//若响应失败的回调函数
        alert("出错啦...")
    },
    dataType:"text"//设置接受到的响应数据的格式
});
//2. $.get()：发送get请求
语法：$.get(url, [data], [callback], [type])
参数：url：请求路径；data：请求参数；callback：回调函数；type：响应结果的类型；
//3. $.post()：发送post请求  
方法同$.get()

17. JSON

1	JavaScript Object Notation，JavaScript的对象表示法，多用于存储和交换文本信息的语法，进行数据传输

基本规则：var p = {"name":"张三","age":23,"gender":"男"};

JSON数据由键值对构成，键可以用单引号、双引号包裹，也可以不使用引号

值的取值类型有六种：

数字（整数或浮点数）

字符串（在双引号中）

逻辑值（true 或 false）

数组（在方括号中） {“persons”:[{},{}]}

对象（在花括号中） {“address”:{“province”：”陕西”….}}

null

数据由逗号分隔：多个键值对由逗号分隔

花括号保存对象：使用{}定义json 格式

方括号保存数组：[]

获取数据

json对象.键名

json对象[“键名”]

数组对象[索引]

注解

@JsonIgnore：排除属性，用于JavaBean成员变量上

@JsonFormat：属性值的格式化 @JsonFormat(pattern = "yyyy-MM-dd")

JSON数据和Java对象的相互转换

常见的JSON解析器：Jsonlib，Gson，fastjson，jackson
1. 导入jackson的相关jar包
2. 创建Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换
//将JSON数转换为java对象据：
Object obj = mapper.readValue(json, Object.class);
//将java对象转换为JSON数据：
String json = mapper.writeValueAsString(obj);//将obj对象转换为JSON字符串
mapper.writeValue(new File("C://a.txt"),obj);//将obj对象转换为JSON字符串，并保存到指定的文件中
mapper.writeValue(response.getWriter(), obj);//将obj对象转换为JSON字符串，并响应至请求来源处

18. 案例展示：用户名检验

//Servlet代码
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    public void doPost(...) throws IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");

        String username = request.getParameter("username");
        User user = UserDao.username_check(username);
        HashMap<String, Object> map = new HashMap<>();
        if (user != null) {
            map.put("userExist", true);
            map.put("msg", "该用户名已存在");
        } else {
            map.put("userExist", false);
            map.put("msg", "该用户名可用");
        }
        //将map转为JSON，并传给客户端
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(), map);
    }

<!--html代码-->
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src = "js/jquery-3.3.1.min.js"></script>
    <script>
    $(function () {
        $("#username").blur(function () {	//为username绑定失焦事件
            //将username的内容异步传递给findUserServlet进行判断
            var username = $(this).val();
            $.get(
                "findUserServlet",
                {username:username},
                //data接收mapper.writeValue(response.getWriter(), map)响应的JSON
                function (data) {  
                    if(data.userExist) {	//用户名存在
                        $("#user_check").html(data.msg);
                    }else {		//用户名不存在
                        $("#user_check").html(data.msg);
	}})});})
    </script>
</head>
<body>
	<input type="text" name="username" id="username" placeholder="请输入用户名">
	<span id="user_check"></span>
	<br>
	<input type="text" name="password" id="password" placeholder="请输入密码">
	<br>
	<input type="button" value="提交">
</body>
</html>