---
# System prepended metadata

title: 快速了解JQuery
tags: [JQuery]

---

# 快速了解JQuery
###### tags: `JQuery`

## [JQuery官方網站](https://jquery.com/)

## [下載 JQuery](https://jquery.com/download/)

## [JQuery api reference](https://oscarotero.com/jquery/)

## 起手式

### 在 JS 檔案中定義下圖的語法， JQuery 操作需要寫在這個 ready 裡面
![](https://i.imgur.com/6oMo56a.png)

### 對 HTML 元素設定事件 (套用 hide() 為例)

`hide()` 是將 HTML 元素做隱藏
![](https://i.imgur.com/eijis6S.png)

### 當點擊 class = title 的 h1 ， p 內容會觸發 toggle() 事件
![](https://i.imgur.com/z9bmJ6t.png)

### 一個效果接著在觸發下一個效果，直接寫在效果後面就可以惹!
![](https://i.imgur.com/uCDcaux.png)

## 動態載入

### 利用 JQuery 將一個標籤賦予 class ， 並透過 class 執行事件
![](https://i.imgur.com/OSmX9Gm.png)

可以看到 `p` 有了一個 class 名稱
![](https://i.imgur.com/ZycoImI.png)

#### 為什麼要透過 JQuery 來加入 class

A: JQuery 動態加入 class 在管理上比較方便，只需要在動畫過程中加入而已

### 透過 JQuery 動態載入屬性 

#### `attr` 為屬性的意思，這行是在說將 所有的 a 連結的 href 新增連結，如果一來所有的 a 連結都會連到給予的網址
![](https://i.imgur.com/HlCSlPp.png)


### JQuery 新增 html
![](https://i.imgur.com/M9ukgj1.png)

### 你可以發現自己寫的 html 都被這個 JQuery 給取代掉了
![](https://i.imgur.com/keDR2Ei.png)

