---
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() 就會觸發，並去執行裡面的內容

$(document).ready(function () {
   // 內容
});

是誰？做了什麼事？

$(document).ready(function () {
 $('h1').hide();
   // 誰.做什麼事()
});

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

- click() 點擊

目標：點擊 h1 讓 p 消失

    <h1 class="title">標題</h1>
    <p>lorem</p>

    $('h1').click(function(){
	    $('p').hide();
	});

目標：點擊 a 連結取消預設行為

    <a href="#" class="link">link text</a>

    $('.link').click(function(e){
	    e.preventDefault();
    })

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

目標：點擊 h1 讓 p 切換 顯示/消失

    $('h1').click(function(){
	    $('p').toggle();
    })

### 屬性操作類型
獲取和設定元素屬性

- addClass() 動態新增 class

目標：點擊 a ，讓標題加上 active 樣式

    <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>

    .active {
	    color: orange;
    }

    $('.item-link').click(function(e){
	    e.preventDefault();
	    $('.item-title').addClass('active'); // 注意：active 不用加上 .
    })

- toggleClass()

    $('元素').toggleClass('class 名稱')

### 取得 DOM 元素

- first() 選取到第一個元素

    $('元素').first()

- $(this) 選取到自身元素

    $(this)

- siblings() 選取到指定元素的**同層**元素

    $('元素').siblings('同層元素')

- find() 選取到指定元素的**下層**所有子元素

    $('元素').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/)