# jQuery
###### tags: `jQuery`

## jQuery Object
透過$符號代表將目標宣告為jQuery物件，這樣即可以使用jQuery的Method：


範例，選擇id為target的目標透過css將背景改為黃色：

## 一般直接改變css的辦法 .CSS()
如果是要改一個值可以直接丟string進去，如果要一次改多個可以丟物件進去(一包)：
但這種直接改變有時候會太突然，造成user的體驗沒那麼好，所以會用到animate。

## Animate
透過animate可以有漸層效果，並且還有須多的方法可以使用：
最一般的就是animate，然後可以配合使用stop(停止之前的動畫，這一部很重要，因為jQuery使命必達，一直來回觸發效果會做完為止)、delay、callback等效果，callback就等於先做一件事之後，在接著做的意思，所以裡面包function(注意，這裡的function是匿名function)。

!注意：animate裡面給的值都是物件型態

範例：

## 一些預設的Method

範例：

## Events
### mouse相關
#### .click()
點擊時觸發
範例，點擊時變底色：

#### .hover()
移上去時觸發

#### .scroll()
滑鼠滾動時觸發

#### e.stopPropagation
對於事件的觸發，會由內層傳到外層，形成明明不想有效果的區域產生效果，相互影響，所以要用e.stopPropagation解決，讓他停止往外傳播：


### Keyboard相關

範例，KeyCode就是以ascii碼來對應鍵盤：

### Form相關
範例，focus是選取填寫欄時觸發，blur是離開時觸發，change是判斷有沒有改變裡面的內容(觸發blur才會同時觸發change判斷)，select是判斷有沒有選取裡面的字：

#### Submit
送出表單時的事件，通常用來監聽form，可以用來判斷表單內容有無錯誤，可以在送出前攔截：


讓它阻止做預設的事情

## Document.ready
等待網頁內容全部載入的意思，非常重要，否則可能還沒載入時就下命令，會沒有效果。

## on/off
類似binding，但是兩者有不同之處，舉例來說，binding是"叫同學去下在投影片"(跟當下的同學講)，on是"叫老師跟同學講要下載投影片"(有同學進來都會講)：

off則是，告訴老師不需要了(釋放命令)。

## fire
觸發，假如有不同的事件發生，要產生相同的效果，可以不用重複寫，直接透過觸發來連結，產生一樣的效果：

## Traversing
### find/children
find是找目標底下所有符合的node：


children是找目標底下一層所符合的node：


### parent/closest
parent指的是目標的上一個節點：

closest指的是找祖先，但是必須要指定找哪個祖先：


### siblings

### first/last/eq

## DOM manipulate
### .append()/.prepend()/.before()/.after()
範例，假如點擊一下就在前面插入新的item：


範例，點擊一下就可把data加入在"裡面"：


四者差異，橘色為插入內容：

### .html()
與append不同的是，.html會把內容清空(.empty())再塞入資料，append則是累加進去的。

### .remove()/.empty()/.clone()
.remove是將整個html刪掉，empty是將內容清掉，clone是複製html，所以可以用clone搭配empty做出之前範例的效果，先複製一行item的html，然後再用empty清空，就不需重新寫：

### .addClass()/.removeClass()/.toggleClass()
addClass是加上calss，remove是刪除class，toggleClass是會自動判斷有沒有這個class，如果有就刪除，沒有就補上：

### .css()
.css()除了之前的修改以外，還可以讀取它的值，範例，當滑鼠移過時，透過.css()讀取寬度，並給予對應的橘色底線：


### .prop()/.val()
.prop是代表屬性，val代表值(因為value這個屬性太常被使用，所以jQuery單獨把他拉出來)，以這個範例來說，手機的input欄位，輸入的type就是text(屬性)，而裡面的內容09XXXXX就是val：

除了讀取以外，也可以改變屬性與寫入值，有給值就是寫入，沒給值就是讀取：

### .data()
html5，隱藏型的資料，例如以下gmail範例，其實每一封信都有一個隱藏的id，當user點擊之後，會把這封信的id號碼傳送給google的server，來請求該id底下的信件內容，所以.data()就有點像是一個隱藏的tag：



