001-jquery-01

一、Web前端回顾

1.1、HTML

常用标签

分类
显示标签	文本 font、label 图片 img 声音 audio 视频 video
输入标签	inputtext\password\radio\file\checkbox\button\reset\submit\image\date\number\color select option textarea
布局标签	br ul/li ol/li table p div hr
功能标签	a form
页面框架	iframe

1.2、CSS

盒子模型

常用样式

3D样式

transform: rotate(90deg) scale(2.0) translate(100px,-200px);

自定义动画

<html><head><meta charset="utf-8" /><title></title><style type="text/css">/*定义动画*/@keyframes wahaha{from{transform: rotate(0deg);}to{transform: rotate(360deg);}}#myImg{width: 200px;height: 200px;border-radius: 50%;animation: wahaha 3s linear infinite;}</style></head><body><img src="img/a.png" id="myImg"/></body>
</html>

1.3、JavaScript

基础语法
内置对象（String\Math\RegExp\Date\Array\ global）
BOM对象（window\screen\navigator\location\history\document）

DOM对象—document

节点：标签、属性、文本

节点种类	nodeType	nodeName	nodeValue
标签	1	标签名	null
属性	2	属性名	属性值
文本	3	#text	文本值

选择节点

document.getElementById();
document.getElementsByName();
document.getElementsByClassName();
document.getElementsByTagName("img");

创建节点

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript">function test4(){var cts = ["北京","上海","广州","深圳","大武汉"];var selectTag = document.getElementById("city");for(var i=0; i<cts.length; i++){var optionTag = document.createElement("option");      //<option></option>optionTag.innerHTML = cts[i];                     //<option>北京</option>optionTag.value = cts[i];                           //<option value="北京">北京</option>selectTag.appendChild(optionTag);}}</script></head><body><select id="city"></select><hr><button onclick="test4()">测试4</button></body>
</html>

添加子节点
删除节点
替换节点

二、AJAX

前端提交数据到服务端的方式：同步和异步

同步

异步

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k3uow5XR-1666272678712)(imgs/1594609040990.png)]

三、jQuery

3.1 概述

jQuery就是一个js函数库，为我们提供简便的HTML操作、属性操作、样式操作、事件处理、动画实现、ajax交互等Javascript操作

jQuery设计宗旨：write less,do more

3.2 jQuery特点

支持链式语法
支持高效灵活的CSS选择器
兼容各种主流浏览器
有丰富的插件 jQuery之家

3.3 安装使用

在网页中使用一个JS的函数库

npm安装
离线下载使用：
- 官网下载： https://jquery.com/
  - 生产环境（jQuery.*.min.js）https://code.jquery.com/jquery-3.5.1.min.js
  - 开发环境（jQuery.*.js）https://code.jquery.com/jquery-3.5.1.js
- 将js文件拷贝到项目中
- 在html文件引用jQuery.js文件
```
<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
```
使用CDN（Content Delivery NetWork）

3.4 基础使用

实例
基础语法： $(seclector).action(fn);

四、jQuery选择器

4.1 基础选择器

ID选择器：根据id获取HTML文档中的某一个元素
标签选择器：获取到当前文档中所有指定的标签元素

class选择器：根据class属性值获取HTML文档的元素

ID选择器	$(“#ID属性值”)
标签选择器	$(“标签名”)
class选择器	$(“.class属性值”)

4.2 复合选择器

多个选择器的组合关系

	说明
selector1,selector2	获取selector1和selector2并集
selector1 selector2	获取selector1选择元素下的所有符合selector2的元素（父标签后代标签）
selector1>selector2	获取selector1选择元素下的子标签中符合 selector2的元素（父标签子标签）
selector1+selector2	获取紧挨着selector1元素的selector2的元素
selector1~selector2	获取selector1元素后面的所有同级的selector2的元素

4.3 过滤器

索引过滤器


:first	$(“tr:first”) 获取第一个tr元素
:last	$(“tr:last”) 获取最后一个tr元素
:eq(index)	$(“tr:eq(index)”) 先获取所有的tr，再过滤指定索引的某一个tr
:gt(index)	$(“tr:gt(index)”) 获取所有tr中大于指定索引的tr
:lt(index)	$(“tr:lt(index)”) 获取所有tr中小于指定索引的tr

奇偶过滤


:even	$(“tr:even”) 获取所有tr中索引为偶数的tr（奇数行）
:odd	$(“tr:odd”) 获取所有tr中索引为奇数的tr（偶数行）

属性过滤器


[attrName 运算符 attrValue]	从选择器选择的元素中，过滤满足[]指定的属性条件的元素
	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3FMgt1TF-1666272679599)(imgs/1594624238329.png)]

