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>