jQuery 是一個 JavaScript library,有非常好的跨瀏覽器兼容性
jQuery 語法查詢庫
引入 jQuery
在 jQuery 官網的 Download 裡面,如果想用「沒壓縮過」的版本,就選擇 Download the uncompressed, development jQuery 這個,複製網址後,把網址貼到 index.html 的 <script src="">
裡面:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<title>Document</title>
</head>
如果有成功引入 jQuery,就會建立一個 global 的變數叫做 jQuery
因此在 JS 寫上 console.log(jQuery);
,如果有印出東西,就代表有成功引入 jQuery 了
如何用 jQuery 來操作 DOM
用 .text()
可以更改元素裡面的文字
用 .show()
和 .hide()
來顯示/隱藏元素
範例:
點一下按鈕就顯示 .box
,再點一下就隱藏 .box
$('.btn')
也可以寫成 jQuery('.btn')
,因為 $ === jQuery
, $
只是一個變數的符號而已
$(document).ready(function() {
var isHide = false;
$('.btn').click(function (e) {
if (isHide) {
$('.box').show();
} else {
$('.box').hide();
}
isHide = !isHide;
})
})
用 .fadeIn()
和 .fadeOut()
來顯示/隱藏元素
() 裡面可以傳入毫秒數,例如 .fadeIn(2000)
用 .val()
可以設定/取得元素的值
如果 .val()
裡面有傳參數,就是 SET(設定值)
例如:用 $('.todo-input').val('smile')
就可以把 .todo-input
的值設為 smile
例如:用 $('.todo-input').val('')
就可以把 .todo-input
的值給清空
如果 .val()
裡面沒有傳參數,就是 GET(取得值)
例如:用 $('.todo-input').val()
就可以取得 .todo-input
的值
用 .append()
可以依序往後插入元素
範例:
$(document).ready(function() {
$('.btn').click(function (e) {
const value = $('.todo-input').val(); // 取出 .todo-input 的值
$('.todo-input').val(''); // 清空 .todo-input 的值
$('.todos').append(`<div class="todo">${value}</div>`);
})
})
用 .prepend()
可以依序往前插入元素
用 .css('color', 'red')
可以調整元素的 css,把 color 設為 red
用 .empty()
可以清空元素裡面的所有東西
.empty()
就等於是 .innerHTML = ''
,元素本身還是會留著
但如果是用 .remove()
的話,連元素本身也都會被移除掉
事件代理
範例:
在 .todos
加上 event listener,監聽 .todos
裡面的 .btn-delete
,只要 .btn-delete
有 click 事件,就會執行後面 function 的程式碼 $(e.target).parent().fadeOut();
// 刪除功能
$('.todos').on('click', '.btn-delete', function(e) {
$(e.target).parent().fadeOut();
})
範例:todo list 程式碼
html:
<input type="text" class="todo-input">
<button class="btn">Add todo</button>
<button class="btn-remove-all">Remove all todos</button>
<div class="todos">
</div>
all.js:
$(document).ready(function() {
$('.btn').click(function (e) {
const value = $('.todo-input').val(); // 取出 .todo-input 的值
$('.todo-input').val(''); // 清空 .todo-input 的值
$('.todos').append(`
<div class="todo">
${value}
<button class="btn-mark">標記完成</button>
<button class="btn-delete">刪除</button>
</div>
`);
})
// 移除所有的 todo
$('.btn-remove-all').click(() => {
$('.todos').empty();
})
// 刪除功能
$('.todos').on('click', '.btn-delete', function(e) {
$(e.target).parent().fadeOut();
})
// 標記完成/未完成
$('.todos').on('click', '.btn-mark', function(e) {
const todo = $(e.target).parent();
if (todo.hasClass('completed')) { // 變成未完成
todo.css('color', 'black');
todo.removeClass('completed');
$(e.target).text('標記完成');
} else { // 變成已完成
todo.css('color', 'green');
todo.addClass('completed');
$(e.target).text('標記未完成');
}
})
})
jQuery 與 Ajax
jQuery 與 Ajax 的官方文件,可參考 Low-Level Interface
在接下來的範例中,會使用 REST COUNTRIES 這個 api
$.ajax()
就是一個 function,小括弧裡面要傳入幾個參數,參數可以有幾種形式:
- 傳入物件:
在物件裡面可以寫上各個細節,例如 method, url, data(我想要帶給 server 的資訊)
發送一個 POST 的 request
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
發送一個 GET 的 request
首先,先呼叫 $.ajax()
這個 function 來發送 request
下面這段程式碼,就可以發送一個 GET 的 request 到 https://restcountries.eu/rest/v2/name/germany 這個 api 去
$.ajax({
method: 'GET',
url: 'https://restcountries.eu/rest/v2/name/germany'
})
再用 .done()
來拿到 response
發送完 request 之後,要接收 response:
用 .done()
來接收結果,小括號裡面傳入一個 callback function,把拿到的 data
印出來
$.ajax({
method: 'GET',
url: 'https://restcountries.eu/rest/v2/name/germany'
}).done(function(data) {
console.log(data);
})
做錯誤處理
用 .fail()
可以接收錯誤訊息
$.ajax({
method: 'GET',
url: 'https://aaarestcountries.eu/rest/v2/name/germany'
}).done(function(data) {
console.log(data);
}).fail(function(err) {
console.log('error: ', err);
})
另一種寫法:
在 You Might Not Need jQuery 有提供另一種寫法:
同樣也可以拿到結果和錯誤處理
$.ajax({
method: 'GET',
url: 'https://aaarestcountries.eu/rest/v2/name/germany',
success: data => console.log(data),
error: err => console.log('error: ', err)
})
完整範例:用 jQuery 送出 request,拿到結果後再顯示在頁面上
按下送出後去 api 拿資料,再把拿到的資料顯示在下方
html:
Name: <input type="text" name="country-name">
<button class="btn">送出</button>
<div class="list">
</div>
all.js:
$(document).ready(() => {
$('.btn').click(() => {
const value = $('input[name=country-name]').val();
// 如果欄位沒有填寫
if (value === '') {
alert('必須輸入名稱!');
return;
}
$('.list').empty(); // 先把 .list 清空
// 如果欄位有填寫
$.ajax({
method: 'GET',
url: 'https://restcountries.eu/rest/v2/name/' + value,
success: countries => {
for (let country of countries) {
$('.list').append(`<div>${country.alpha2Code} ${country.name} ${country.nativeName}</div>`)
}
},
error: err => {
alert('系統不穩定!');
}
})
})
})