Day45

jQuery动画

显示和隐藏

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){
//				//方法一：切换事件
//				$("#btn01").toggle(
//					function(){
//						$("img").hide("slow");
//						$("img").hide(2000);
//					},
//					function(){
//						$("img").show("fast")
//						$("img").show(1000);
//					}
//				)//方法二：toggle()方法$("#btn01").click(function(){$("img").toggle(3000)})})</script></head><body><button id="btn01">显示和隐藏</button><img src="img/时间.jpg" /></body>
</html>

滑动

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){//方法一：切换事件$("#btn01").toggle(function(){
//						$("img").slideUp("slow");$("img").slideUp(2000);},function(){
//						$("img").slidedown("fast")$("img").slideDown(1000);})
//				//方法二：slideToggle()方法
//				$("#btn01").click(function(){
//					$("img").slideToggle(3000)
//				})})</script></head><body><button id="btn01">显示和隐藏</button><img src="img/时间.jpg " width="100px" height="100px" /></body>
</html>

淡入淡出

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){
//				方法一：切换事件
//				$("#btn01").toggle(
//					function(){
//						$("img").fadeOut("slow");
//						$("img").fadeOut(2000);
//					},
//					function(){
//						$("img").fadeIn("fast")
//						$("img").fadeIn(1000);
//					}
//				)//方法二：fadeToggle()方法$("#btn01").click(function(){$("img").fadeToggle(3000);})})</script></head><body><button id="btn01">显示和隐藏</button><img src="img/时间.jpg " width="100px" height="100px" /></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.divFrame {border: solid 1px #666;width: 197px;text-align: center;}.divFrame .divTitle {background-color: #eee;padding: 5px 0px 5px 0px}.divFrame .divContent {padding: 5px 0px 5px 0px}.divFrame .divContent img {border: solid 1px #eee;padding: 2px;width: 120px;height: 120px;}</style><script type="text/javascript" src="../js/jquery-1.8.2.js"></script><script type="text/javascript">$(function() {$("#Select1").change(function(){var value = $(this).val();$("img").fadeTo(1000,value);})})</script></head><body><div class="divFrame"><div class="divTitle"><select id="Select1"><option value="0.2">0.2</option><option value="0.4">0.4</option><option value="0.6">0.6</option><option value="0.8">0.8</option><option value="1.0" selected="selected">1.0</option></select></div><div class="divContent"><img src="../img/石像.jpg" alt="" title="风景图片" /></div></div></body></html>

自定义动画

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.divFrame {border: solid 1px #ccc;background-color: #eee;width: 60px;height: 60px;font-size: 13px;padding: 5px}</style><script type="text/javascript" src="../js/jquery-1.8.2.js"></script><script type="text/javascript">$(function() {/** 需求：* 		当点击图层的时候，图层的宽度变为200px,高度为100px，共经历3秒完成* 		3秒后，字体大小为50px，*/$("div").click(function(){$(this).animate({"width":"200px","height":"100px"},3000,function(){$(this).css("font-size","50px");});})})</script></head><body><div class="divFrame">点击变大</div></body></html>

.animate({},3000,function(){})

jQuery的Ajax

加载文件

加载HTML

.load()

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("button").click(function(){$("div").load("index.html");})})</script></head><body><button>加载页面</button><div></div></body>
</html>

加载JSON数据

[{"name":"张三","age":18},{"name":"李四","age":23}
]

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#btn01").click(function(){$.getJSON("jQuery的Ajax/new_file.json",function(data){$.each(data, function(index,stu) {
//							console.log(data[index].name+"--"+data[index].age);console.log(stu.name+"--"+stu.age);});})})})</script></head><body><button id="btn01">加载JSON数据</button></body>
</html>

加载JavaScript

$.getJSON("new_file.json",function(data){$.each(data,function(index,stu){console.log(stu.name + " -- " + stu.age);})
})

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#btn01").click(function(){$.getScript("new_file.js");})})</script></head><body><button id="btn01">加载JS数据</button></body>
</html>

加载xml

<?xml version="1.0" encoding="UTF-8" ?>
<students><student><name>张三</name><age>18</age></student><student><name>李四</name><age>23</age></student>
</students>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$("#btn01").click(function(){$.get("new_file.xml",function(data){$(data).find("student").each(function(){var name = $(this).find("name").text();var age = $(this).find("age").text();console.log(name+"--"+age);})})})})</script></head><body><button id="btn01">加载JS数据</button></body>
</html>

与服务器交互

