操作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 | |
