# JQuery基本操作

###### tags: `JavaScript`

### 環境宣告
宣告document ready後再執行JQ

//舊寫法
$(document).ready(function(){

})

//新寫法
$(function(){

})

### DOM選取器
以\$(目標)抓取DOM,規則與CSS selector相同
※如果有多個相同名稱節點會全部抓取成一陣列
※不是用\$()抓取的目標不能用JQ Method
※this也是要用\$()包起來才能用
※$()可以包多層ex: \$($('div')[0])
[jQuery Selectors](https://www.w3schools.com/jquery/jquery_ref_selectors.asp)

### DOM操作常用指令

| 名稱 | 作用 |
| -------- | -------- |
| hide([duration(ms)[, complete(callback)])| 加上style=display:none |
|show([duration(ms)[, complete(callback)])|移除display:none|
|fadeIn([duration(ms)] [, easing ] [, complete(callback)])|淡入|
|fadeOut([duration(ms)] [, easing ] [, complete(callback)])|淡出|
|delay([duration(ms)] [, queueName ])|animation-delay|
|attr([attribute][,setting])|修改屬性,若只有輸入第一個參數則為讀取屬性|
|data([dataname][,value])|修改data attribute,若只有輸入第一個參數則為讀取屬性(同原生dataset),若不輸入參數則會抓取dataname與value回傳obj|
|addClass([classname])|加上指定的class,同原生classList.add()|
|removeClass([classname])|移除指定的class,同原生classList.remove()|
|toggleClass([classname])|若有指定的class會進行移除,若無指定的class會進行新增,同原生classList.toggle()|
|hasClass([classname])|是否有指定的class,同原生classList.contains()|
|css([propertyName][,value])<br>或<br>css({property1:value1,property2:value2})|修改css屬性,可用obj格式同時設定多個<br>類似原生style.propertyName/style['property-name']|
|scrollTop([value])|設定卷軸向上捲的高度,同原生scrollTop()|
|offset().top/offset().left|獲取距離document頂端/左邊的距離(px)<br>類似offsetTop/offsetLeft<br>但原生抓的為與offsetParent的距離|
|animate(property(obj)[,duration][,easing][,complete])|只有值為數字時可產生動畫<br>支援的css屬性參考[清單](https://www.runoob.com/jquery/eff-animate.html)|
|stop()|套在動畫前<br>若前一個動畫未執行完立即停止前一個動畫|
|eq([number])|指定索引值|
|target.index([selector/element])|1.()內無值時取得目標元素在兄弟節點內位置索引值<br>2.()內有放選擇器/清單,則是目標元素於該選擇器內的索引值,若找不到會返回-1|
|height(value)|取得/設定高度(padding-box),取得高度時會回傳沒有單位的數字<br>原生為clientHeight|
|val(value)|若無參數為取值,有參數則為設定value|
|toggle( [duration][,complete(function)])|切換hide()及show()|
|fadeToggle([duration][,complete(callback)])|淡入淡出切換顯示|
|sildeToggle([duration][,complete(callback)])|滑入滑出切換顯示|

### 搜尋DOM指令

可以多層堆疊
ex(children().children()找子層的子層)
| 名稱 | 作用 |
| -------- | -------- |
| find([elment/exp/JQ obj]) | 找尋子層的指定目標,不限層數<br>如果有相同名字會一起選取|
|([target element]).appendTo([parent Element])<br>([parent Element]).append([target element])|同原生appendChild()<br>原生書寫順序為parent.appendChild(target)<br>若元素已存在則是移動位置到最後|
|([target element]).clone(boolean)|複製element,()可設定是否複製子節點,預設false<br>原生cloneNode(boolean)|
|filter()|已選取元素內過濾出符合條件的元素|
|children()|找尋子層內符合條件的元素<br>類似原生children()|

參考
[jQuery 教程](https://www.runoob.com/jquery/jquery-tutorial.html)