# ⚙ jQuery 筆記
> [jQuery 官網](https://jquery.com/)
:::info
可於「開發人員工具」的『Console』介面，進行 jQuery 測試及除錯
:::
- 動態改變 CSS 效果
- 支援各類型的瀏覽器，具兼容性 :smile:
- 將程式碼簡化並包裝得非常漂亮，簡單的 code 就能觸發想要的效果
- 透過瀏覽器去跟資料庫要資料，再渲染到網頁上
- 底層是 JavaScript，設定完許多兼容 js 的語法及動畫效果，比如：CSS 屬性、HTML 屬性及插入、物件選取器、AJAX、jQery 核心、Plugin 加載、滑動效果、淡入淡出等…
---
```javascript
// javascript
const house = document.getElementById("house")
搖動(house)
function 搖動(dom){
...
}
```
```javascript
// jQuery
$(document).ready(function () {
$("#house").搖動()
})
```
<br>
- `$(document).ready(function () { ... })` 確保 jQuery 有正確載入到瀏覽器後才執行裡面的程式碼
- `$('選取器')` 為指定欲觸發的選取器，可用單引號 <kbd>' '</kbd> 或雙引號 <kbd>" "</kbd> 括起來
- `函式名稱(function () { })` 觸發事件
- `.函式名稱()` 動畫效果。小括號內可放**毫秒數**。表示：動畫持續時間 = 總花費時間
<br>
> **小提醒：**
在 JavaScript 中，用單引號 `'` 或雙引號 `"` 包住字串沒有差異性
唯一要注意的是「雙引號裡面不能有重複的雙引號，單引號也是」
通常會比較建議使用單引號括起來，有巢狀時最外層再使用雙引號
> ```javascript
> var str = "This is a "book"."; // 錯誤的寫法
> var str = 'This is a 'book'.'; // 錯誤的寫法
> var str = 'This is a "book".'; // 正確的寫法
> ```
<br>
## 引入方法
1. **CDN 載入**
- 來源：https://releases.jquery.com/
- 來源：https://cdnjs.com/libraries/jquery
2. **至[官網下載整包檔案](https://jquery.com/download/)，將檔案放到專案資料夾裡，再載入**
```html
<script src="路徑/jquery.min.js">
```
> 放在 </body> 前～ :cat2:
<br>
## 其他附註
> [選擇器 (selector) 介紹](https://ithelp.ithome.com.tw/articles/10095237)
- ### Event 事件處理器
Event 全名叫做「event handlers」也就是事件處理器，而它會記錄使用者的所有行為
講白話點就是，會 ==紀錄你點擊這個事件時的動作==，例如在哪裡點，點了什麼元素～
- ### 取消默認行為 `e.preventDefault()`
要先清除預設行為，才可增加其他功能到該標籤上～
1. 點擊擁有 `href="#"` 的 a 連結，正常來說是會跳到網頁最上方，但在某些需求上，是希望點擊 a 連結為關閉的功能（比如：彈出視窗右上角的叉叉）
2. `<input type="submit">` 送出按鈕若需清除預設行為，要先確認該 input 是否有被包在 `<form>` 裡，且 `type` 屬性值不是 `button`
有被包在 form 標籤內且 `type="submit"`（沒寫 type 預設也是 submit）才會有預設的**傳統表單送出功能**
<br>
> 要取消觸發預設行爲，需將該 e.preventDefault() 擺在後續程式碼的執行之前
```javascript
$("a.close").click(function (e) {
e.preventDefault()
// 取消默認事件後的下一行擺替補的行為
})
```
- ### `on` 監聽
```javascript
$('範圍').on('事件名稱', '範圍內欲監聽的選擇器', function () { })
```
```javascript
$('選擇器').on('事件名稱（可多個，用逗號區隔）', function () { })
```
#### 知識點： `onerror` 事件
當加載圖片發生錯誤、無法正常顯示圖片時，會觸發 `onerror` 事件
:dango: 例子：沒有 app.png 這張圖
```html
<img src="../document/app.png" onerror="this.src='../document/error.png'">
```
- ### 鍊式寫法
> [CodePen 範例](https://codepen.io/PeiHan/pen/MWeqBxZ)
各函式間寫上點點 `.` 當作連接，依序寫出要呈現的連續動畫效果
```javascript
// 點擊按鈕時，會觸發 box 每次以 700 毫秒做收合、展開連續 2 round 的事件
$("button").click(function () {
$(".box").slideUp(700).slideDown(700).slideUp(700).slideDown(700)
})
```
- ### 判斷元素是否存在
在 JavaScript 用 `querySelector` 等方式選取元素時，若該元素「不存在」會回傳 **`null`**
而 jQuery 則是可用 `.length` 查看，若回傳 **`0`** 表示沒有該元素！
```javascript
$('.header').length // != 0 有存在 ； == 0 不存在
```
> 僅返回 prevObject 也是表示該選擇器不存在於頁面ㄛ！但要用 length 才查得出來啦XD
- ### 動態創建 HTML 元素
> [官方文件](https://api.jquery.com/jQuery/#entry-examples-1)
可以使用以下的方式，搭配 `append` 或 `appendTo` ...等創建
```javascript
$('<HTML tag/>', { attr1: 'value1', attr2: 'value2', ... })
```
:arrow_right: [範例 CodePen](https://codepen.io/PeiHan/pen/OJxNZqE?editors=1011)
當然也可以直接把屬性寫在 HTML 標籤上，但屬性太多的話就會落落長，可讀性比較差一些
- ### 迴圈 `.each()`
```javascript
// 用 jQuery 選取的元素專用
$(selector).each(function (index, element) { })
// 陣列、jQuery 選取的元素都能用
$.each(列表, function (index, element) { })
```
> 第 1 個參數：索引
> 第 2 個參數：元素本身
:arrow_right: [範例 CodePen](https://codepen.io/PeiHan/pen/GRBNbmN?editors=0011)
#### :maple_leaf: 脫離 each 迴圈：
```javascript
$.each(data, function(index, obj){
if (index == 1) {
return // 等於 continue
} else {
return false // 等於 break
}
})
```
1. **`return`** :arrow_right: 等於 `continue`，會中斷該次迴圈輪次，接續下個輪次
2. **`return false`** :arrow_right: 等於 `break`，直接中斷整個迴圈
<br>
## 各種 [jQuery](https://api.jquery.com/) 函式名稱
> [辭典官網](https://oscarotero.com/jquery/)
- ### 動畫效果 Effects
| 函式名稱 | 解釋 | Remark & Example |
| -------- | -------- | -------- |
| .animate() | 自訂動畫效果 | `.animate(properties [,duration] [,easing] [,complete] )` |
| .hide() | 快速隱藏 |
| .show() | 快速顯示 |
| .fadeIn() | 淡入 |
| .fadeOut() | 淡出 |
| .slideUp() | 滑動式收合 | `$('a').slideUp(1000)` 收合時間持續一秒 |
| .slideDown() | 滑動式展開 |
| .toggle() | 可顯示及隱藏 | <font color="red">互動式</font> |
| .slideToggle() | 可滑動式顯示及隱藏 | <font color="red">互動式</font> |
| .fadeToggle() | 淡入顯示及淡出隱藏 | <font color="red">互動式</font> |
| .delay() | 延遲 | [CodePen 範例](https://codepen.io/PeiHan/pen/pobqRgb) |
| .stop() | 中斷目前動畫，進行下一個動畫 | [CodePen 範例](https://codepen.io/PeiHan/pen/QWEzqQR)|
- ### 屬性 Attributes
| 函式名稱 | 解釋 | Remark & Example |
| -------- | -------- | -------- |
| .css() | 可新增、修改 CSS 屬性值 | `.css('屬性','屬性值')` <br> 會以 *inline-style* 的方式加上樣式 [CodePen 範例](https://codepen.io/PeiHan/pen/abZPmXz) |
| .attr() | 取得／增加／修改 HTML 標籤屬性 | `$('a').attr('href', 'http://google.com')`，若沒有第二個參數，就是取得該屬性 value <br><br> <font color="red">可以用**物件**寫法一次設定多個屬性。[CodePen 範例](https://codepen.io/PeiHan/pen/ZEvWbzW?editors=1010)</font> |
| .removeAttr() | 移除屬性 |
| [.data()](https://api.jquery.com/data/) | 取得「初始的有值」的 data-* 資料，括號內可放 * 名稱 <br> 若後來動它的值，則只會秀出原始的 | `<p data-id="0912">測試</p>` <br><br> `$('p').data('id');` 回傳 `'0912'` |
| .hasClass() | 檢查元素是否包含指定 class 名稱 | 回傳布林值 |
| .addClass() | 加入 class | class 前不需加 `.` 點點 <br> 例如：`.addClass('active')` 加入 active 樣式|
| .removeClass() | 移除 class | class 前不需加 `.` 點點 |
| .toggleClass() | 可切換 class | 動態載入 class 樣式|
| .val() | 取得、設置表單元素 value |
| .text() | 清空原始內容，再載入**新內容** | 插入、取出「純文字字串」 |
| .html() | 清空原始內容，再載入**新內容** | 可載入「HTML 元素」，跟 JS 的 `innerHTML` 相同 |
| .remove() | 移除元素本身 | `.remove()` 是完全移除；<br>`.hide()` 則是暫時隱藏，還是會存在於瀏覽器內
| .empty() | 清空元素**內容** | 無法清空表單元素，表單需使用 `.val('')` 方法 |
| .prop() | 取得／增加／修改 HTML 標籤屬性 | 注意：應用在具有 checked 屬性的元素時，若是勾選的狀態會回傳 `true` 反之則是 `false` <br><br> 假若使用 `.attr()` 取得勾選狀態，則會回傳 `checked` 或 `undefined` |
| .is(":hidden") | 元素是否不可見 |
| .is(":visible") | 元素是否可見 |
- #### 移除表單元素的 checked 狀態 :warning:
首先，checked 屬性區分值的部分，是只要寫有 checked 字眼就是就一定會打勾
如果要取消打勾狀態，是不能寫成 `checked="false"` 的，這樣也會被視為 checked，只能把 checked 完全移除掉
所以若要用 jQuery 移除 checked 狀態，有以下幾個寫法<font color="gray">（第一個寫法是錯誤的！）</font>
1. :x: `.attr('checked', false)`
2. :o: `.prop('checked', false)`
3. :o: `.removeAttr('checked')`
- #### 可以用 `.prop('innerHTML')` 或 `.prop('outerHTML')` 獲取 HTML
```html
<div id="test" class="bg-dark">
<span>(ˊ_ˋ)</span>測試
</div>
```
- ##### `outerHTML` 包含元素本身
```html
<div id="test" class="bg-dark"><span>(ˊ_ˋ)</span>測試</div>
```
- ##### `innerHTML` 「不」包含元素本身
```html
<span>(ˊ_ˋ)</span>測試
```
- ### 篩選元素 Traversing
> [CodePen 範例（結合 this, siblings, parent, find）](https://codepen.io/PeiHan/pen/VwjgQaK)
| 函式名稱 | 解釋 | Remark & Example |
| -------- | -------- | -------- |
| $(this) | 選取器本身 |
| .closest(selector) | 往父階層尋找，只要找到符合條件的就停止 |
| .parent(selector) | 尋找上一層父階層元素 | 僅爸爸，不包含祖字輩 |
| .parent**s**(selector) | 尋找所有父階層元素 | 含祖字輩 |
| .siblings(selector) | 尋找同階層元素 | 朋友 |
| .children(selector) | 尋找下一層子元素內容 | 僅兒子，不包含孫字輩 |
| .find(selector) | 尋找所有子元素內容 | 含孫字輩 |
| .next() | 尋找指定元素的「下一個」鄰元素 |
| .prev() | 尋找指定元素的「前一個」鄰元素 |
| [:eq(index)](https://api.jquery.com/eq/) | 回傳第 index 個元素，也可以寫成`$(selector:eq(index))` |
- ### 其他函式
| 函式名稱 | 解釋 | Remark & Example |
| -------- | -------- | -------- |
| [.on()](https://blog.wu-boy.com/2012/04/use-on-api-to-attach-event-handlers-on-jquery/) | 綁定事件 | 可即時性<font color="red">監聽 </font>jQuery 動態載入 HTML 的效果。 [CodePen 範例](https://codepen.io/PeiHan/pen/LYZKjEy) |
| .off('事件名稱') | 移除綁定 |
| $(selector).append(content) | 於元素**尾端**++追加++內容或元素 | 在 selector 最尾端插入 content。 [CodePen 範例](https://dotblogs.com.tw/topcat/2009/12/28/12702)|
| $(content).append**To**(selector) | 於元素**尾端**++追加++內容或元素 | 把 content 加入在 selector 最尾端 |
| $(selector).prepend(content) | 於元素**開頭**++追加++內容或元素 | 在 selector 開頭插入 content |
| $(content).prepend**To**(selector) | 於元素**開頭**++追加++內容或元素 | 把 content 加入在 selector 開頭 |
| $(selector).clone(includeEvents) | 複製 selector | `includeEvents`：是否也複製元素的所有事件處理，預設 `false` |
| $(selector).before(content) | 在元素**前面**插入指定內容1 |
| $(content).insertBefore(selector) | 在元素**前面**插入指定內容2 |
| $(selector).after(content) | 在元素**後方**插入指定內容1 |
| $(content).insertAfter(selector) | 在元素**後方**插入指定內容2 |
| .parseHTML() | 將 HTML 字符串或 jQuery 選擇的元素，解析為對應的 DOM 節點數組 |
<br>
## 第三方 Plugin（插件）
<img src="https://i.imgur.com/ax5lu8v.png" width="80%">
### 須知
1. 確認熱門瀏覽器有無支援
2. 確保載入的套件 CSS、JS、img 都有正確載入
3. 若發現出錯，打開 Console 確認是否有錯誤
4. 查詢插件的 JS 設定
5. 修改 CSS 成自己要的樣式
### 套件
- #### [Swiper 輪播](https://swiperjs.com/)
可支援手機用戶的使用體驗，是兼容性最讚的一個插件
- #### [Lightbox 燈箱](https://lokeshdhakar.com/projects/lightbox2/)
<br>
<br>
###### tags: `jQ 筆記`
Sign in with Wallet
Connect another wallet