jQuery
jQuery
基本概念
jQuery簡單的說是一些常用JavaScript的集合，讓我們可以直接利用別人已經寫好的JavaScript。採用jQuery還有另一個好處:很多跨瀏覽器相容的問題，在jQuery中已經提供解決方案。引用的方式有兩種，第一種是將js檔案下載下來，並在html的<head></head>中定義使用下載的js檔案。
<head>
<script src="jquery-3.1.1.min.js"></script>
</head>
第二種是使用Content Delivery Network (CDN)，直接引用網路上的js檔案。網路上有很多CDN可以使用，如:google或微軟，如果使用google的CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
如果使用微軟的CDN:
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
</head>
jQuery語法
jQuery的基本語法是: $(selector).action()，如果不熟悉selector的概念，請參考CSS。(jquery selector的語法，請詳參: https://www.w3schools.com/jquery/jquery_selectors.asp)
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
以下就是一個使用了三種不同的selector的jQuery範例，定義當class="deleteBtn"的按鈕被按 ("click")時，被按的按鈕(this)的"data-id"的內容取代id="deleteID"的內容。
<script>
$(function(){
$(".deleteBtn").click(function(){
$("#deleteID").val($(this).attr("data-id"));
});
});
</script>
與JavaScript相比:
使用jQuery必須引用jQuery。
jQuery的語法較簡潔，例如，在JavaScript要使用getElementsByTagName、getElementsByClassName、getElementById去取得一個元素，而jQuery則直接利用selector去取得。
在JavaScript是直接取代其屬性 (如innerHTML= "Hello World!")，而jQuery則是以參數的方式傳遞(如:.text("Hello World!"))。
jQuery可以將script都放在head，不像javascript必須將部份的script (如:getElementById)必須放在body中，可以讓script與html body清楚的切割。這也是使用jQuery的好處之一。
<!DOCTYPE html><!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
$("#demo").text("Hello World!");
});
</script>
</head>
<body>
<p id="demo"></p>
</body>
</html>
下面的例子就是設定兩個按鈕，按"Hide"，則隱藏所有"p"元素。按"Show"，則顯示所有"p"元素。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
以下範例(bookList.html)是將javascript改為jQuery，這樣寫的好處是將所有的script集中，而不是放在body裡面。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>List ALl Books</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#bookCategory").change(function(){
this.form.submit();
});
$("#showAllBtn").click(function(){
document.location.href='bookRetrieveAll';
});
$("#createBookBtn").click(function(){
window.location.replace("bookCreate");
});
$(".deleteBtn").click(function(){
if(confirm("確定要刪除嗎?")){
return true;
}
else{
return false;
}
});
});
</script>
</head>
<body>
<form action="bookRetrieveByCategory" method ="post">
類別:<select name = "bookCategory" th:field="${bookCategory.id}">
<option th:each="bookCategory : ${allBookCategories}"
th:value="${bookCategory.id}"
th:text="${bookCategory.name}">商業</option>
</select>
<input type="submit" value="Submit"/>
<input id = "showAllBtn" type="button" value="Show All Books"/>
</form>
<input id = "createBookBtn" type="button" value="新增書籍"/>
<table>
<tr>
<th>編號</th>
<th>類別</th>
<th>名稱</th>
<th>價格</th>
<th></th>
</tr>
<tr th:each="book : ${allBooks} " th:object="${book}">
<td th:text="*{id}">1</td>
<td th:text="*{bookCategory.name}">business</td>
<td th:text="*{name}">Ben</td>
<td th:text="*{price}">300</td>
<td><a th:href="@{bookUpdate(id=*{id})}"><input type="button" name = "updateBtn" value="修改"/></a><a th:href="@{bookDelete(id=*{id})}"><input type="button" class = "deleteBtn" value="刪除"/></a></td>
</tr>
</table>
</body>
</html>