# 【Day16】前端進階程式 js part1
## jquery的使用
目的：可用來動態改變CSS外觀與HTML內容
代表符號：＄

使用方法：Settings -> JavaScript -> add"jquery"

1. 更新元素內部HTML

$("選擇條件").html(...)

2. 更新CSS

$("選擇條件").css(...)

3. 新增/移除CSS class

$("選擇條件").addClass/removeClass(...)

4. 使用html()動態新增元素

$("選擇條件").prepend/append(...)

5. 使用text()顯示純文字

$("選擇條件").text(...)

## 實際操作
### 程式碼
**HTML(jade)**

h1 jquery動態改變css外觀與html內容
h4 使用:　Settings -> JavaScript -> Quickadd"jquery"
h3 1. 更新元素內部HTML
.block.block1
hr
h3 2. 更新CSS
.block.block2
hr
h3 3. 新增/移除CSS class
.block.block3
.block.block4.bigblock
hr
h3 4. 使用html()動態新增元素
.block.block5.bigblock
hr
h3 5. 使用text()顯示純文字
.block.block6.bigblock

**CSS(sass)**

*
  font-family: 微軟正黑體
  letter-spacing: 1px
  
.block
  width: 70px
  height: 70px
  border: solid 2px
  display: inline-block
  
.bigblock
  width: 150px
  height: 150px
  

**JS**

import $ from "https://cdn.skypack.dev/jquery@3.6.4";
$(".block1").html("更新公告");
$(".block2").css("background-color","#f24");
$(".block2").css("border-radius","100%");
$(".block3").addClass("bigblock");
$(".block4").removeClass("bigblock");
$(".block5").html("<div class='block'>商品</div><div class='block'>商品</div>");
$(".block5").prepend("商品列表:");
$(".block5").append("共有兩項");
$(".block6").text("<div class='block'>商品</div><div class='block'>商品</div>")

### 呈現

:::warning
內容主要整理自「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，網址：https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions?item=5a1e1745a2c4b000589dd21d
:::