3.jQuery操作DOM对象的方法

# 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格式的笔记

3.jQuery操作DOM对象的方法

相关推荐