# jQuery基礎與應用
## 什麼是jQuery
jQuery是一個JavaScript的懶人包，主要簡化JavaScript寫程式，同時也提供了豐富的插件和工具庫，讓開發者能夠更快速地開發出功能豐富、交互性強的網頁應用程式。此外，jQuery 也具有廣泛的社群支持和文檔資源，方便開發者學習和使用。
### jQuery的優點
- 減少寫程式時間和程式碼數量
- 簡化HTML文檔瀏覽和操作
- 瀏覽器兼容性，減少跨瀏覽器問題
- 多種套件和擴展庫，可擴展功能
- 龐大的開發者社區和豐富的資源和文檔
---
### 如何在你的網站上使用jQuery
- 引入jQuery核心程式
- 使用文件就緒事件$(document).ready()或使用 $(window).load()來確保HTML載入完畢
- 使用$()函數來選擇元素並控制它們
範例：
```html=
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<!-- 網頁內容放在這裡 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 你的jQuery程式碼放在這裡
});
//或簡寫成
$(function() {
// 你的jQuery程式碼放在這裡
});
</script>
</body>
</html>
```
---
### jQuery語法結構
---
### $(document).ready() 和 $(window).on('load',function{})的區別
jQuery的 $(document).ready() 和 $(window).on('load',function{}) 這兩個函式都是用來在文件載入完畢後執行JavaScript程式碼，但它們之間有一些不同。
$(document).ready() 函式會在DOM結構載入完畢後立即執行，而不需要等待網頁上所有圖片和其他資源載入完成。這使得它非常適合用於綁定事件處理函式或執行一些需要DOM就緒的操作。
$(window).on('load',function{}) 函式則會在網頁上所有的圖片和其他資源都載入完成後才會執行。這意味著它會在 $(document).ready() 函式之後執行。這使得它非常適合用於執行需要等待所有內容載入完成後才能進行的操作，例如計算網頁上所有圖片的尺寸或觸發一些複雜的動畫效果。
在大多數情況下，我們可以使用 $(document).ready() 函式，因為它能在DOM結構載入完畢後立即執行。只有在需要等待所有資源都載入完成後 **(例如大圖輪播)** 才能執行某些操作時，才需要使用 $(window).on('load',function{}) 函式。
<font color="#f00">**注意: $(window).on('load',function{}) 函式已經在 jQuery 3.0 中被廢棄，應該使用 $(window).on('load', function() {}) 來替代**</font>
---
## 選擇元素
### 基本選擇器
- 使用標籤名稱、類別名稱、ID和屬性等方式來選擇元素
- 使用冒號(:)來選擇元素的位置或狀態
範例：
```javascript=
// 選擇所有段落元素
$("p");
// 選擇所有類別為highlight的元素
$(".highlight");
// 選擇ID為myElement的元素
$("#myElement");
// 選擇所有屬性type等於checkbox的輸入元素
$("input[type='checkbox']");
// 選擇第一個段落元素
$("p:first");
```
---
### 階層選擇器
範例:
```javascript=
// 選擇所有 div 元素下的 p 元素：
$("div p");
// 選擇所有直接位於 div 元素下的 p 元素：
$("div > p");
```
#### 說明
階層選擇器可以選擇指定元素的子元素、孫子元素、曾孫元素等等。在選擇器中，可以使用空格來表示階層關係。
在上面的範例中，第一個範例選擇了所有 div 元素下的 p 元素，包括孫子元素和曾孫元素。而第二個範例則只選擇了直接位於 div 元素下的 p 元素，不包括孫子元素和曾孫元素。
---
### 屬性選擇器
範例:
```javascript=
// 選擇所有擁有 required 屬性的輸入元素：
$("input[required]");
// 選擇所有 value 屬性包含字串 email 的輸入元素：
$("input[value*='email']");
```
#### 說明
屬性選擇器可以透過元素的屬性來選擇元素。在選擇器中，可以使用中括號(\[\])來指定屬性及其值。
在上面的範例中，第一個範例選擇了所有擁有 required 屬性的輸入元素。而第二個範例則選擇了所有 value 屬性包含字串 email 的輸入元素。
<font color="#a70">**範例檔: 01_Basic/select_element.html**</font>
---
## 操作元素
### 改變 CSS 屬性
使用 `css()` 方法改變元素的 CSS 屬性。
```javascript=
// 將所有段落元素的背景顏色改為紅色
$("p").css("background-color", "red");
// 改變元素的多個 CSS 屬性
$("p").css({
"background-color": "red",
"color": "white"
});
```
<font color="#a70">**範例檔: 01_Basic/change_attr.html**</font>
### 添加和刪除元素
使用 `append()` 方法添加元素，使用 `remove()` 方法刪除元素。
```javascript=
// 在所有段落元素後面添加一個新的 div 元素
$("p").append("<div>新元素</div>");
// 刪除所有段落元素
$("p").remove();
```
<font color="#a70">**範例檔: 01_Basic/append.html**</font>
---
### 修改元素內容
使用 `text()` 方法和 `html()` 方法改變元素內容。
```javascript=
// 改變元素的文本內容
$("p").text("今天天氣真好");
// 改變元素的 HTML 內容
$("p").html("<a href=''>今天天氣真好</a>");
```
<font color="#a70">**範例檔: 01_Basic/change_content.html**</font>
---
### 使用eq()方法
jQuery 的 eq() 方法是用來選取集合中指定索引位置的元素，索引位置由參數指定。這個方法返回的是一個新的 jQuery 物件，它包含集合中指定索引位置的元素。
eq() 方法的語法如下：
```javascript
$(selector).eq(index)
```
其中 selector 為 CSS 選擇器，用於選取一組元素，index 為一個整數，指定選取的元素的索引位置。索引位置從 0 開始，表示第一個元素。
```htmlembedded=
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>eq() 方法範例</title>
</head>
<body>
<p>第一個段落</p>
<p>第二個段落</p>
<p>第三個段落</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p").eq(1).css("color", "red");
});
</script>
</body>
</html>
```
在這個範例中，`$("p")` 選取了所有的`<p>`元素，而 `eq(1)` 則選取了這個集合中的第二個元素，然後將它的文字顏色設定為紅色。注意索引位置是從 0 開始的，所以 `eq(1)` 選取的是第二個元素。
## 事件處理
### 常見的事件
常見的事件包括點擊事件（click）、滑鼠移動事件（mousemove）、鍵盤按下事件（keydown）等等。
### 常用事件列表
[W3school jQuery事件列表](https://www.w3school.com.cn/jquery/jquery_ref_events.asp)
#### 滑鼠事件
:::success
* [**click**](https://api.jquery.com/click/) - 當元素被點擊時觸發
* [**dblclick**](https://api.jquery.com/dblclick/) - 當元素被雙擊時觸發
* [**hover**](https://api.jquery.com/hover/) - 當滑鼠滑入與滑出時觸發
* [**mouseenter**](https://api.jquery.com/mouseenter-shorthand/) - 當滑鼠進入元素時觸發
* [**mouseleave**](https://api.jquery.com/mouseleave/) - 當滑鼠離開元素時觸發
* [**mousemove**](https://api.jquery.com/mousemove/) - 當滑鼠在元素上移動時觸發
* [**mousedown**](https://api.jquery.com/mousedown/) - 當滑鼠按下時觸發
* [**mouseup**](https://api.jquery.com/mouseup/) - 當滑鼠鬆開時觸發
:::
<font color="#a70">**範例檔: 02_Events/event_basic.html**</font>
#### 表單事件
:::success
* [**keydown**](https://api.jquery.com/keydown/) - 當按下鍵盤按鈕時觸發
* [**keyup**](https://api.jquery.com/keyup/) - 當鬆開鍵盤按鈕時觸發
* [**focus**](https://api.jquery.com/focus/) - 當元素獲得焦點時觸發
* [**blur**](https://api.jquery.com/blur/) - 當元素失去焦點時觸發
* [**change**](https://api.jquery.com/change/) - 當元素的值發生變化時觸發
* [**submit**](https://api.jquery.com/submit/) - 當表單提交時觸發
:::
<font color="#a70">**範例檔: 02_Events/event_form.html**</font>
#### 視窗事件
:::success
* [**resize**](https://api.jquery.com/resize/) - 當窗口大小變化時觸發
* [**scroll**](https://api.jquery.com/scroll/) - 當元素滾動時觸發
* [**unload**](https://www.w3school.com.cn/jquery/event_unload.asp) - 當用戶離開頁面時觸發事件，通常用於執行一些清理操作。
* [**load**](https://www.w3school.com.cn/jquery/event_load.asp) - 當整個文檔以及內容都加載完成時觸發事件。
* [**beforeunload**]() - 當用戶嘗試離開頁面時觸發事件，通常用於確認是否保存了未保存的數據。
:::
<font color="#a70">**範例檔: 02_Events/event_window.html**</font>
#### 什麼是event物件?
event物件是 JavaScript 中用來描述事件的一種資料結構。
它包含了與事件相關的資訊，例如事件的類型、哪個元素觸發了事件、事件發生的時間等等。
舉例來說，當你在網頁上點擊一個按鈕時，瀏覽器會建立一個事件物件，其中包含了點擊事件的類型（click）、按鈕元素，以及點擊發生的時間。這個事件物件還可以告訴你如何阻止預設行為（例如取消連結跳轉），或者如何停止事件傳遞給更高層級的元素。
事件物件的作用是幫助你理解和處理使用者和網頁元素之間的互動，讓你可以根據事件的資訊來改變網頁內容或執行其他操作。在事件處理函數中，事件物件會自動被建立和傳遞，你可以使用它來獲取事件的詳細資訊和控制事件的行為。
#### 事件物件通常包含以下屬性：
:::success
* **[event.type](https://www.w3school.com.cn/jquery/event_type.asp)**：事件的類型，例如 "點擊"、"按鍵按下"、"滑鼠移動" 等。
* **[event.target](https://www.w3school.com.cn/jquery/event_target.asp)**：觸發事件的元素，也就是事件發生的對象。
* **[event.currentTarget](https://www.runoob.com/jsref/event-currenttarget.html)**：事件處理函式目前正在處理事件的元素。
* **[event.timeStamp](https://www.w3school.com.cn/jquery/event_timeStamp.asp)**：事件發生的時間，通常是從頁面載入開始計算的毫秒數。
* **[event.preventDefault()](https://www.w3school.com.cn/jquery/event_preventdefault.asp)**：方法，可用於阻止事件的預設行為，例如取消超連結的跳轉或表單的提交。
* [停止事件冒泡（stopPropagation()）](https://www.runoob.com/jquery/event-stoppropagation.html)：方法，可用於停止事件冒泡，防止事件傳遞到更高層級的元素。
* **[event.keyCode](https://www.runoob.com/jsref/event-key-keycode.html)**：僅適用於鍵盤事件，表示按下的鍵的鍵碼。
* **[event.pageX/event.pageY](https://www.w3schools.com/jsref/event_pagex.asp)**：滑鼠事件特有的屬性，表示滑鼠指針在頁面上的水平和垂直坐標位置。
:::
### 如何使用事件
```javascript=
// 綁定 click 事件
$("button").on('click','function(){
alert("你點擊了按鈕");
});
// 綁定 mousemove 事件
$("div").mousemove(function(){
$(this).css("background-color", "yellow");
});
```
<font color="#a70">**範例檔: 02_Events/event_form.html**</font>
---
### 綁定和解除綁定事件
使用 `on()` 方法綁定事件，使用 `off()` 方法解除綁定事件。
```javascript=
// 綁定 click 事件
$("button").on("click", function(){
alert("你點擊了按鈕");
});
// 解除綁定 click 事件
$("button").off("click");
```
<font color="#a70">**範例檔: 02_Events/off_event.html**</font>
---
### 事件委派
使用 `on()` 方法進行事件委派，可以幫助我們減少事件綁定的次數。事件委派是一種將事件處理器添加到祖先元素而不是直接添加到目標元素的技術。當事件發生時，祖先元素會捕獲到事件，並在事件執行前的階段處理它，使用事件委派的好處是可以減少事件處理器的數量，特別是在動態添加元素的情況下。當我們使用 `on()` 方法進行事件委派時，不需要對每個新添加的元素都添加事件處理器，而是只需要對它們的祖先元素添加一次事件處理器即可。
舉例來說，假設我們有一個動態添加的列表，我們想要對其中的每個按鈕添加點擊事件處理器。如果我們使用普通的事件綁定方式，每當我們向列表中添加新的按鈕時，都需要為其添加一個新的事件處理器。但是，如果我們使用事件委派，只需要對列表元素添加一個事件處理器，就可以對所有按鈕進行處理。
以下是使用事件委派對動態添加的列表進行點擊事件處理器的一個範例：
```htmlembedded
<ul id="my-list">
<li><button>按鈕1</button></li>
<li><button>按鈕2</button></li>
<li><button>按鈕3</button></li>
</ul>
```
```javascript=
// 為my-list中所有按鈕元素進行事件委派
$('#my-list').on('click', 'button', function() {
// 程式碼
});
```
在這個例子中，我們把事件處理器添加到 `#my-list` 元素上，而不是直接添加到 `button` 元素上。當點擊任何一個按鈕時，事件會發生在 #my-list 元素，然後被處理器處理。
<font color="#a70">**範例檔: 02_Events/bind_all.html**</font>
## 動畫效果
### 隱藏和顯示元素
使用 `hide()` 方法和 `show()` 方法隱藏和顯示元素。
```javascript=
// 隱藏所有段落元素
$("p").hide();
// 顯示所有段落元素
$("p").show();
```
<font color="#a70">**範例檔: 03_Effects/hide_show.html**</font>
-
### 滑動和淡入淡出效果
使用 `slideDown()` 方法、`slideUp()` 方法、`slideToggle()`方法、`fadeIn()` 方法和 `fadeOut()` 方法實現滑動和淡入淡出效果。
```javascript
// 滑動顯示所有段落元素
$("p").slideDown();
// 淡入所有段落元素
$("p").fadeIn();
// 淡出所有段落元素
$("p").fadeOut();
// 自動偵測元素狀態決定顯示或隱藏
$(".menu").slideToggle();
```
#### <font color="#a70"> 練習: 開啟04_Effects/demo/nav_example.html，在選單上使用`slideToggle()`加上互動行為</font>
### 使用animate自訂動畫
animate() 可以實現對元素的動畫效果，如位置、大小、透明度、顏色等的變化。
函式語法
```javascript
$(selector).animate({styles}, duration, easing, complete);
```
**參數說明:**
:::warning
selector：要進行動畫效果的元素。
styles：動畫效果的 CSS 屬性及其目標值，以 JavaScript 物件的形式表示。
duration：動畫效果的持續時間，以毫秒為單位，預設值為 400 毫秒。
easing：動畫效果的速度曲線，即動畫的加速度。常用的值有 "swing" 和 "linear"。預設值為 "swing"。
complete：動畫完成後要執行的函式，可選參數。
:::
使用 `animate()` 方法自定義動畫效果。
```javascript=
// 將所有class名為.box的div元素的寬度增加到 500px，動畫持續時間為 1 秒
$(".box").animate({
width: "500px"
}, 1000);
```
<font color="#a70">**範例檔: 04_Effects/animate.html**</font>
## 常用動畫方法一覽
:::success
[.slideToggle()](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle)：在顯示和隱藏之間切換元素。
[.hide()](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide)：隱藏指定元素。
[.show()](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_show)：顯示指定元素。
[.fadeOut()](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeout)：將指定元素逐漸淡出。
[.fadeIn()](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadein)：將指定元素逐漸淡入。
[.slideUp()](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slideup)：將指定元素滑動向上隱藏。
[.slideDown()](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slidedown)：將指定元素滑動向下顯示。
[.animate()](https://www.w3schools.com/jquery/eff_animate.asp):與css並用製作元素的動畫效果
:::
配合css樣式的transition設定過渡，或使用jQuery UI Effects, 搭配以下jquery方法也可完成動畫效果
:::success
[.toggleClass()](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggleclass)：將指定元素的一個或多個類別切換開/關。
[.addClass()](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_addclass)：向指定元素添加一個或多個類別。
[.removeClass()](https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_removeclass)：從指定元素中刪除一個或多個類別。
:::
## 使用jQuery UI與外掛
### 什麼是jQuery UI
jQuery UI 是一個基於 jQuery 的 JavaScript 庫，用於為 Web 應用程式提供交互式 UI 元素和效果。它包含了許多常用的 UI 元素和效果，例如對話框、按鈕、選項卡、拖放等等。
jQuery UI 提供了一個強大且易於使用的 API，讓開發人員能夠輕鬆地在 Web 應用程式中添加交互式 UI 元素和效果，並為使用者提供更好的使用體驗。jQuery UI 提供了許多自訂選項和事件，使得開發人員可以自由地配置 UI 元素和效果，以適應不同的需求和場景。
jQuery UI 還提供了主題支援，允許開發人員輕鬆地自訂 UI 元素的外觀和風格，以適應不同的設計風格和品牌形象。
---
### 如何使用jQuery UI
要使用 jQuery UI，需要先下載並包含 jQuery 和 jQuery UI 的 JavaScript 文件。可以從 jQuery UI 官方網站（https://jqueryui.com/）下載最新的版本。
下載完成後，在 HTML 文件中引用這兩個文件，並確保 jQuery UI 的 JavaScript 文件在 jQuery 文件之後引用。
以下是使用 jQuery UI 的 dialog() 方法在點擊按鈕時顯示對話框的例子：
```htmlembedded=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 範例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>
<body>
<button id="my-button">顯示對話框</button>
<div id="my-dialog" title="對話框標題">這是對話框內容</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<script>
$(function() {
$('#my-button').on('click',function() {
$('#my-dialog').dialog();
});
});
</script>
</body>
</html>
```
當按鈕被點擊時，事件處理器會顯示對話框，使用 jQuery UI 的 dialog() 方法實現。
---
### 如何搜尋與使用jQuery外掛
Google 搜尋「jquery XXX plugin」可找到常用的jquery外掛
再針對需要的功能做進階搜尋，例如輪播外掛(slider)「jquery slider plugin」即可找到所需要的外掛
---
### 使用Owl Carousel 2輪播外掛
[官方文件](https://owlcarousel2.github.io/OwlCarousel2/)
使用任何外掛的步驟
1. 下載外掛(或掛載cdn)
2. 加入外掛的css
3. 加入外掛的js
4. 查詢官方API文件
在 05_jQuery_Plugin 資料夾中新增html檔案製作輪播圖
---
### 使用Animate css + Wow.js製作網站區塊動畫
[Animate CSS官網](https://animate.style/)
Animate.css 是一個用於網頁動畫效果的 CSS 外掛。它是一個包含了許多預定義動畫效果的 CSS 檔案，這些動畫效果可以直接套用在 HTML 元素上，並且不需要寫任何 JavaScript 程式碼。
#### 單純使用Animate.css
```htmlembedded
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box animate__animated animate__bounce">Hello, world!</div>
</body>
</html>
```
[Wow.js官網](https://wowjs.uk/)
WOW.js 是一個基於 jQuery 的 JavaScript 外掛，用於實現滾動時元素動畫效果。使用 WOW.js 可以使你的網頁充滿生氣和動態感，吸引用戶的注意力。
WOW.js 的使用非常簡單，只需要在 HTML 文件中引入相關的 CSS 和 JavaScript 檔案，然後在需要添加動畫效果的元素上加上特定的類別即可。WOW.js 提供了許多預設的動畫效果，同時也支援自定義動畫效果。
#### 如何使用wow.js
```javascript
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
<body>
<div class="wow animate__animated animate__bounce">Hello, world!</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>
```
### 使用face-cursor.js製作3D特效
face-cursor.js [Github](https://github.com/matthias-vogt/face-cursor.js)
### 使用particle.js製作互動式背景
Particle.js 是一款基於 HTML5 Canvas 的輕量級粒子動畫引擎，可以用來製作互動式背景。
使用步驟
1. 下載particle.js
2. 在script區塊中加入particle程式碼
3. 調整需要的參數
範例參考:https://codepen.io/VincentGarreau/pen/bGxvQd
### 使用jq-waterfall(瀑布流)動態載入圖片
使用範例文章:https://www.jq22.com/jquery-info9336
### 更多jQuery外掛
1. [jQuery時間軸外掛集]([https:/](https://www.jqueryscript.net/blog/best-timeline-components.html)/)
2. [jQuery相片簿外掛集](https://www.jqueryscript.net/gallery/list-8-3.html)
3. [jQuery 手風琴特效外掛集](https://www.jqueryscript.net/plus/search.php?kwtype=0&keyword=jquery+accordion)
4. [jQuery 圖片放大(Zoom) 外掛](https://www.jqueryscript.net/zoom/hover-extended-magnify.html)
5. [瀑布流](https://masonry.desandro.com/)
6. [svg animate](https://www.hongkiat.com/blog/svg-animations/)
7. [svg 線條動畫](https://css-tricks.com/svg-line-animation-works/)
## jQuery DOM Tree 結構相關方法
### 常見的 jQuery Tree Traversal(遍歷) 方法
:::success
**[find()](https://www.w3school.com.cn/tiy/t.asp?f=jquery_find)**：查找元素的後代元素，符合指定選擇器的元素。
**[children()](https://www.w3school.com.cn/tiy/t.asp?f=jquery_children)**：查找元素的直接子元素，可選擇性篩選符合指定選擇器的子元素。
**[parent()](https://www.w3school.com.cn/tiy/t.asp?f=jquery_parents)**：查找元素的父元素，可選擇性篩選符合指定選擇器的父元素。
**[parents()](https://www.w3school.com.cn/tiy/t.asp?f=jquery_parents2)**：查找元素的所有祖先元素，可選擇性篩選符合指定選擇器的祖先元素。
**[parentsUntil()](https://www.w3school.com.cn/tiy/t.asp?f=jquery_parentsuntil)**： 用於查找元素的所有祖先元素，同樣可以指定一個結束條件。它返回從當前元素到結束條件之間的所有匹配元素，不包括結束條件元素本身。
**[siblings()](https://www.w3school.com.cn/tiy/t.asp?f=jquery_siblings)**：查找元素的同級元素，可選擇性篩選符合指定選擇器的同級元素。
**[next()](https://www.w3school.com.cn/tiy/t.asp?f=jquery_next)**：查找元素的下一個同級元素，可選擇性篩選符合指定選擇器的下一個同級元素。
**[prev()](https://www.w3school.com.cn/jquery/traversing_prev.asp)**：查找元素的前一個同級元素，可選擇性篩選符合指定選擇器的前一個同級元素。
:::
**[<font color="#a70">更多遍歷的方法</font>](https://www.w3school.com.cn/jquery/jquery_ref_traversing.asp)**
### 使用find()方法
find() 函數是 jQuery 中用來查找特定元素或元素集合的方法。
它的語法如下：
```javascript
$(selector).find(childSelector)
```
其中 selector 是要查找的父級元素選擇器，childSelector 是要查找的子元素選擇器。
```htmlembedded=
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>find() 方法範例</title>
</head>
<body>
<div class="container">
<p>這是第一段文字</p>
<p>這是第二段文字</p>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
const paragraphs = $('.container').find('p');
console.log(paragraphs);
});
</script>
</body>
</html>
```
上述程式碼會回傳`.container`中所有`p`元素
---
### parent()與siblings()方法
使用 jQuery 的 parent() 函數時，它會返回選定元素的直接父級元素。而 siblings() 函數則返回選定元素的同級元素。
範例:
HTML
```htmlmixed
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
```
Javascript
```javascript
$(document).ready(function() {
$('.item').on('click',function() {
// 使用 parent() 函數獲取父級元素
var parentElement = $(this).parent();
parentElement.css('background-color', 'red');
// 使用 siblings() 函數獲取同級元素
var siblingElements = $(this).siblings();
siblingElements.css('color', 'blue');
});
});
```
### next()、prev()方法
jQuery的next()和prev()方法用於選擇同一層級中的下一個或上一個元素。
HTML
```htmlmixed
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<button id="prevBtn">上一個</button>
<button id="nextBtn">下一個</button>
```
Javascript
```javascript
var divs = $("#div1, #div2, #div3");
var currentDiv = divs.first();
$("#prevBtn").on('click',function() {
currentDiv = currentDiv.prev();
if (currentDiv.length == 0) {
currentDiv = divs.last();
}
alert(currentDiv.attr("id"));
});
$("#nextBtn").on('click',function() {
currentDiv = currentDiv.next();
if (currentDiv.length == 0) {
currentDiv = divs.first();
}
alert(currentDiv.attr("id"));
});
```
### 常用陣列方法
#### each()方法
通常用於陣列或物件，針對每一物件或陣列執行動作
```javascript
var fruits = ["蘋果", "香蕉", "橙子", "草莓", "葡萄"];
$.each(fruits, function(index, value) {
$("#output").append("<p>水果 " + (index + 1) + ": " + value + "</p>");
});
```
上述程式將每個陣列中的項目加入到output元素中
<font color="#a70">**範例檔: 05_Traversal&Filtering/each.html**</font>
#### map()方法
將每個元素依條件轉換成一個新值，並返回一個新的 jQuery 物件
```htmlembedded
<div id="fruits">
<p>蘋果</p>
<p>香蕉</p>
<p>橙子</p>
<p>草莓</p>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 選擇所有段落元素並使用 .map() 方法
var transformedFruits = $("#fruits p").map(function(index, element) {
// 將每個段落元素的文字內容包裹在 <span> 標籤中，並加入 "特價中" 的字樣
return "<p>" + $(element).text() + "<span style='color:red;'>特價中</span></p>";
});
});
</script>
```
#### inArray()方法
檢查指定值是否存在於集合中，並返回其索引位置，若不存在則回傳-1。
```javascript
var fruits = ["蘋果", "香蕉", "橙子", "草莓", "葡萄"];
var index = $.inArray("蘋果", fruits); // 檢查 "蘋果" 是否在陣列中
```
<font color="#a70">**範例檔: 05_Traversal&Filtering/map.html**</font>
## 小練習
:::warning
將03_Traversal&Filtering/imgs，檔名變成陣列，
並使用each方法將四張圖片橫向顯示在畫面上，各圖片中間加上10px距離
:::
### jQuery filtering(過濾功能)
jQuery的過濾功能(filtering)是一種強大的工具，可以讓你根據特定的條件來選擇元素
#### 基本過濾選擇器： 這些過濾選擇器用於根據元素的基本特徵進行選擇，例如元素類型、ID 和類別。
:::info
:not(selector)：選擇不符合指定選擇器的元素。
:::
#### 內容過濾選擇器： 這些過濾選擇器基於元素的內容進行選擇。
:::info
:contains(text)：選擇包含指定文本的元素。
:empty：選擇沒有子元素或文本內容的元素。
:has(selector)：選擇包含符合指定選擇器的元素的<font color="#f00">**父元素**</font>。
:::
#### 可見性過濾選擇器： 這些過濾選擇器用於選擇可見或隱藏的元素。
:::info
:visible：選擇可見的元素。
:hidden：選擇隱藏的元素。
:::
<font color="#a70">**範例檔: 05_Traversal&Filtering/filtering_01.html**</font>
#### 表單過濾選擇器： 這些過濾選擇器用於選擇表單元素。
:::info
:input：選擇所有輸入元素。
:text：選擇文本輸入框。
:radio：選擇單選按鈕。
:checkbox：選擇複選框。
:submit：選擇提交按鈕。
:button：選擇按鈕元素。
:::
<font color="#a70">**範例檔: 05_Traversal&Filtering/filtering_form.html**</font>
## 進階應用
### 燈箱效果(Lightbox)
#### 範例檔: <font color="#a70">**04_Effects/lightbox.html**</font>
#### 說明:
此程式碼實現了一個基本的 jQuery lightbox 效果，當 `.lightbox` 元素被點擊時，會顯示一個 `.lightbox-overlay` 遮罩層，並顯示點擊的圖片。當 `.lightbox-close` 元素被點擊時，則會隱藏 `.lightbox-overlay` 遮罩層，關閉圖片顯示。
在程式碼中，我們使用了 jQuery 的點擊事件和屬性操作方法來實現這個效果。`$(this)` 表示被點擊的 `.lightbox` 元素，`.attr('href')` 方法用於取得該元素的 href 屬性，即所點擊圖片的 URL。同樣地，我們使用 `.attr('src', imageUrl)` 方法將所點擊圖片的 URL 設置為 `.lightbox-image` 元素的 `src` 屬性，以顯示圖片。
`.fadeIn()` 和 `.fadeOut()` 方法用於顯示和隱藏遮罩層。這些方法使用 CSS3 的過渡效果，實現了圖片的淡入和淡出效果。
---
### 手風琴效果(Accordion)
#### 範例檔: <font color="#a70">**04_Effects/accordion.html**</font>
進階應用: 製作出類似以下連結的橫向手風琴特效
[https://codepen.io/mattbag/pen/LRvrmZ](https://codepen.io/mattbag/pen/LRvrmZ)
---
### 動態Menu
#### 範例檔: <font color="#a70">**04_Effects/menu.html**</font>
:::warning
如何知道目前元素是否套用特定的class名稱❓
使用hasClass方法，物件會回傳true或false告知你目前物件是否套用指定的class
hasClass() 方法是 jQuery 提供的一個用於檢查選擇元素是否具有指定 CSS 類別的方法。它返回一個布林值，如果元素具有指定的類別，則返回 true，否則返回 false
:::
---
### 回家作業
:::warning
完成以下圖片自動輪播動畫(每3秒換一張)，並在點左右箭頭時換圖，底下圓點要同步更換樣式
提示: 圓點可使用prev()跟next()切換
<font color="#f00">***之後統一於課堂上解答***</font>
:::
---
### 進階應用範例參考:折疊卡片特效
<font color="#a70">**範例檔: 04_Effects/open_card.html**</font>
---
### 更多jQuery特效範例
[閃動特效](https://codepen.io/LewisSharpe96/pen/XmpVZN)
## 使用 AI 來幫助學習 jQuery
現代開發者可以使用 AI 來解決問題、學習新技術或優化程式碼
善用AI工具可以讓自己的能力加速提升
### 使用 ChatGPT 來快速學習 jQuery 語法
### **常用 jQuery 學習 Prompt**
1. **基礎語法**
- 「請解釋 jQuery 的基本語法結構，並提供範例。」
- 「如何用 jQuery 選擇所有 class 為 'active' 的元素？」
- 「jQuery 的 `.on()` 方法與 `.click()` 方法有什麼不同？」
2. **DOM 操作**
- 「請提供一個範例，使用 jQuery 改變 `<p>` 標籤的文字顏色？」
- 「如何使用 jQuery `append()` 方法來新增一個 `<div>`？」
- 「請幫我優化這段 jQuery 程式碼，讓它更簡潔」：
```html
$('#btn').on('click', function() { $('#content').slideToggle(); });
```
3. **事件處理**
- 「如何使用 jQuery `on()` 方法來處理點擊事件？」
- 「請幫我寫一個 jQuery 事件範例，當滑鼠懸停在 `<div>` 上時，變更背景顏色。」
4. **動畫與效果**
- 「請提供一個範例，使用 jQuery `fadeIn()` 和 `fadeOut()` 來製作淡入淡出效果？」
- 「如何讓元素使用 `slideToggle()` 做出動畫效果？」
- 「請問 jQuery `animate()` 方法的使用方式？有沒有範例？」
5. **AJAX 與資料處理**
- 「請幫我寫一個 jQuery AJAX 程式，從 API 獲取 JSON 資料。」
- 「如何用 jQuery `$.post()` 方法發送表單資料？」
- 「請提供一個範例，使用 jQuery 處理 AJAX 錯誤回應？」
6. **jQuery 外掛開發**
- 「如何使用 jQuery 開發一個簡單的外掛？」
- 「請幫我寫一個 jQuery 外掛，當滑鼠懸停在圖片上時，顯示放大效果。」
- 「有哪些好用的 jQuery 外掛可以用來製作動畫效果？」
7. **最佳化與 Debugging**
- 「請幫我找出這段 jQuery 程式的錯誤」：
```
$("#box").fadeIn(500).delay(1000).fadeOut(500);
```
- 「如何優化 jQuery 程式碼以提升效能？」
- 「請問有沒有可以搭配 jQuery 使用的 Debug 工具？」
---
### 🏆 **挑戰：練習使用ChatGPT製作圖片輪播 (使用 jQuery)**
#### **功能需求**
1. **圖片輪播**
- 須使用 `append()` 動態新增圖片
- 圖片應存於 Array 中，學生需從 Array 取值並顯示
- 點擊「下一張」或「上一張」按鈕切換圖片
- 圖片需置中，不管視窗如何變動都要在中間
2. **淡入淡出動畫**
- 切換圖片時，使用 `fadeIn()`,`fadeOut()` 來製造切換效果
3. **dot 指示器**
- 下面有對應數量的 **dot**
- 當前顯示的圖片，其 dot 需高亮
### 進階挑戰
- 將圖片輪播增加自動輪播功能
- 使用AI工具製作出圖片放大鏡效果
Sign in with Wallet
Connect another wallet