jQuery
jQuery特效：
1、显示隐藏
显示：show（毫秒值，回调函数）：无参时瞬间显示，有参时按照指定的事件慢慢显示出来，回调函数是整个显示出来以后执行的函数。
隐藏：hide(毫秒值，回调函数)：无参时瞬间隐藏，有参时，按照指定的时间慢慢隐藏，回调函数是整个隐藏起来后执行的函数。
2、淡入淡出效果
淡入显示：fadeIn(毫秒值，回调函数)：无参时瞬间显示，有参时，按照指定的时间慢慢显示出来，回调函数是整个显示出来以后执行的函数。
淡出隐藏：fadeOut(毫秒值，回调函数)：无参时瞬间隐藏，有参时，按照指定的时间慢慢隐藏，回调函数是整个隐藏起来后执行的函数。
3、窗帘特效
窗帘放下显示：slideDown()：无参时瞬间放下来，有参时，按照指定的时间慢慢放下来，回调函数是整个放下来以后执行的函数。
窗帘收起隐藏：slideUp()：无参时瞬间收起，有参时，按照指定的时间慢慢收起，回调函数是整个收起来后执行的函数。
<html>
<head>
<meta charset="UTF-8">
<title>显示隐藏title>
<script type="text/javascript" src="js/jquery-3.5.1.js" >script>
<script type="text/javascript">
$(function(){
$("#show").click(function(){
$("#test").show(500,function(){
alert("显示出来了");
});
});
$("#hide").click(function(){
$("#test").hide(500,function(){
alert("隐藏起来了");
});
});
});
script>
head>
<body>
<div id="test" style="width: 200px; height: 200px; background-color: red;">div>
<input type="button" id="show" value="显示" />
<input type="button" id="hide" value="隐藏" />
body>
html>
jQuery操作CSS
常用方法：
1、css(“样式名”,”样式值”)：如果只写样式名，代表获取该样式的值；如果写了样式名又写了样式值，代表将该样式修改为指定的样式值；
2、css({“样式名”:”样式值”,”样式名”:”样式值”,.......})：同时修改多个样式
3、addClass(类名)：给指定的标签添加类
4、removeClasss(类名)：给指定的标签移除类
5、toggleClass(类名)：在addClass与removeClass之间切换，如果该标签有指定的类名，则移除它，反之该标签没有指定类名，则添加它
<html>
<head>
<meta charset="UTF-8">
<title>JQuery操作CSStitle>
<style type="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>
<script type="text/javascript" src="js/jquery-3.5.1.js" >script>
<script type="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>
<input type="button" value="获取样式值及设置样式值" id="css"/>
<input type="button" value="添加类" id="addClass"/>
<input type="button" value="移除类" id="removeClass"/>
<input type="button" value="切换类" id="toggleClass"/><br/>
<div id="test" class="oldClass">
这是测试的div
div>
body>
html>
jQuery操作属性
常用方法：
1、attr()
1）attr(“属性名”)：获取指定元素的指定属性的值
2）attr(“属性名”,”属性值”)：设置指定元素的指定属性的值
2、prop()
1）prop(“属性名”)：获取指定元素的指定属性的值
2）prop(“属性名”,”属性值”)：设置指定元素的指定属性的值
两者的区别：
1）针对属性值是boolean类型的属性，推介使用prop方法
2）jQuery1.5版本以后就不再对attr方法进行维护了，推介使用prop方法
<html>
<head>
<meta charset="UTF-8">
<title>JQuery操作属性title>
<script type="text/javascript" src="js/jquery-3.5.1.js" >script>
<script type="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>
<input type="text" name="uername" value="吉祥" id="user" /><br />
<input type="button" name="attr" value="attr测试" id="attr" /><br />
<input type="button" name="prop" value="prop测试" id="prop" />
<br />
<br />
<input type="checkbox" id="checkAll"/>全选<br />
<input type="checkbox" name="hobby" value="0" />篮球<br />
<input type="checkbox" name="hobby" value="1" />足球<br />
<input type="checkbox" name="hobby" value="2" />乒乓球<br />
<input type="checkbox" name="hobby" value="3" />桌球
body>
html>
jQuery操作DOM
1、添加标签
创建节点（元素）：$(“新的标签”);
append()：后置添加到目标元素中
prepend()：前置添加到目标元素中
after()：添加到目标元素后面
before()：添加到目标元素前面
2、删除标签
remove()：移除某元素（包括其子元素）
<html>
<head>
<meta charset="UTF-8">
<title>JQuery操作DOMtitle>
<script type="text/javascript" src="js/jquery-3.5.1.js" >script>
<script type="text/javascript">
$(function(){
$("#button1").click(function(){
var newNode1 = $("这是添加的块1
");
$("#father").append(newNode1);
var newNode2 = $("这是添加的块2
");
$("#father").prepend(newNode2);
var newNode3 = $("这是添加的块3
");
$("#father").after(newNode3);
var newNode4 = $("这是添加的块4
");
$("#father").before(newNode4);
});
$("#button2").click(function(){
$("#first").remove();
});
});
script>
head>
<body>
<div id="father" style="width: 200px; height: 200px; background-color: red;">
<h3 id="first">我是块中的第一个元素h3>
div>
<input id="button1" type="button" value="测试按钮1" />
<input id="button2" type="button" value="测试按钮2" />
body>
html>
3、修改标签的内容
常用方法：
text()：如果无参，代表获取某元素的内容；如果有参，代表修改某元素内容
html()：如果无参，代表获取某元素的内容；如果有参，代表修改某元素内容
两者区别：
1、text()只能获取纯文本信息；html()既可以获取纯文本，也可以或HTML标签
2、text()只能设置纯文本信息，如果设置的信息中含有HTML标签，会被当成普通文本；html()可以设置纯文本，也可以设置HTML标签。
<html>
<head>
<meta charset="UTF-8">
<title>JQuery操作DOM之修改标签title>
<script type="text/javascript" src="js/jquery-3.5.1.js" >script>
<script type="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 = "这是设置在测试4中的标签h4中的信息
";
$("#test4").text(message6);
$("#test4").html(message6);
});
});
script>
head>
<body>
<div id="test1">这是测试1中的简单的文本信息div>
<div id="test2">
<h4>这是测试2中的标签h4中的信息h4>
div>
<div id="test3">
这是测试3
div>
<div id="test4">
这是测试4
div>
<input id="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中（注意顺序）
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校验 |
方式一：直接调用validate.js中的validate()
<html>
<head>
<meta charset="UTF-8">
<title>表单验证title>
<style type="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>
<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>
<script type="text/javascript">
$(function(){
$("#regist").validate();
});
script>
head>
<body>
<form id="regist" action="/" method="post">
<table border="1" class="tab" cellspacing="0">
<tr>
<th colspan="2">用户注册th>
tr>
<tr>
<td class="t_right">用户名:td>
<td><input type="text" name="username" required="required" rangelength="[3,6]"/>td>
tr>
<tr>
<td class="t_right">密码:td>
<td><input type="password" id="pwd1" name="pwd1" required="required" rangelength="[6,12]"/>td>
tr>
<tr>
<td class="t_right">确认密码:td>
<td><input type="password" name="pwd2" required="true" rangelength="[6,12]" equalTo="#pwd1"/>td>
tr>
<tr>
<td class="t_right">Email:td>
<td><input type="text" name="email" required="true" email="email"/>td>
tr>
<tr>
<td class="t_right">出生日期:td>
<td><input type="text" name="birthday" dateISO="yyyy-MM-dd"/>td>
tr>
<tr style="text-align: center;">
<td colspan="2"><input type="submit" name="sub" value="注 册"/>td>
tr>
table>
form>
body>
html>
方式二：自定义提示语句
<html>
<head>
<meta charset="UTF-8">
<title>表单验证title>
<style type="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>
<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>
<script type="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>
<form id="regist" action="/" method="post">
<table border="1" class="tab" cellspacing="0">
<tr>
<th colspan="2">用户注册th>
tr>
<tr>
<td class="t_right">用户名:td>
<td><input type="text" name="username"/>td>
tr>
<tr>
<td class="t_right">密码:td>
<td><input type="password" id="pwd1" name="pwd1"/>td>
tr>
<tr>
<td class="t_right">确认密码:td>
<td><input type="password" name="pwd2"/>td>
tr>
<tr>
<td class="t_right">Email:td>
<td><input type="text" name="email"/>td>
tr>
<tr>
<td class="t_right">出生日期:td>
<td><input type="text" name="birthday"/>td>
tr>
<tr style="text-align: center;">
<td colspan="2"><input type="submit" name="sub" value="注 册"/>td>
tr>
table>
form>
body>
html>
