jQuery动画、Ajax，Bootstrap，Maven

求学小火龙

已于 2024-07-04 15:01:28 修改

阅读量716

点赞数 16

分类专栏：从零开始的Java学习文章标签： java-ee

于 2024-06-25 20:43:52 首次发布

本文链接：https://blog.csdn.net/m0_67496588/article/details/139969029

版权

从零开始的Java学习专栏收录该内容

53 篇文章 0 订阅

订阅专栏

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>