06-jQuery的文档操作(重点)

之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作。通过js的DOM的操作，大家也能发现，大量的繁琐代码实现我们想要的效果。那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档。

看一个之前我们js操作DOM的例子：

var oUl = document.getElementsByTagName('ul')[0];

var oLi = document.createElement('li');

oLi.innerHTML = '赵云';

oUl.appendChild(oLi);

一.插入操作

知识点1：

语法：

父元素.append(子元素)

解释：追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素

代码如下：

var oli = document.createElement('li');

oli.innerHTML = '哈哈哈';

$('ul').append('<li>1233</li>');

$('ul').append(oli);

$('ul').append($('#app'));

PS:如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作。

知识点2：

语法：

子元素.appendTo(父元素)

解释：追加到某元素子元素添加到父元素

$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')

PS:要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素

知识点3：

语法：

父元素.prepend(子元素)；

解释：前置添加，添加到父元素的第一个位置

$('ul').prepend('<li>我是第一个</li>')

知识点4：

语法：

子元素.prependTo(父元素)；

解释：前置添加，添加到父元素的第一个位置

 $('<a href="#">路飞学诚</a>').prependTo('ul')

知识点5：

语法：

兄弟元素.after(要插入的兄弟元素)；
要插入的兄弟元素.inserAfter(兄弟元素)；

解释：在匹配的元素之后插入内容

$('ul').after('<h4>我是一个h3标题</h4>')

$('<h5>我是一个h2标题</h5>').insertAfter('ul')

知识点6：

语法：

兄弟元素.before(要插入的兄弟元素)；
要插入的兄弟元素.inserBefore(兄弟元素)；

解释：在匹配的元素之后插入内容

$('ul').before('<h3>我是一个h3标题</h3>')

$('<h2>我是一个h2标题</h2>').insertBefore('ul')

二、克隆操作

语法：

$(选择器).clone();

解释：克隆匹配的DOM元素

$('button').click(function() {

  // 1.clone()：克隆匹配的DOM元素

 // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)

  $(this).clone(true).insertAfter(this);

})

三、修改操作

知识点1：

语法：

$(selector).replaceWith(content);

将所有匹配的元素替换成指定的string、js对象、jquery对象。

//将所有的h5标题替换为a标签

$('h5').replaceWith('<a href="#">hello world</a>')

//将所有h5标题标签替换成id为app的dom元素

$('h5').replaceWith($('#app'));

知识点2：

语法：

$('<p>哈哈哈</p>')replaceAll('h2');

解释：替换所有。将所有的h2标签替换成p标签。

$('<br/><hr/><button>按钮</button>').replaceAll('h4')

4、删除操作

知识点1：

语法：

$(selector).remove();

解释：删除节点后，事件也会删除（简言之，删除了整个标签）

$('ul').remove();

知识点2：

语法：

$(selector).detach();

解释：删除节点后，事件会保留

 var $btn = $('button').detach()

 //此时按钮能追加到ul中

 $('ul').append($btn)

知识点3：

语法：

$(selector).empty();

解释：清空选中元素中的所有后代节点

//清空掉ul中的子元素，保留ul

$('ul').empty()