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'); //创建一个li标签
oli.innerHTML = '哈哈哈'; //这个li标签内的 内容是 哈哈哈
$('ul').append('<li>1233</li>');
$('ul').append(oli);
$('ul').append($('#app'));
PS:如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作。
写法二：
$('body').append('<p>666</p>') //着是在你的body的后面加入一个p标签元素
知识点2：
语法：
子元素.appendTo(父元素)
解释：追加到某元素 子元素添加到父元素
$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')
PS:要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素
$('<p>就是你</p>').appendTo('ul'); //把p标签加入到ul内
知识点3：
语法：
父元素.prepend(子元素)；
解释：前置添加， 添加到父元素的最后个位置
$('ul').prepend('<li>我是第一个</li>')
$('ul').prepend('<i>九九九</i>');//把i表签添加到ul第一个位置
知识点4：
语法：
父元素.prependTo(子元素)；
解释：后置添加， 添加到父元素的第一个位置
$('<a href="#">路飞学诚</a>').prependTo('ul')
$('<a href="javascript:;">Study Where</a>').prependTo('ul'); //把a 标签内的 内容添加到ul内的第一个位置
append和prepen appendTo 和prependTo刚好相反的
知识点5：
after在一个标签后面添加元素而不是它内部的最后
语法：
前元素.after(后元素)；
子元素.inserAfter(父元素)； 插入在父级的前面
解释：在匹配的元素之后插入内容
$('ul').after('<h4>我是一个h3标题</h4>')
$('<h5>我是一个h2标题</h5>').insertAfter('ul')
$('ul').after('<u>你是谁</u>'); //把标签u添加到 ul的后面
知识点6：
语法：
父元素.before(子元素)；
子元素.inserBefore(父元素)；
解释：在匹配的元素之后插入内容
$('ul').before('<h3>我是一个h3标题</h3>')
$('<h2>我是一个h2标题</h2>').insertBefore('ul')after 和insertAfter的都是插入在一个元素后面 但是只是参照点不同 after的参照点在前 insertAfter的参照在后
二、克隆操作
语法：
$(选择器).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'));
$('li').replaceWith('<a></a>'); //把li标签都换成a 标签
$('li')[0].replaceWith('<a></a>'); //把li标签的第一个换成a 标签
知识点2：
语法：
$('<p>哈哈哈</p>')replaceAll('h2');
解释：替换所有。将所有的h2标签替换成p标签。
$('<br/><hr/><button>按钮</button>').replaceAll('h4')
4、删除操作
4、删除操作
知识点1：
语法：
$(selector).remove();
解释：删除节点后，事件也会删除（简言之，删除了整个标签）
$('ul').remove
知识点2：
语法：
$(selector).detach();
解释：删除节点后，事件会保留
var $btn = $('button').detach()
//此时按钮能追加到ul中
$('ul').append($btn)
知识点2：
语法：
$(selector).detach();
解释：删除节点后，事件会保留
var $btn = $('button').detach()
//此时按钮能追加到ul中
$('ul').append($btn)
.
