---
# System prepended metadata

title: 第四週 - jQuery 增添介面使用者互動揪甘心
tags: [公益程式體驗營 - 2022]

---

---
tags: 公益程式體驗營 - 2022
---

# 第四週 - jQuery 增添介面使用者互動揪甘心



## 開課提醒
1. 錄影
2. 不需報到
3. 講解[主線任務](https://rpg.hexschool.com/training/29/task)
4. 講解[小組任務](https://hackmd.io/0W0C-ZohS2qmaSg8uTfosA?view)
5. 大綱


## jQuery 介紹
- 頁面上增加一些動態效果
- 是用 Javascript 語言來編寫的函式庫
- [jQuery 官網](https://jquery.com/)
- [jQuery 下載](https://jquery.com/download/)
   - 選擇：compressed 壓縮版 prod 上線正式版
   - 載入位置：</body> 之前
   - 載入順序：jQuery -> all.js

    
## jQuery 語法

網頁載入完成後，ready() 就會觸發，並去執行裡面的內容
```javascript
$(document).ready(function () {
   // 內容
});
```
是誰？做了什麼事？
```javascript
$(document).ready(function () {
 $('h1').hide();
   // 誰.做什麼事()
});

```


### 事件類型
滑鼠事件/鍵盤事件/瀏覽器事件等等

- click() 點擊

    目標：點擊 h1 讓 p 消失
    ```htmlmixed
    <h1 class="title">標題</h1>
    <p>lorem</p>
    ```

    ```javascript
    $('h1').click(function(){
	    $('p').hide();
	});
    ```
    
    目標：點擊 a 連結取消預設行為
    ```html
    <a href="#" class="link">link text</a>
    ```
    ```javascript
    $('.link').click(function(e){
	    e.preventDefault();
    })
    ```

### 特效類型
- toggle() 切換

    目標：點擊 h1 讓 p 切換 顯示/消失
    ```javascript
    $('h1').click(function(){
	    $('p').toggle();
    })
    ```
### 屬性操作類型
獲取和設定元素屬性

- addClass() 動態新增 class

    目標：點擊 a ，讓標題加上 active 樣式
    ```html
    <ul>
	    <li class="item">
         <h3 class="item-title">標題1</h3>
	     <p class="item-text">1</p>
         <a href="#" class="item-link">連結1</a>
	    </li>
	    <li class="item">
         <h3 class="item-title">標題2</h3>
         <p class="item-text">2</p>
         <a href="#" class="item-link">連結2</a>
	    </li>
	    <li class="item">
         <h3 class="item-title">標題3</h3>
         <p class="item-text">3</p>
         <a href="#" class="item-link">連結3</a>
	    </li>
    </ul>
    ```
    ```css
    .active {
	    color: orange;
    }
    ```
    ```javascript
    $('.item-link').click(function(e){
	    e.preventDefault();
	    $('.item-title').addClass('active'); // 注意：active 不用加上 .
    })
    ```
- toggleClass() 
```javascript
    $('元素').toggleClass('class 名稱')
```
    
### 取得 DOM 元素

- first() 選取到第一個元素
    ```javascript
    $('元素').first()
    ```
- $(this) 選取到自身元素
    ```javascript
    $(this)
    ```    
- siblings() 選取到指定元素的**同層**元素
    ```javascript
    $('元素').siblings('同層元素')
    ```
- find() 選取到指定元素的**下層**所有子元素
    ```javascript
    $('元素').find('子元素')
    ``` 
## 中場休息 - 好康分享
1. 6/2(四) 21:00 將提供體驗營專屬，3 小時快閃優惠，想獲得更多前端技能，請預約 [Line 提醒](https://r.botbonnie.com/UF8u3)
推薦方案選擇：https://chalk-freedom-ec6.notion.site/3-a74b3d7c7aad48c888a2bfc6fb871e34

## 觀念分享

- 總複習


## 證書任務二講解
* 定價計算、top 效果、FAQ 折疊選單
    * scrollTop()
        - 屬性操作類型：獲取和設定元素屬性
    - text() 
        - 操作類型：操作 DOM 元素的新增、刪除與修改等。 改變元素內容
* 常見問題的文案
    - Q1.我要怎麼變更方案？
請聯絡您的業務專員修改訂閱方案，我們將為您進行變更流程。
    - Q2.如果我沒有LINE官方帳號怎麼辦？
沒關係的，只要您是我們任何一個方案的夥伴，我們的專員可以協助辦理哦！


## 表單填寫

[2022 公益體驗營 - jQuery](https://docs.google.com/forms/d/e/1FAIpQLSfOC-o2Z8TLZh7FbjM7Z_IE2NfUJtkqpK1FTPdTpZuiIotIXg/viewform)


## 補充資源

- [jQuery 辭典](https://oscarotero.com/jquery/)