可见性过滤器


:hidden	$(" : hi dd e n ") 获取当前 H TM L 文档中所有隐藏的元素 < b r / >$ (“img:hidden”) 获取HTML文档中所有隐藏的img
:visible	$(" : v i s ib l e ") 获取当前 H TM L 文档中所有可见的元素 < b r / >$ (“img:visible”) 获取HTML文档中所有可见的img

表单过滤器


:input	$(" : in p u t ") 获取当前 H TM L 文档中所有的 in p u t 元素 < b r / >$ (“#form1 :input”) 获取指定表单中的所有的input元素
:text
:password
:radio
:checkbox

五、jQuery筛选

根据选择器选择的元素再进行条件的筛选

$(“selector”).first()

六、jQuery事件处理

事件：就是在html文档中发生的例如鼠标点击、键盘输入等动作

6.1 jQuery事件处理方式

$(selector).action(fn);

6.2 jQuery常用事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-edVsjE3g-1666272678714)(imgs/1594627651935.png)]

七、jQuery操作元素的属性和样式

7.1 属性操作

使用jQuery改变元素的属性/获取元素的属性值

value属性操作

//获取元素的value属性值
var v = $(selector).val();//设置元素的value属性值
$(selector).val(v);

其他属性操作

//获取其他属性值
var v = $(selector).attr("attrName");//设置其他属性值
$(selector).attr("attrName","attrValue");//移除某个属性
$(selector).removeAttr("attrName");

class属性

//添加css样式
$(selector).addClass("css style name");//移除css样式
$(selector).removeClass("css style name");//取反css样式
$(selector).toggleClass("css style name");

html和text操作：设置/获取元素的innerHTML

<div id="div1" style="width: 200px; height: 100px; border: 1px solid green;"></div>
<button id="btn6">设置div标签中的内容</button>

$("#btn6").click(function(){//$("#div1").text("<label style='color:red;text-shadow:green 3px 3px 3px'>从前有座山</label>");$("#div1").html("<label style='color:red;text-shadow:green 3px 3px 3px'>从前有座山</label>");//var v = $("#div1").text();
});

7.2 样式操作

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="div1" style="width: 300px; height: 300px; border: 2px solid deepskyblue; overflow: scroll;position: absolute; left: 200px; top: 100px; border-radius: 50%;"><img src="img/e.jpg" /></div><button id="btn1">获取偏移数据</button><button id="btn2">获取滚动条偏移数据</button><button id="btn3">获取样式值</button><button id="btn4">设置样式值</button></body><script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script><script type="text/javascript">$(function(){//设置滚动偏移$("#div1").scrollLeft(353);$("#div1").scrollTop(210);});$("#btn1").click(function(){var p = $("#div1").position();alert(p.left +"*"+p.top);});$("#btn2").click(function(){//获取div的横向滚动偏移var sleft = $("#div1").scrollLeft();//获取div纵向滚动偏移var stop = $("#div1").scrollTop();alert(sleft +"*"+stop);});$("#btn3").click(function(){var left = $("#div1").css("left");var br = $("#div1").css("borderRadius");alert(left + "*"+br);});$("#btn4").click(function(){$("#div1").css("left","600px");$("#div1").css("borderRadius","20px");});</script>
</html>

八、jQuery效果

jQuery效果：对元素显示和隐藏的效果

8.1 show、hide

<div id="div1" style="width: 100px; height: 100px; background: red;"></div>
<button id="btn1">测试hide()</button>
<button id="btn2">测试show()</button>
<button id="btn3">测试toggle()</button>

$("#btn1").click(function(){$("#div1").hide();
});$("#btn2").click(function(){$("#div1").show();
});$("#btn3").click(function(){$("#div1").toggle();
});

8.2 slide效果

<div id="div2" style="width: 100px; height: 100px; background: blue;"></div>
<button id="btn4">测试slideDown()</button>
<button id="btn5">测试slideUp()</button>
<button id="btn6">测试slideToggle()</button>

$("#btn4").click(function(){$("#div2").slideDown();
});$("#btn5").click(function(){$("#div2").slideUp();
});$("#btn6").click(function(){$("#div2").slideToggle();
});

8.3 淡入淡出

<div id="div3" style="width: 100px; height: 100px; background: green;"></div>
<button id="btn7">测试fadeIn-显示</button>
<button id="btn8">测试fadeOut()-隐藏</button>
<button id="btn9">测试fadeToggle()</button>
<button id="btn10">测试fadeTo()</button>

$("#btn7").click(function(){$("#div3").fadeIn(3000);
});$("#btn8").click(function(){$("#div3").fadeOut(3000);
});$("#btn9").click(function(){$("#div3").fadeToggle();
});
$("#btn10").click(function(){$("#div3").fadeTo(2000,0.3);
});

8.4 效果函数的参数

效果函数可以有三个参数

speed 效果完成的时间（“slow”,“normal”,“fast”）或者毫秒数

easing 默认“swing” 可选“linear”

fn 效果完成之后的回调函数

//$("#div2").slideUp();
//$("#div2").slideUp(3000);
//$("#div2").slideUp("fast");//$("#div2").slideUp(function(){
//  alert("隐藏完毕");
//});//$("#div2").slideUp(3000,function(){
//  alert("隐藏完毕");
//});$("#div2").slideUp(3000,"linear",function(){alert("隐藏完毕");
});

