# jQuery操作DOM 和 增刪改查
- 1.html()
```js
$('ul li').html();//獲取ul下第一個(gè)li元素下的內(nèi)容
$('ul li').html('9');//把ul下所有l(wèi)i元素下的內(nèi)容改為9
$('ul li').html(function(index, ele){
return '<p style="color:orange">'+ index +'</p>'
});//把ul下所有l(wèi)i元素下的內(nèi)容改為return的內(nèi)容
```
- 2.text()
```js
$('ul').text();//獲取ul元素的后代元素的所有文本節(jié)點(diǎn)
$('ul li').text(function(index, ele){
return '<p style="color:orange">'+ index +'</p>'
});//把ul下所有l(wèi)i元素下的內(nèi)容改為return的字符串信息
```
- 3.size()
```js
$('ul li').size();//獲取ul下li元素的個(gè)數(shù)
```
- 4.addClass()
```js
$('.demo').addClass('demo1 demo2');
$('.demo').addClass(function(index, ele){
return 'demo1';//在原來class='demo'的基礎(chǔ)上，加上demo1
});
```
- 5.removeClass() 移除class
- 6.hasClass() 是否擁有某個(gè)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() 取值和賦值操作，賦和取表單元素相關(guān)的值
```js
$('input').val();//取值
$('input').val('123');//賦值
$('input[type="checkbox"]').val(function(index, oldValue){
return oldValue + index;
});
```
## 增刪改查操作
### 查找
- 1.next() 獲取下一個(gè)兄弟元素節(jié)點(diǎn)
- 2.prev() 獲取上一個(gè)兄弟元素節(jié)點(diǎn)
- 3.prevAll() 獲取同級(jí)的下面兄弟元素節(jié)點(diǎn)
- 4.nextAll() 獲取同級(jí)的上面的兄弟元素節(jié)點(diǎn)
- 5.prevUntil() 獲取同級(jí)的上面的兄弟元素，直到XXX為止
- 6.nextUntil() 獲取同級(jí)的下面的兄弟元素，直到XXX為止
```js
$(h1).next().click(function(){
if($(this).prop('checked')){
$(this).nextUntil('h1', 'input[type="checkbox"]').prop('checked', true);//找到同級(jí)的下面的元素，直到h1元素為止，且只找到里面input[type="checkbox"]的元素
}else{
$(this).nextUntil('h1', 'input[type="checkbox"]').prop('checked', false);//
}
});
```
- 7.siblings() 獲取到同級(jí)元素的所有兄弟元素節(jié)點(diǎn)
```js
$('.demo').siblings('span');//獲取到同級(jí)的所有span元素
```
- 8.parent() 獲取到上一級(jí)元素節(jié)點(diǎn)
- 9.parents() 獲取到所有祖先元素節(jié)點(diǎn)
- 10.offsetParent() 獲取離自己最近的有定位的祖先元素
- 11.closest() 獲得匹配選擇器的第一個(gè)祖先元素，從自己（當(dāng)前元素）開始沿 DOM 樹向上。
- 12.slice() 截取元素
```js
$('.demo').slice(1, 2);//截取第一個(gè)到第二個(gè)元素（不包括第二個(gè)元素）
```
### 增加 改變元素
- 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元素里面成為最后一個(gè)子元素，剪切操作
```
- 18.append()
```js
$('.container').append( $('.demo') );//把.demo添加到.container里面成為最后一個(gè)子元素，剪切操作
```
- 19.prependTo()
```js
$('.demo').prependTo('.container');//把.demo添加到.container元素里面成為第一個(gè)子元素，剪切操作
```
- 20.prepend()
```js
$('.container').prependTo( $('.demo') );//把.demo添加到.container里面成為最后一個(gè)子元素，剪切操作
```
### 刪除元素
- 21.remove()
```js
$('.demo').remove().appendTo('.container');//先刪除.demo元素，后把.demo元素添加到.container元素里面成為最后一個(gè)子元素。這樣刪除的.demo元素，自身捆綁的事件（click, blur等)就會(huì)同時(shí)刪除
```
- 22.detach()
```js
$('.demo').detach().appendTo('.container');//先刪除.demo元素，后把.demo元素添加到.container元素里面成為最后一個(gè)子元素。這樣刪除的.demo元素，自身捆綁的事件（click, blur等)不會(huì)同時(shí)刪除
```
### 添加包裹元素
- 23.wrap()
```js
$('.demo').wrap('<div class="container"></div>');//為.demo元素包裹一層wrap()函數(shù)中的元素，對wrap()函數(shù)中的元素進(jìn)行復(fù)制操作
$('demo').wrap(fuction(index){
return '<div>' + index + '</div>';
});//為每一個(gè).demo元素都包裹一層return的元素
```
- 24.wrapInner()
```js
$('.demo').wrapInner('<div class="container"></div>');//把.demo里面的元素包裹一層wrap()函數(shù)中的元素
```
- 25.wrapAll()
```js
$('.demo').wrapAll('<div class="container"></div>');//給所有的.demo加上一個(gè)統(tǒng)一的父元素.container，注意所有的.demo元素最好是同級(jí)元素
```
- 25.unwrap()
```js
$('.demo').unwrap();//把.demo的直接父級(jí)刪掉
```
### 特殊的
$() 創(chuàng)建jQuery對象
```js
$('<div></div>');//可以直接通過$()創(chuàng)建一個(gè)jQuery對象
```
以上是markdown格式的筆記
