jQuery特效：
1、显示隐藏
显示：show（毫秒值，回调函数）：无参时瞬间显示，有参时按照指定的事件慢慢显示出来，回调函数是整个显示出来以后执行的函数。
隐藏：hide(毫秒值，回调函数)：无参时瞬间隐藏，有参时，按照指定的时间慢慢隐藏，回调函数是整个隐藏起来后执行的函数。
2、淡入淡出效果
淡入显示：fadeIn(毫秒值，回调函数)：无参时瞬间显示，有参时，按照指定的时间慢慢显示出来，回调函数是整个显示出来以后执行的函数。
淡出隐藏：fadeOut(毫秒值，回调函数)：无参时瞬间隐藏，有参时，按照指定的时间慢慢隐藏，回调函数是整个隐藏起来后执行的函数。
3、窗帘特效
窗帘放下显示：slideDown()：无参时瞬间放下来，有参时，按照指定的时间慢慢放下来，回调函数是整个放下来以后执行的函数。
窗帘收起隐藏：slideUp()：无参时瞬间收起，有参时，按照指定的时间慢慢收起，回调函数是整个收起来后执行的函数。
<!DOCTYPE html>
< html> < head> < metacharset = " UTF-8" > < title> </ title> < scripttype = " text/javascript" src = " js/jquery-3.5.1.js" > </ script> < scripttype = " text/javascript" >
$ ( function ( ) {
$ ( "#show" ) . click ( function ( ) {
$ ( "#test" ) . show ( 500 , function ( ) {
alert ( "显示出来了" ) ;
} ) ;
} ) ;
$ ( "#hide" ) . click ( function ( ) {
$ ( "#test" ) . hide ( 500 , function ( ) {
alert ( "隐藏起来了" ) ;
} ) ;
} ) ;
} ) ;
</ script> </ head> < body> < divid = " test" style =" width : 200px; height : 200px; background-color : red; " > </ div> < inputtype = " button" id = " show" value = " 显示" /> < inputtype = " button" id = " hide" value = " 隐藏" /> </ body> </ html> 常用方法：
1、css(“样式名”,”样式值”)：如果只写样式名，代表获取该样式的值；如果写了样式名又写了样式值，代表将该样式修改为指定的样式值；
2、css({“样式名”:”样式值”,”样式名”:”样式值”,.......})：同时修改多个样式
3、addClass(类名)：给指定的标签添加类
4、removeClasss(类名)：给指定的标签移除类
5、toggleClass(类名)：在addClass与removeClass之间切换，如果该标签有指定的类名，则移除它，反之该标签没有指定类名，则添加它
<!DOCTYPE html>
< html> < head> < metacharset = " UTF-8" > < title> </ title> < styletype = " text/css" >
#test {
width : 200px;
height : 200px;
background-color : red;
}
.oldClass {
font-size : larger;
margin : auto;
}
.newClass {
color : blue;
border-radius : 20%;
font-weight : bold;
text-align : center;
}
</ style> < scripttype = " text/javascript" src = " js/jquery-3.5.1.js" > </ script> < scripttype = " text/javascript" >
$ ( function ( ) {
$ ( "#css" ) . click ( function ( ) {
$ ( "#test" ) . css ( { "background-color" : "pink" , "width" : "400px" ,
"height" : "400px" } ) ;
} ) ;
$ ( "#addClass" ) . click ( function ( ) {
$ ( "#test" ) . addClass ( "newClass" ) ;
} ) ;
$ ( "#removeClass" ) . click ( function ( ) {
$ ( "#test" ) . removeClass ( "oldClass" ) ;
} ) ;
$ ( "#toggleClass" ) . click ( function ( ) {
$ ( "#test" ) . toggleClass ( "newClass" ) ;
} ) ;
} ) ;
</ script> </ head> < body> < inputtype = " button" value = " 获取样式值及设置样式值" id = " css" /> < inputtype = " button" value = " 添加类" id = " addClass" /> < inputtype = " button" value = " 移除类" id = " removeClass" /> < inputtype = " button" value = " 切换类" id = " toggleClass" /> < br/> < divid = " test" class = " oldClass" > </ div> </ body> </ html> 常用方法：
1、attr()
1）attr(“属性名”)：获取指定元素的指定属性的值
2）attr(“属性名”,”属性值”)：设置指定元素的指定属性的值
2、prop()
1）prop(“属性名”)：获取指定元素的指定属性的值
2）prop(“属性名”,”属性值”)：设置指定元素的指定属性的值
两者的区别：
1）针对属性值是boolean类型的属性，推介使用prop方法
2）jQuery1.5版本以后就不再对attr方法进行维护了，推介使用prop方法
<!DOCTYPE html>
< html> < head> < metacharset = " UTF-8" > < title> </ title> < scripttype = " text/javascript" src = " js/jquery-3.5.1.js" > </ script> < scripttype = " text/javascript" >
$ ( function ( ) {
$ ( "#attr" ) . click ( function ( ) {
$ ( "#user" ) . attr ( "value" , "如意" )
} ) ;
$ ( "#prop" ) . click ( function ( ) {
var name = $ ( "#user" ) . prop ( "name" ) ;
console. log ( name) ;
} ) ;
$ ( "#checkAll" ) . click ( function ( ) {
var flag = $ ( "#checkAll" ) . prop ( "checked" ) ;
$ ( "[name=hobby]" ) . prop ( "checked" , flag) ;
} ) ;
} ) ;
</ script> </ head> < body> < inputtype = " text" name = " uername" value = " 吉祥" id = " user" /> < br/> < inputtype = " button" name = " attr" value = " attr测试" id = " attr" /> < br/> < inputtype = " button" name = " prop" value = " prop测试" id = " prop" /> < br/> < br/> < inputtype = " checkbox" id = " checkAll" /> < br/> < inputtype = " checkbox" name = " hobby" value = " 0" /> < br/> < inputtype = " checkbox" name = " hobby" value = " 1" /> < br/> < inputtype = " checkbox" name = " hobby" value = " 2" /> < br/> < inputtype = " checkbox" name = " hobby" value = " 3" /> </ body> </ html> 1、添加标签
创建节点（元素）：$(“新的标签”);
append()：后置添加到目标元素中
prepend()：前置添加到目标元素中
after()：添加到目标元素后面
before()：添加到目标元素前面
2、删除标签
remove()：移除某元素（包括其子元素）
<!DOCTYPE html>
< html> < head> < metacharset = " UTF-8" > < title> </ title> < scripttype = " text/javascript" src = " js/jquery-3.5.1.js" > </ script> < scripttype = " text/javascript" >
$ ( function ( ) {
$ ( "#button1" ) . click ( function ( ) {
var newNode1 = $ ( "<div style='background-color: blue;'>这是添加的块1</div>" ) ;
$ ( "#father" ) . append ( newNode1) ;
var newNode2 = $ ( "<div style='background-color: deeppink;'>这是添加的块2</div>" ) ;
$ ( "#father" ) . prepend ( newNode2) ;
var newNode3 = $ ( "<div style='background-color: black;'>这是添加的块3</div>" ) ;
$ ( "#father" ) . after ( newNode3) ;
var newNode4 = $ ( "<div style='background-color: chocolate;'>这是添加的块4</div>" ) ;
$ ( "#father" ) . before ( newNode4) ;
} ) ;
$ ( "#button2" ) . click ( function ( ) {
$ ( "#first" ) . remove ( ) ;
} ) ;
} ) ;
</ script> </ head> < body> < divid = " father" style =" width : 200px; height : 200px; background-color : red; " > < h3id = " first" > </ h3> </ div> < inputid = " button1" type = " button" value = " 测试按钮1" /> < inputid = " button2" type = " button" value = " 测试按钮2" /> </ body> </ html> 3、修改标签的内容
常用方法：
text()：如果无参，代表获取某元素的内容；如果有参，代表修改某元素内容
html()：如果无参，代表获取某元素的内容；如果有参，代表修改某元素内容
两者区别：
1、text()只能获取纯文本信息；html()既可以获取纯文本，也可以或HTML标签
2、text()只能设置纯文本信息，如果设置的信息中含有HTML标签，会被当成普通文本；html()可以设置纯文本，也可以设置HTML标签。
<!DOCTYPE html>
< html> < head> < metacharset = " UTF-8" > < title> </ title> < scripttype = " text/javascript" src = " js/jquery-3.5.1.js" > </ script> < scripttype = " text/javascript" >
$ ( function ( ) {
$ ( "#button" ) . click ( function ( ) {
var message1 = $ ( "#test1" ) . text ( ) ;
var message2 = $ ( "#test1" ) . html ( ) ;
console. log ( message1) ;
console. log ( message2) ;
var message3 = $ ( "#test2" ) . text ( ) ;
var message4 = $ ( "#test2" ) . html ( ) ;
console. log ( message3) ;
console. log ( message4) ;
var message5 = "纯文本信息" ;
$ ( "#test3" ) . text ( message5) ;
$ ( "#test3" ) . html ( message5) ;
var message6 = "<h4>这是设置在测试4中的标签h4中的信息</h4>" ;
$ ( "#test4" ) . text ( message6) ;
$ ( "#test4" ) . html ( message6) ;
} ) ;
} ) ;
</ script> </ head> < body> < divid = " test1" > </ div> < divid = " test2" > < h4> </ h4> </ div> < divid = " test3" > </ div> < divid = " test4" > </ div> < inputid = " button" type = " button" value = " 测试按钮" /> </ body> </ html> validate.js是一个jQuery的表单验证插件
下载地址：
https://github.com/jquery-validation/jquery-validation/releases/download/1.17.0/jquery-validation-1.17.0.zip
帮助文档地址：
https://jqueryvalidation.org/documentation/
validate.js使用方式：
1、将指定的js文件放入项目指定文件夹中
jquery.validate.js
messages_zh.js
2、将js文件引入到指定的HTML中（注意顺序）
<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
<script type="text/javascript" src="js/jquery.validate.js" ></script>
<script type="text/javascript" src="js/messages_zh.js" ></script>
3、开始表单验证
给表单绑定验证方法：
根据校验规则进行相关校验：
校验类型
取值
描述
required
true/false
必填字段
email
"@“或者"email”
邮箱地址
url
路径
date
数字
日期
dateISO
字符串
日期（YYY-MM-dd）
number
数字（负数、小数）
digis
整数
minlength
数字
最小长度
maxlength
数字
最大长度
rangelength
[minL,maxL]
长度范围
min
最小值
max
最大值
range
[min,max]
范围值
equalTo
jQuery表达式
两个值相同
remote
url路径
ajax校验
<!DOCTYPE html>
< html> < head> < metacharset = " UTF-8" > < title> </ title> < styletype = " text/css" >
.tab {
width : 800px;
height : 300px;
margin : auto;
}
.tab,.tab tr td {
border : 1px solid darkgray;
}
.tab tr th {
color : green;
}
.t_right {
text-align : right;
width : 30%;
}
</ style> < scripttype = " text/javascript" src = " js/jquery-3.5.1.js" > </ script> < scripttype = " text/javascript" src = " js/jquery.validate.js" > </ script> < scripttype = " text/javascript" src = " js/messages_zh.js" > </ script> < scripttype = " text/javascript" >
$ ( function ( ) {
$ ( "#regist" ) . validate ( ) ;
} ) ;
</ script> </ head> < body> < formid = " regist" action = " /" method = " post" > < tableborder = " 1" class = " tab" cellspacing = " 0" > < tr> < thcolspan = " 2" > </ th> </ tr> < tr> < tdclass = " t_right" > </ td> < td> < inputtype = " text" name = " username" required = " required" rangelength = " [3,6]" /> </ td> </ tr> < tr> < tdclass = " t_right" > </ td> < td> < inputtype = " password" id = " pwd1" name = " pwd1" required = " required" rangelength = " [6,12]" /> </ td> </ tr> < tr> < tdclass = " t_right" > </ td> < td> < inputtype = " password" name = " pwd2" required = " true" rangelength = " [6,12]" equalTo = " #pwd1" /> </ td> </ tr> < tr> < tdclass = " t_right" > </ td> < td> < inputtype = " text" name = " email" required = " true" email = " email" /> </ td> </ tr> < tr> < tdclass = " t_right" > </ td> < td> < inputtype = " text" name = " birthday" dateISO = " yyyy-MM-dd" /> </ td> </ tr> < tr style =" text-align : center; " > < tdcolspan = " 2" > < inputtype = " submit" name = " sub" value = " 注 册" /> </ td> </ tr> </ table> </ form> </ body> </ html> <!DOCTYPE html>
< html> < head> < metacharset = " UTF-8" > < title> </ title> < styletype = " text/css" >
.tab {
width : 800px;
height : 300px;
margin : auto;
}
.tab,.tab tr td {
border : 1px solid darkgray;
}
.tab tr th {
color : green;
}
.t_right {
text-align : right;
width : 30%;
}
</ style> < scripttype = " text/javascript" src = " js/jquery-3.5.1.js" > </ script> < scripttype = " text/javascript" src = " js/jquery.validate.js" > </ script> < scripttype = " text/javascript" src = " js/messages_zh.js" > </ script> < scripttype = " text/javascript" >
$ ( function ( ) {
$ ( "#regist" ) . validate ( {
rules: {
"username" : {
required: true ,
rangelength: [ 3 , 6 ]
} ,
"pwd1" : {
required: true ,
rangelength: [ 6 , 12 ]
} ,
"pwd2" : {
required: true ,
rangelength: [ 6 , 12 ] ,
equalTo: "#pwd1"
} ,
"email" : {
required: true ,
email: "email"
} ,
"birthday" : {
required: true ,
dateISO: "yyyy-MM-dd"
}
} ,
messages: {
"username" : {
required: "用户名不能为空哦" ,
rangelength: "用户名长度要在3到6个字符之间"
} ,
"pwd1" : {
required: "密码不能为空哦" ,
rangelength: "密码长度要在6到12个字符之间"
} ,
"pwd2" : {
required: "确认密码不能为空哦" ,
rangelength: "确认密码长度要在6到12个字符之间" ,
equalTo: "两次密码必须一致"
} ,
"email" : {
required: "电子邮箱不能为空哦" ,
email: "输入的邮箱格式不正确"
} ,
"birthday" : {
required: "出生日期不能为空哦" ,
dateISO: "日期格式不正确"
}
}
} ) ;
} ) ;
</ script> </ head> < body> < formid = " regist" action = " /" method = " post" > < tableborder = " 1" class = " tab" cellspacing = " 0" > < tr> < thcolspan = " 2" > </ th> </ tr> < tr> < tdclass = " t_right" > </ td> < td> < inputtype = " text" name = " username" /> </ td> </ tr> < tr> < tdclass = " t_right" > </ td> < td> < inputtype = " password" id = " pwd1" name = " pwd1" /> </ td> </ tr> < tr> < tdclass = " t_right" > </ td> < td> < inputtype = " password" name = " pwd2" /> </ td> </ tr> < tr> < tdclass = " t_right" > </ td> < td> < inputtype = " text" name = " email" /> </ td> </ tr> < tr> < tdclass = " t_right" > </ td> < td> < inputtype = " text" name = " birthday" /> </ td> </ tr> < tr style =" text-align : center; " > < tdcolspan = " 2" > < inputtype = " submit" name = " sub" value = " 注 册" /> </ td> </ tr> </ table> </ form> </ body> </ html>