8.5 动画

<div id="div4" style="width: 30px; height: 30px; background: purple; border-radius:50% ; position: relative; top: 0px; left: 0px;"></div>
<button id="btn11">测试animate</button>
<button id="btn12">测试stop</button>

$("#btn11").click(function(){//移动$("#div4").animate({left:"100px",top:"0px"},1000);$("#div4").animate({left:"100px",top:"100px"},1000);$("#div4").animate({left:"0px",top:"100px"},1000);$("#div4").animate({left:"0px",top:"0px"},1000);
});
$("#btn12").click(function(){$("#div4").stop();
});

九、DOM操作

DOM操作就是对HTML文档中元素的操作

操作元素的属性和样式

节点操作

9.1 添加子节点

parent.append(child、HTMLstring) 在当前父节点中拼接新的子节点（在原有的内容的后面拼接）
```
$("#div1").append("<img src='img/a.jpg' width='30' />");
$("#div1").append( $("#zlyImg"));
```
child.appendTo(parent) 将child节点作为子节点拼接的parent中（在原有的内容的后面拼接）
```
$("#zlyImg").appendTo( "#div1");
$("#zlyImg").appendTo( $("#div1"));
```
parent.prepend(child) 在当前父节点中拼接新的子节点（在原有的内容的前面插入节点）
```
$("#div1").prepend("<img src='img/a.jpg' width='30' />");
$("#div1").prepend( $("#zlyImg"));
```
child.prependTo(parent) 将child节点作为子节点拼接的parent中（在原有的内容的前面插入节点）
```
$("#zlyImg").prependTo( "#div1");
$("#zlyImg").prependTo( $("#div1"));
```

9.2 插入节点

node1.after(node2、HTMLstring) 将node2插入到node1之后
node1.before(node2、HTMLstring) 将node2插入到node1之前

9.3 替换节点

oldNode.replaceWith(newNode) 使用newNode替换oldNode

9.4 移除节点

oldNode.remove() 移除当前节点

9.5 节点包裹

node1.wrap(node2、HTMLstring) 使用node2包裹node1
node1.unwrap() 去除node1的父节点

9.6 清除子节点

parent.html(“”);
parent.empty();

十、AJAX

10.1 AJAX复习

案例：验证用户名是否可用

步骤一：服务器接口

创建用于响应ajax请求的ResultVO

public class ResultVO {private int code;   // 0 表示成功 ； 1 表示失败private String msg; // 返回给前端的提示信息private Object data; // 返回给前端携带的数据
}

创建一个用于将Java对象转换成JSON的帮助类

