觀看金魚都能懂的網頁設計入門：26-30
https://jquery.com/download/
到官網去下載區，找到 中文翻譯 （下載壓縮的生產版jQuery 3.5.1）或英文（Download the compressed, production jQuery 3.5.1），按右鍵另存到本地端。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
});
</script>
</body>
</html>
在vs code，script裡輸入簡寫 ready會自動產生下方起手式
<script type="text/javascript">
$(document).ready(function () {
});
</script>
click後面接函式function(){}（接下來的事件)
$(document).ready(function () {
$('.box-a').click(function(){
$('.box-b').fadeToggle();
})
});
https://codepen.io/mikeyam/pen/GRZLQdb 蓋板廣告
後續事件用 class做加入
addClass 加入
removeClass 移除
ToggleClass 雙向使用
addClass('close')
removeClass('open')
toggleClass
https://codepen.io/mikeyam/pen/WNwBrpg?editors=0010 開關練習
http://csscoke.com/2015/01/01/rgb-hsl-hex/
https://api.jquery.com/category/effects/
可以透過官網知道有哪些特效來做練習
Ex:.fadeIn()、.fadeOut()、.slideDown()、.slideUp()、.slideToggle()
透過這些特效，就不用在Css部分自行建立class效果
iThome鐵人賽
看影片追技術