---
# System prepended metadata

title: JQuery
tags: [jQuery]

---

###### tags: `jQuery`
# JQuery
- 一開始請宣告JQuery起手式(必要)：
![](https://i.imgur.com/QxvE4OR.jpg)
- 把.title的class隱藏
```javascript=
$(document).ready(function(){
    $('.title').hide();
    //選擇器   //做什麼事
});
```
- **.addClass**：動態載入CSS效果、Class名稱
當點擊 h1 時會觸發p 新增 .orange class名稱，藉由代入樣式。
![](https://i.imgur.com/82TJOO9.jpg)
- **.toggleClass**：新增或移除class
- **.slideToggle**：滑動切換class
當點擊 h1 時會觸發p 滑動切換效果，2000是指2秒，1000毫秒= 1秒。
![](https://i.imgur.com/QDqhO1T.jpg)

- **.attr**：改變html標籤屬性
把所有a連結的href標籤內的內容改為：http://www.kimo.com.tw
![](https://i.imgur.com/iRY3P18.jpg)
- **.html**：動態載入html標籤，例如：owl 輪播的導航點 dot，要先知道幾張照片，才知道要產生幾個點。
- JQuery 鍊式寫法
寫兩個效果的動畫，先執行第一個再執行第二個。
先執行slideUp 1秒後再繼續執行 slideDown 3秒。
![](https://i.imgur.com/2mfQ4QA.jpg)
參考影片：[jQuery基礎教學](https://www.youtube.com/watch?v=GVWOIP-HX70)



