# jQuery操作DOM 和 增删改查
- 1.html()
```js
$(\'ul li\').html();//获取ul下第一个li元素下的内容
$(\'ul li\').html(\'9\');//把ul下所有li元素下的内容改为9
$(\'ul li\').html(function(index, ele){
return \'<p style="color:orange">\'+ index +\'</p>\'
});//把ul下所有li元素下的内容改为return的内容
```
- 2.text()
```js
$(\'ul\').text();//获取ul元素的后代元素的所有文本节点
$(\'ul li\').text(function(index, ele){
return \'<p style="color:orange">\'+ index +\'</p>\'
});//把ul下所有li元素下的内容改为return的字符串信息
```
- 3.size()
```js
$(\'ul li\').size();//获取ul下li元素的个数
```
- 4.addClass()
```js
$(\'.demo\').addClass(\'demo1 demo2\');
$(\'.demo\').addClass(function(index, ele){
return \'demo1\';//在原来class=\'demo\'的基础上，加上demo1
});
```
- 5.removeClass() 移除class
- 6.hasClass() 是否拥有某个class名
- 7.css()
```js
$(\'.demo\').css({width:\'100px\', height:\'100px\', backgroundColor:\'red\'});//赋值操作
$(\'.demo\').css(\'width\');//取值操作
```
- 8.attr() 基于setAttribute getAttribute 自定义属性，和行间属性
```js
$(\'.demo\').attr(\'class\');//取值
$(\'.demo\').attr(\'class\', \'wrapper\');//赋值
```
- 9.prop() 基于原生JS的dom对象的特性操作，特性映射，非特性不能映射
```js
$(\'.demo\').prop(\'class\');//取值，对于自定义属性不能取值
$(\'.demo\').prop(\'checked\');//取值，对于自定义属性不能取值
$(\'.demo\').prop(\'class\', \'wrapper\');//赋值
```
- 10.val() 取值和赋值操作，赋和取表单元素相关的值
```js
$(\'input\').val();//取值
$(\'input\').val(\'123\');//赋值
$(\'input[type="checkbox"]\').val(function(index, oldValue){
return oldValue + index;
});
```
## 增删改查操作
### 查找
- 1.next() 获取下一个兄弟元素节点
- 2.prev() 获取上一个兄弟元素节点
- 3.prevAll() 获取同级的下面兄弟元素节点
- 4.nextAll() 获取同级的上面的兄弟元素节点
- 5.prevUntil() 获取同级的上面的兄弟元素，直到XXX为止
- 6.nextUntil() 获取同级的下面的兄弟元素，直到XXX为止
```js
$(h1).next().click(function(){
if($(this).prop(\'checked\')){
$(this).nextUntil(\'h1\', \'input[type="checkbox"]\').prop(\'checked\', true);//找到同级的下面的元素，直到h1元素为止，且只找到里面input[type="checkbox"]的元素
}else{
$(this).nextUntil(\'h1\', \'input[type="checkbox"]\').prop(\'checked\', false);//
}
});
```
- 7.siblings() 获取到同级元素的所有兄弟元素节点
```js
$(\'.demo\').siblings(\'span\');//获取到同级的所有span元素
```
- 8.parent() 获取到上一级元素节点
- 9.parents() 获取到所有祖先元素节点
- 10.offsetParent() 获取离自己最近的有定位的祖先元素
- 11.closest() 获得匹配选择器的第一个祖先元素，从自己（当前元素）开始沿 DOM 树向上。
- 12.slice() 截取元素
```js
$(\'.demo\').slice(1, 2);//截取第一个到第二个元素（不包括第二个元素）
```
### 增加 改变元素
- 13.insertBefore()
```js
$(\'.content\').insertBefore(\'.box\');//在.box之前插入.content
```
- 14.before()
```js
$(\'.box\').before( $(\'.content\') );//在.box之前插入.content
```
- 15.insertAfter()
```js
$(\'.content\').insertAfter(\'.box\');//在.box之后插入.content
```
- 16.after()
```js
$(\'.box\').after( $(\'.content\') );//在.box之后插入.content
```
- 17.appendTo()
```js
$(\'.demo\').appendTo(\'.container\');//把.demo添加到.container元素里面成为最后一个子元素，剪切操作
```
- 18.append()
```js
$(\'.container\').append( $(\'.demo\') );//把.demo添加到.container里面成为最后一个子元素，剪切操作
```
- 19.prependTo()
```js
$(\'.demo\').prependTo(\'.container\');//把.demo添加到.container元素里面成为第一个子元素，剪切操作
```
- 20.prepend()
```js
$(\'.container\').prependTo( $(\'.demo\') );//把.demo添加到.container里面成为最后一个子元素，剪切操作
```
### 删除元素
- 21.remove()
```js
$(\'.demo\').remove().appendTo(\'.container\');//先删除.demo元素，后把.demo元素添加到.container元素里面成为最后一个子元素。这样删除的.demo元素，自身捆绑的事件（click, blur等)就会同时删除
```
- 22.detach()
```js
$(\'.demo\').detach().appendTo(\'.container\');//先删除.demo元素，后把.demo元素添加到.container元素里面成为最后一个子元素。这样删除的.demo元素，自身捆绑的事件（click, blur等)不会同时删除
```
### 添加包裹元素
- 23.wrap()
```js
$(\'.demo\').wrap(\'<div class="container"></div>\');//为.demo元素包裹一层wrap()函数中的元素，对wrap()函数中的元素进行复制操作
$(\'demo\').wrap(fuction(index){
return \'<div>\' + index + \'</div>\';
});//为每一个.demo元素都包裹一层return的元素
```
- 24.wrapInner()
```js
$(\'.demo\').wrapInner(\'<div class="container"></div>\');//把.demo里面的元素包裹一层wrap()函数中的元素
```
- 25.wrapAll()
```js
$(\'.demo\').wrapAll(\'<div class="container"></div>\');//给所有的.demo加上一个统一的父元素.container，注意所有的.demo元素最好是同级元素
```
- 25.unwrap()
```js
$(\'.demo\').unwrap();//把.demo的直接父级删掉
```
### 特殊的
$() 创建jQuery对象
```js
$(\'<div></div>\');//可以直接通过$()创建一个jQuery对象
```
以上是markdown格式的笔记