操作DOM元素
=====
對于操作dom有如下的特點
1. getter和setter一體的, 如
```javascript
$('.row').attr('id', 'container') // setter
$('.row').attr('id') // getter
```
2. 鏈式操作
```javascript
$('.row').find('.active').html().substr(1)
```
3. 基本上都是選擇dom再操作dom,如
```javascript
$('.row').show()
```
# 文檔操作
增加
刪除
# 屬性操作
## class
| 方法名 | 功能 |
| ----------- | ---- |
| addClass | |
| removeClass | |
| toggleClass | |
| hasClass | |
toggleClass功能如下
```javascript
var elem = ('.row')
elem.hasClass('active') ? elem.removeClass('active') : elem.addClass('active')
```
## attr
| 方法名 | 功能 |
| ------ | -------- |
| attr() | 獲取或者設置屬性 |
## value
| 方法名 | 功能 |
| ------ | --------- |
| html() | 所選元素的行內內容 |
| val() | input的內容 |
| data() | |
在dom元素上面有data-type, data-xs, data-o等屬性(data-* 后面自定義), 可以通過data方法獲取
```html
<div class="row" data-type="12321">
```
可以通過
```javascript
$('.row').data('type');
```
當然data-type也是一個屬性可以通過attr獲取
```javascript
$('.row').attr('data-type');
```
注意當data-*的值是數字且位數較多的時候, 可能無法獲取到正確的值, 但是可以使用attr獲取
# 效果
## 顯示/隱藏
show, hide, toggle
| show | hide | toggle |
| ---- | ---- | ------- |
| 顯示 | 隱藏 | 顯示/隱藏切換 |
判斷元素是show狀態還是hide狀態, 可以使用
```javascript
$('.row').is(':visible')
```
fadeIn,fadeOut,fadeTo,
| fadeIn | fadeOut | fadeTo |
| ------------ | ------------ | --------- |
| 顯示, 通過改變不透明度 | 隱藏, 通過改變不透明度 | 變到給定的不透明度 |
slideUp, slideDown, slideToggle
| slideUp | slideDown | slideToggle |
| ---------- | ---------- | --------------- |
| 顯示, 通過改變高度 | 隱藏, 通過改變高度 | 顯示/隱藏切換, 通過改變高度 |
## 自定義動畫
animate 自定義動畫
stop 停止動畫
這里極力推薦 `animate.css`
# 事件
## 一般的事件
外設
| event | desc. |
| ---------- | ----- |
| click | |
| dblclick | |
| change | |
| focus | |
| blur | |
| keydown | |
| keypress | |
| keyup | |
| mousedown | |
| mouseenter | |
| mouseleave | |
| mousemove | |
| mouseout | |
| mouseover | |
| mouseup | |
文檔
| event | desc. |
| ------ | ----- |
| submit | |
| ready | |
| resize | |
| scroll | |
| load | |
| unload | |
通用處理事件
| event | desc. |
| ------- | ----- |
| bind | |
| unbind | |
| one | |
| trigger | |
| on | |
| live | |
