---
# System prepended metadata

title: 【Day16】前端進階程式 js part1

---

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

使用方法：Settings -> JavaScript -> add"jquery"
![](https://hackmd.io/_uploads/BJAtaE4k6.png)


1. 更新元素內部HTML
```javascript=
$("選擇條件").html(...)
```
2. 更新CSS
```javascript=
$("選擇條件").css(...)
```
3. 新增/移除CSS class
```javascript=
$("選擇條件").addClass/removeClass(...)
```
4. 使用html()動態新增元素
```javascript=
$("選擇條件").prepend/append(...)
```
5. 使用text()顯示純文字
```javascript=
$("選擇條件").text(...)
```

## 實際操作
### 程式碼
**HTML(jade)**
```htmlmixed=
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)**
```css=
*
  font-family: 微軟正黑體
  letter-spacing: 1px
  
.block
  width: 70px
  height: 70px
  border: solid 2px
  display: inline-block
  
.bigblock
  width: 150px
  height: 150px
  
```
**JS**
```javascript=
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>")
```
### 呈現
![](https://hackmd.io/_uploads/By6dXDNJp.png)
![](https://hackmd.io/_uploads/SJZpdXw4Jp.png)

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