可以讀取也可以寫入：

也可以寫入多個.data-tag。

### .position()/.offset()
兩個都是取得目標位置，position主要是透過父親的位置來計算自己的相對位置在哪，offset則是針對整個網頁document去計算相對位置：

# 事件、找目標、做處理

## 練習
### 用jQuery來模擬go-top按鈕

為了讓scroll有緩慢的移動的效果，而不是預設a(站內連結)直接跳過去，必須要先阻擋預設的功能，利用preventDefault()來阻擋：

用scrollTop可以達到跟預設一樣的效果，但不是我們要的：

要使用animate來達到動畫效果，但這邊要注意的是，$(document)不支援animate，所以必須要用selector選擇body，但有的browser只選擇body會沒有效果，而是要選擇html才有效果，所以通常會把兩個都寫上去：
這是特別案例，弱是其他的盡量不要用,分隔，盡量都使用單一selector就好。

### 以前沒有css3時用js做hover效果

### 使用hover顯示info



現在用css3可以很快做到：

### 滾動到目標位置後才觸發效果(類似延遲載入)

可以透過animate去改變屬性，但是效能會比較差，因為只要滑鼠滾動時，就不斷在監聽，且>850就不斷改變，所以可以用css搭配js來做：
加入一個.in的class，然後透過js把class加上去

## 利用jQuery來做UI
### tabs
假如要做3個按鈕，點選不同按鈕會出現對應的內容在下方，但要如何對應，通常會取一堆id或class來識別判斷，但這樣非常麻煩且易出錯：

所以可以用"順序"來判斷，第一個tab就對到第一個content，第二個tab就對應第二個content，以此類推，透過js來取得index()並移動active class：

### todo list
html架構：

css架構：

js：

但如果這個list是空的，clone第一行就會有問題，所以通常用"templates"來解決，可以先制定好模板，然後裡面的值是可以變動的：
一個做templates的網站 -> https://handlebarsjs.com

更新的部分：
這邊要注意為什麼要使用on?，因為才能告訴新加入的元素資訊(叫已知同學告訴新加入的同學要下載投影片)，所以這裡的必須要用on，也就是當li這個元素dblclick時，要給他加入一個editing class以及讓input呈現focus狀態。

這邊也是一樣的道理，當input([type="text"]])部分blur時，把剛剛輸入的內容(val)存在變數content內，然後再找他的siblings .content這邊塞入html(.content對於input來說結構上是兄弟關係)，最後再把最近的li(closet("li"))，也就是同一格的li移除掉editing模式狀態。

刪除的部分：
按刪除之後詢問user是否確定要刪除。

當click delete這個按鈕的時候，使用jQuery的內建功能confirm來跳出視窗詢問user是否確定，如果是true就把最近的li刪除。

## Plugins
雖然現在很多畫面的動畫已經被css3取代，但是plugin還是需要用到jQuery。
### modal
點擊按鈕之後會跳出訊息視窗：

必須要先把html架構好：

然後再把modal先用css隱藏起來：

然後使用js來觸發彈出跟關閉(fadeIn/fadeOut)：

且因為要顯示的內容釋放在最下面且fixed，所以觸發時會蓋掉其他內容，但如果不是放在最下方，則可能需要z-index：

### lightbox
lightbox就是因為圖片通常檔案都很大，全部載入需要耗費很多效能，所以通常會先放一個縮圖，然後點擊之後才會放大並且載入原圖：


作法：
html部分會在小圖外面包一層大圖的連結(a)

但這樣會帶到另一個網頁，我們希望在同一個網頁顯示，所以需要一個modal：

然後再用js操作：
首先點擊縮圖之後，先讓它避免預設動作，也就是連到別的網站，再把他的屬性href屬性(連結網址)挖出來，然後開一個img(DOM)的物件，然後針對img的src屬性設定剛剛存的大圖網址，然後再把這整串html塞進去modal裡面，最後再讓modal-container fadeIn出來，再設定一個點任何地方就fadeOut關閉。