public class JSONUtil {public String toJsonString(Object obj) throws Exception {StringBuilder builder =  new StringBuilder("{");Class c = obj.getClass();Field[] fs = c.getDeclaredFields();for (int i=0 ; i<fs.length ; i++) {Field f = fs[i];String name = f.getName();   //codeString methodName = "get"+name.substring(0,1).toUpperCase()+name.substring(1);  // getCodeMethod m = c.getDeclaredMethod(methodName);     // 获取当前属性的get方法Object value = m.invoke(obj);builder.append("\""+name+"\":"+  (f.getType().toString().equals("class java.lang.String")?"\""+value+"\"":value ));if(i<fs.length-1){builder.append(",");}else{builder.append("}");}}return builder.toString();}}

创建用于接收ajax请求并进行响应的的servlet类

@WebServlet("/checkname")
public class CheckUsernameServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {try {String username = request.getParameter("username");ResultVO vo = null;if(username.startsWith("admin") || username.length()<8 || username.length()>20 ){//用户名不可用vo = new ResultVO(1,"用户名已经被占用！");}else{//用户名可用vo = new ResultVO(0,"用户名可用！");}//将vo转换成JSON格式字符串String jsonstr = new JSONUtil().toJsonString(vo);//将json字符串通过输出流响应给请求者response.setCharacterEncoding("utf-8");response.setContentType("application/json;charset=utf-8");PrintWriter out = response.getWriter();out.println(jsonstr);out.flush();out.close();} catch (Exception e) {e.printStackTrace();}}
}

步骤二：前端发送ajax请求

Javascript实现ajax请求

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text" id="userName"/><label></label><button onclick="checkUsername()">检查用户名是否可用</button></body><script type="text/javascript">var ajaxReq;function checkUsername(){//1.创建ajax请求对象if(window.XMLHttpRequest){ajaxReq = new XMLHttpRequest();}else{alert("请更换更新版本的浏览器...");}//0   请求对象已经创建，但是没有进行初始化//1   完成初始化，但未与服务器建立连接//2 请求已经达到服务器，但未获得相应//3 ajax请求与服务器进行通信//4 服务器相应完成//2.封装请求数据var username = document.getElementById("userName").value;var url = "http://localhost:8080/webserver_war_exploded/checkname?username="+username;ajaxReq.open("GET",url,true);//3.指定回调函数ajaxReq.onreadystatechange = callback;//4.发送请求ajaxReq.send(null);}function callback(){if(ajaxReq.readyState == 4 && ajaxReq.status==200){var str = ajaxReq.responseText;alert(str);}}</script>
</html>

步骤三：解决ajax跨域请求的问题

跨域：发送请求的客户端与接收请求的服务端不在同一个应用服务器（ip或者port不一样）

//设置允许跨域
response.setHeader("Access-Control-Allow-Origin","*");      //设置允许跨域
response.setHeader("Access-Control-Allow-Methods","*");     //设置允许多种请求方式
response.setHeader("Access-Control-Max-Age","3600");        //设置跨域缓存的最大时间
response.setHeader("Access-Control-Allow-Headers","*");     //设置允许携带header
response.setHeader("Access-Control-Allow-Credentials","*"); //设置允许携带cookie

步骤四：在前端处理ajax的结果

在ajax的回调函数中处理结果

function callback(){if(ajaxReq.readyState == 4 && ajaxReq.status==200){var str = ajaxReq.responseText;var obj = eval("("+str+")");console.log(obj);document.getElementById("tips").innerHTML = obj.msg;if(obj.code == 0){document.getElementById("tips").style.color="green";}else{document.getElementById("tips").style.color="red";}}
}

10.2 jQuery AJAX

$.get(url,[data],[fn],[type])

url 表示请求路径
data 表示ajax请求传递给服务器(servlet)的值
fn 请求完成之后的回调函数
type 声明服务器响应的数据格式（html,text,xml,json）

var url = "http://localhost:8080/webserver_war_exploded/checkname?username="+$("#userName").val();
$.get(url,function(res){$("#tips").html(res.msg);if(res.code==0){$("#tips").css("color","green");}else{$("#tips").css("color","red");}
});

$.post(url,[data],[fn],[type])

var url = "http://localhost:8080/webserver_war_exploded/checkname";
$.post(url,{username:$("#userName").val()},function(res){$("#tips").html(res.msg);if(res.code==0){$("#tips").css("color","green");}else{$("#tips").css("color","red");}
},"json");

$.ajax(settings) 支持自定义的异步请求设置

$.ajax({url:"http://localhost:8080/webserver_war_exploded/checkname",type:"post",data:{username:$("#userName").val()},headers:{},beforeSend:function(){},success:function(res){//回调函数：当服务器成功相应之后，执行此函数$("#tips").html(res.msg);if(res.code==0){$("#tips").css("color","green");}else{$("#tips").css("color","red");}},error:function(){},complete:function(){}
});

十一、案例：省市区联动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XcdJ0wqF-1666272678717)(imgs/1594715914120.png)]

11.1 数据表设计

mysql> create database db_pca;
Query OK, 1 row affected (0.00 sec)mysql> use db_pca;
Database changed
mysql> create table tb_provinces(-> pid int primary key auto_increment,-> pname varchar(50) not null-> )charset=utf8;
Query OK, 0 rows affected (0.02 sec)mysql> create table tb_cities(-> cid int primary key auto_increment,-> cname varchar(50) not null,-> pid int,-> constraint fk_cp foreign key(pid) references tb_provinces(pid)-> )charset=utf8;
Query OK, 0 rows affected (0.01 sec)mysql> create table tb_areas(-> aid int primary key auto_increment,-> aname varchar(100) not null,-> cid int,-> constraint fk_ac foreign key(cid) references tb_cities(cid)-> )charset=utf8;
Query OK, 0 rows affected (0.02 sec)

添加数据

11.2 完成数据库操作

导入数据库驱动

创建实体类

public class Province {private int pid;private String pname;
}

public class City {private int cid;private String cname;
}

创建帮助类

public class DBUtil {private static final String DRIVER = "com.mysql.jdbc.Driver";private static final String URL = "jdbc:mysql://localhost:3306/db_pca";private static final String USERNAME = "root";private static final String PASSWORD = "admin123";private static ThreadLocal<Connection> local = new ThreadLocal<>();static {try {Class.forName(DRIVER);} catch (ClassNotFoundException e) {e.printStackTrace();}}public static Connection getConnection() {Connection connection = local.get();try {if (connection == null) {connection = DriverManager.getConnection(URL, USERNAME, PASSWORD);local.set(connection);}} catch (SQLException e) {e.printStackTrace();}return connection;}//自行完成关闭连接
}

DAO完成查询操作

public class ProvinceDAO {private Connection conn;private PreparedStatement psmt;private ResultSet rs;public List<Province> listProvinces()  {List<Province> pros = new ArrayList<>();try {conn = DBUtil.getConnection();String sql = "select * from tb_provinces";psmt = conn.prepareStatement(sql);rs = psmt.executeQuery();while(rs.next()){int pid = rs.getInt("pid");String pname = rs.getString("pname");Province p = new Province(pid,pname);pros.add(p);}} catch (SQLException e) {e.printStackTrace();}return pros;}}

public class CityDAO {private Connection conn;private PreparedStatement psmt;private ResultSet rs;public List<City> listCitiesByPid(int pid){List<City> cities = new ArrayList<>();try {conn = DBUtil.getConnection();String sql = "select * from tb_cities where pid = ?";psmt = conn.prepareStatement(sql);psmt.setInt(1,pid);rs = psmt.executeQuery();while(rs.next()){int cid = rs.getInt("cid");String cname = rs.getString("cname");City city = new City(cid,cname);cities.add(city);}} catch (SQLException e) {e.printStackTrace();}return cities;}}

11.3 完成Service层

创建服务接口

public interface ProvinceService {public List<Province> listProvinces();
}

public interface CityService {public List<City> listCities(int pid);
}

创建服务实现类

public class ProvinceServiceImpl implements ProvinceService {private ProvinceDAO provinceDAO = new ProvinceDAO();@Overridepublic List<Province> listProvinces() {return provinceDAO.listProvinces();}
}

public class CityServiceImpl implements CityService {private CityDAO cityDAO = new CityDAO();@Overridepublic List<City> listCities(int pid) {return cityDAO.listCitiesByPid(pid);}
}

11.4 创建Servlet处理ajax请求

创建用于封装ajax响应数据的ResultVO

public class ResultVO {private int code;private String msg;private Object data;
}

创建ListProvincesServlet，返回省份信息

@WebServlet("/ListProvincesServlet")
public class ListProvincesServlet extends HttpServlet {private ProvinceService provinceService = new ProvinceServiceImpl();@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.查询省份信息List<Province> provinces = provinceService.listProvinces();//2.将省份信息封装到vo中ResultVO vo = new ResultVO(0,"success",provinces);//3.将vo转换成JSON格式String jsonstr = new Gson().toJson(vo);response.setHeader("Access-Control-Allow-Origin","*");      //设置允许跨域response.setHeader("Access-Control-Allow-Methods","*");     //设置允许多种请求方式response.setHeader("Access-Control-Max-Age","3600");        //设置跨域缓存的最大时间response.setHeader("Access-Control-Allow-Headers","*");     //设置允许携带headerresponse.setHeader("Access-Control-Allow-Credentials","*"); //设置允许携带cookieresponse.setCharacterEncoding("utf-8");response.setContentType("application/json;charset=utf-8");PrintWriter out = response.getWriter();out.println(jsonstr);out.flush();out.close();}
}

创建ListCitiesByPidServlet，返回城市信息

@WebServlet("/ListCitiesByPidServlet")
public class ListCitiesByPidServlet extends HttpServlet {private CityService cityService = new CityServiceImpl();@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String pid1 = request.getParameter("pid");int pid = pid1!=null?Integer.parseInt(pid1):1;List<City> cities = cityService.listCities(pid);ResultVO vo = new ResultVO(0,"success",cities);String jsonstr = new Gson().toJson(vo);response.setHeader("Access-Control-Allow-Origin","*");      //设置允许跨域response.setHeader("Access-Control-Allow-Methods","*");     //设置允许多种请求方式response.setHeader("Access-Control-Max-Age","3600");        //设置跨域缓存的最大时间response.setHeader("Access-Control-Allow-Headers","*");     //设置允许携带headerresponse.setHeader("Access-Control-Allow-Credentials","*"); //设置允许携带cookieresponse.setCharacterEncoding("utf-8");response.setContentType("application/json;charset=utf-8");PrintWriter out = response.getWriter();out.println(jsonstr);out.flush();out.close();}
}

11.5 前端完成省市区联动

jQuery实现

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">select{width: 120px;height: 25px;border:1px lightgray solid;border-radius: 3px;color: gray;}</style></head><body><select id="province"><option value="0">-请选择-</option></select><select id="city"><option>-请选择-</option></select><select id="area"><option>-请选择-</option></select></body><script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script><script type="text/javascript">$(function(){$.get("http://localhost:8080/pca/ListProvincesServlet",function(res){if(res.code == 0){var arr = res.data;for(var i=0; i<arr.length; i++){var optionStr = "<option value='"+arr[i].pid+"'>"+arr[i].pname+"</option>";$("#province").append(optionStr);   }}});});$("#province").change(function(){var provinceId = $("#province").val();$("#city").html("<option value='0'>-请选择-</option>");if(provinceId != "0"){$.post("http://localhost:8080/pca/ListCitiesByPidServlet",{pid:provinceId},function(res){var arr = res.data;for(var i=0; i<arr.length; i++){var optionStr = "<option value='"+arr[i].cid+"'>"+arr[i].cname+"</option>";$("#city").append(optionStr);    }});}});</script>
</html>

十二、jQuery验证插件

jQuery插件，就是基于jQuery函数库扩展的js函数库

官方插件库地址 https://plugins.jquery.com/

12.1 jQuery验证插件下载

插件地址：https://plugins.jquery.com/validation

12.2 jQuery验证插件作用

用于表单数据提交前的校验（长度、格式、一致性…）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JkxzKw9w-1666272678718)(imgs/1594777545826.png)]

12.3 jQuery验证插件的使用

在需要进行表单校验的HTML文档中引入jquery及validate函数库

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

因为validate库是对表单数据进行校验，所以先在HTML文档中创建一个表单

<form action="" method="post" id="myForm"><table style="width: 500px;" align="center"><caption>用户注册</caption><tr><td class="td1" width="100">帐号</td><td><input type="text" name="userName"/></td></tr><tr><td class="td1">密码</td><td><input type="text" name="userPwd" id="userPwd" required/></td></tr><tr><td class="td1">确认密码</td><td><input type="text" name="rePwd"/></td></tr><tr><td class="td1">邮箱</td><td><input type="text" name="email" /></td></tr><tr><td class="td1">年龄</td><td><input type="text" name="userAge"/></td></tr><tr><td class="td1"></td><td><input type="submit" value="提交注册"/></td></tr></table>
</form>

表单校验

<script type="text/javascript">$("#myForm").validate({rules:{userName:{required:true,minlength:6,maxlength:20},userPwd:{required:true,minlength:8,maxlength:16},rePwd:{required:true,equalTo:"#userPwd"},email:{required:true,email:true},userAge:{required:true,number:true,max:30,min:6,digits:true}},messages:{userName:{required:"请输入帐号",minlength:"帐号长度至少为6个字符",maxlength:"帐号长度最多20个字符"},userPwd:{required:"请输入密码",minlength:"密码长度至少为8个字符",maxlength:"密码长度最多16个字符"}}
});
</script>

修改提示信息样式

label.error{color:red; font-size: 13px;
}

内置校验规则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-evcuKiap-1666272678719)(imgs/1594781886947.png)]

=“text” name=“rePwd”/>

邮箱

年龄

```