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

# 4. jQuery 增添介面使用者互動揪甘心
<!--目前ok修改切版二有需要再補筆記-->

* [主線任務](https://rpg.hexschool.com/training/29/task)、[小組任務](https://hackmd.io/0W0C-ZohS2qmaSg8uTfosA?view)、[練習](https://codepen.io/tinchen/pen/zYRXgGd)

* 如果是寫在codepen要加上jQuery CDN，也可在搜尋欄位搜尋jQuery

## jQuery 介紹

- 用 Javascript 語言來編寫的函式庫，替頁面上增加一些動態效果

- [jQuery 官網](https://jquery.com/)、[jQuery 速查表](https://oscarotero.com/jquery/)、[範例練習](https://codepen.io/tinchen/pen/zYRXgGd)
## jQuery 下載
- 選擇 [compressed production](https://jquery.com/download/) 壓縮版上線正式版

- 載入方式：
- 點擊compressed production進去後，將內容複製在另存js檔到自己的專案
- 或是複製上方的連結`https://code.jquery.com/jquery-3.6.0.min.js`到 </body> 結尾之前
- 載入順序：要先載jQuery cdn -> 再載自己寫的jQuery

## 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 連結取消預設行為
→參考小組任務，e代表event

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

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

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

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

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

    $('h1').click(function(){
	    $('p').fadeToggle(2000);//毫秒
    })

鍊式效果，執行完第一個會接著執行下一個

    $('h1').click(function(){
	    $('p').slideUp(2000).slideDown(2000);
    })

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

- 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 不用加上 .
    })

- 錯誤示範: 這裡點擊沒反應，是因為a連結有預設樣式，
若有設定網址，按下後會直接跳轉到網址，就看不到這效果了，
所以要加上e.preventDefault(); 點擊後取消預設行為

    $(document).ready(function(){
        $('.item-link').click(function(){	    
            $('.item-title').addClass('active'); 
        })    
    })


- toggleClass()

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

### 取得 DOM 元素

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

    $('元素').first()

範例: 按任一a連結，將第一個元素加上.active這個class

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

    $(this)

範例: 只有點擊的元素本人，會加上.active這個class，

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

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

- 範例: 找跟.item-link同層的.item-title並加上.active這個class

- 範例: 找跟li同層的元素，加上.active這個class，
這裡因為同層都是li所以siblings()內可以不寫


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

    $('元素').find('子元素')

- 範例 找li子層的.item-text

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

## 補充
- 連結./ 表示同層