<script type="text/javascript">function fun01(){window.location = "welcome.html";}$(function () {var bool = false;document.getElementById("registerForm").onsubmit = function (){return bool;//只有账号可以注册时才允许提交};$("#username").blur(function (){$.get("Student?action=isRegister",{"username":$(this).val()},function (data){console.log(data);if(data=="1"){$("#username+span").text("恭喜，账号可以注册");$("#username+span").css("color","green");bool = true;}else if(data=="-1"){$("#username+span").text("抱歉，该账号已被注册");$("#username+span").css("color","red");bool = false;}})})function  showProvince(){$.post("User",{"action":"getProvinces"},function (data){var pros = eval(data);for (let i = 0; i < pros.length; i++) {var option = $("<option></option>");$(option).val(pros[i].code);$(option).text(pros[i].name);$("#province").append($(option));}})}showProvince();$("#province").change(function (){$.post("User",{"action":"getCities","parentCode":$(this).val()},function (data){$("#city").text("");var cities = eval(data);for (let i = 0; i < cities.length; i++) {var option = $("<option></option>");$(option).val(cities[i].code);$(option).text(cities[i].name);$("#city").append($(option));}})})})</script>

serialize()-序列化表单

表单中带name属性的组件都会拼接成xxx=xxx&xxxx=xxxx…

$.ajax()

除了可以使用全局性函数load()、get()、post()实现页面的异步调用和与服务器交互数据外，在jQuery中，还有一个功能更为强悍的最底层的方法$.ajax()，该方法不仅可以方便地实现上述三个全局函数完成的功能，更多地关注实现过程中的细节

jQuery.ajax(url,[settings])

列举几个常用的回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、success、complete。

· beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。

· error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）

· success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。

complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

利用$.ajax提交表单

$(function () {$("input[type='button']").click(function (){$.ajax({type:"post",url:"Student",data:$("#registerForm").serialize(),//序列化表单，表单中带name属性的组件都会拼接成xxx=xxx&xxx=xxx...async:true,success:function (data) {alert(data);}})})

Bootstrap

目前最受欢迎的前端框架

优势

移动设备优先，浏览器支持，容易上手，响应式设计。

使用

利用CDN：

加载链接地址即可使用，不用下载包（注意加载有先后顺序）。

提供了很多现成的样式可以直接使用。

标签图片列表组表格模态框

可视化布局

https://www.bootcss.com/p/layoutit

Maven

含义

Maven是一个构建项目的工具，也是一个管理项目的工具。

应用

1.构建项目

2.管理依赖

3.做项目的热部署

4.基于项目做多模块的构建

安装

注意：Maven不需要安装，下载解压就行。

1.配置环境变量

M2_HOME：路径

path： %M2_HOME%\bin

2.验证是否配置成功

打开cmd，输入mvn -version

使用命令创建java项目

进入工作空间，取名(xxxMavenWorkspace)。
cd C:\MavenWorkspace 进入到此目录。
输入命令来找模板 mvn archetype:generate
默认出现10个常见的模板默认选择的是 7号模板（用来创建 java项目org.apache.maven.archetypes:maven-archetype-quickstart）
填写groupId – 组别（可以简单认为是包名）
填写 artifactId – 项目名
填写 version – 版本号（这个直接默认就好，一般情况下不改）
填写 package – 包名（默认是groupId，这里默认就好）
输入 Y （确定）
构建项目

项目目录解析

MavenWorkspace\JavaTest01\src

MavenWorkspace\JavaTest01\src\main

C:\MavenWorkspace\JavaTest01\src\main\java 存放java源文件

C:\MavenWorkspace\JavaTest01\src\test 存放测试文件MavenWorkspace\JavaTest01\pom.xml 插件管理、项目的依赖管理、整个项目自己的坐标

运行项目

cd C:\MavenWorkspace\JavaTest01 进入此目录

mvn package项目打包，此时会在项目根目录中生产target文件夹

cd C:\MavenWorkspace\JavaTest01\target 进入此目录

java -cp JavaTest01-1.0-SNAPSHOT.jar com.dream.test01.App 运行代码

注意：mvn clean-----清空target文件mvn install ：打包并将这个jar文件放到本地仓库（管理jar文件的本地库）mvn test：运行所有的测试用例

使用命令创建web项目

进入工作空间，取名(xxxMavenWorkspace)。
cd C:\MavenWorkspace 进入到此目录。
输入命令来找模板 mvn archetype:generate
默认出现10个常见的模板默认选择的是 7号模板（用来创建 java项目org.apache.maven.archetypes:maven-archetype-quickstart）,这里选择10号
填写groupId – 组别（可以简单认为是包名）
填写 artifactId – 项目名
填写 version – 版本号（这个直接默认就好，一般情况下不改）
填写 package – 包名（默认是groupId，这里默认就好）
输入 Y （确定）
构建项目

项目目录解析

MavenWorkspace\WebTest01\src

MavenWorkspace\WebTest01\src\main

MavenWorkspace\WebTest01\src\main\resources存放资源文件MavenWorkspace\WebTest01\src\main\webapp 存放前端资源和 web.xmlC:\MavenWorkspace\WebTest01\pom.xml 插件管理、项目的依赖管理、整个项目自己的坐标

注意：mvn package项目打包，此时会在项目根目录中生产target文件夹

IDEA中配置Maven

配置maven的国内仓库/中央仓库位置：C:\apache-maven-3.6.0\conf\settings.xml

<mirrors><!-- <mirror>    <id>mirrorId</id>    <mirrorOf>repositoryId</mirrorOf>    <name>Human Readable Name for this Mirror.</name>    <url>http://my.repository.com/repo/path</url> </mirror>--><mirror>   <id>alimaven</id>   <name>aliyun maven</name>   <url>http://maven.aliyun.com/nexus/content/groups/public/</url>   <mirrorOf>central</mirrorOf>      </mirror></mirrors>

配置maven的本地仓库位置：C:\apache-maven-3.6.0\conf\settings.xml

<!--   localRepository    | The path to the local repository maven will use to store artifacts.    |    | Default: ${user.home}/.m2/repository   <localRepository>/path/to/local/repo</localRepository>-->  <localRepository>C:\.m2\repository</localRepository>

3.在IDEA中配置Maven – File–> Setting
在这里插入图片描述

在IDEA中操作Java项目

在IDEA中操作Web项目

在这里插入图片描述
其余步骤同上解析pom.xml:

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <!--项目坐标--> <groupId>com.dream.test01</groupId> <artifactId>WebTest02</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <!--	<packaging>jar</packaging>打包的时候打包成jar文件 - Java项目	<packaging>war</packaging>打包的时候打包成war文件 - Web项目	<packaging>pom</packaging>不打包，表示聚合项目工程 -->  <name>WebTest02 Maven Webapp</name> <!-- FIXME change it to the project's website --> <url>http://www.example.com</url>  <properties>  <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>  <maven.compiler.source>1.8</maven.compiler.source>  <maven.compiler.target>1.8</maven.compiler.target> </properties>  <!--项目的jar依赖--> <dependencies>  <dependency>   <groupId>junit</groupId>   <artifactId>junit</artifactId>   <version>4.11</version>   <scope>test</scope><!--表示在测试的时候有效-->  </dependency>   <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->  <dependency>   <groupId>javax.servlet</groupId>   <artifactId>javax.servlet-api</artifactId>   <version>4.0.1</version>   <scope>provided</scope><!--表示在编译和测试过程中有效,最后生成的war包时不会加入-->  </dependency> </dependencies>  <!--项目的构建的时候使用的信息--> <build>  <finalName>WebTest02</finalName> </build></project>

****注意：编写java代码的位置问题****在web项目中对的src/main中创建java并设置成源码文件夹在这里插入图片描述

在IDEA中操作聚合项目(父工程项目/多模块构建)

其余步骤同上****目录解析**😗
*创建子级工程**😗***右键父级工程 --> new --> moudle—后面的步骤和创建单个工程一样使用maven构建项目的时候需要先找模板通过模板来创建项目

聚合项目中工程之间相互引用

含义：在一个子级工程中引用另一个子级工程中的资源在子级工程pom.xml中配置另一个子级工程的项目坐标
<dependencies> <dependency>  <artifactId>StudentManagerSystemPojo</artifactId>  <groupId>com.dream.test01</groupId>  <version>1.0-SNAPSHOT</version> </dependency><dependencies>

Maven管理项目依赖

含义：在Maven仓库中寻找Jar包仓库分类：本地仓库：本地的一个文件夹，用来存放所有的jar包，由自己维护远程仓库（或私服）：由公司或单位创建的一个仓库，由公司维护中央仓库：互联网上的仓库，由Maven团队维护（国内一般设计阿里云为中央仓库，下载jar更快）寻找流程：本地仓库 --> 远程仓库（或私服） --> 中央仓库导包流程：1. https://mvnrepository.com查询jar包描述2. 在项目pom.xml中配置jar包描述，IDEA将jar包下载到本地仓库即可

导包：https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload/1.5

问题一：IDEA创建新的maven项目时需要反复修改下载路径，以及创建项目后没有src。

解决方案：file中选择close project，退回到全局设置，在Customize中找到All settings，进去后在build里修改maven的runner，添加 “-DarchetypeCatalog=internal” ，并在maven中修改home_path,settings file和loacl repository分别指定自己maven的位置以及maven中的config下的setting.xml文件，和本地jar包存储仓库。设置完毕后点击ok保存。再次创建项目时就有src，并且不用修改下载路径了。

问题二：即使导入了el的相关jar包，但是仍然无法识别el表达式？

原因：自动生成的web.xml文件的web-app版本是2.3的，导致EL表达式混乱，因为EL表达式是2.4以上版本才支持的。

解决方案：1.找到maven-archetype-webapp的jar包位置，如C:.m2\repository\org\apache\maven\archetypes\maven-archetype-webapp\1.0， Maven后边的路径应该是一样的。

2.用压缩包的形式打开jar包，然后找到 archetype-resources\src\main\webapp\WEB-INF\web.xml ，用记事本打开，将里面的内容修改为(tomcat的web.xml文件内容)：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"version="4.0"><display-name>Archetype Created Web Application</display-name></web-app>