jQuery--文档处理（dom元素子父节点操作）

参数说明

参数	说明
content	要追加到目标中的内容
function(index, html)	返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。
function	函数必须返回一个html字符串。
html	HTML标记代码字符串，用于动态生成元素并包裹目标元素
element	用于包装目标元素的DOM元素
fn	生成包裹结构的一个函数
selector	用于查找所要被替换的元素
expr	一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false
Events	用于筛选元素的jQuery表达式
deepEven	一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

	<div><button class="btn">按钮</button></div>
	<button class="btn list">按钮</button>
	<button class="btn">按钮</button>
	<button class="btn">按钮</button>

• 以下部分图片为四分之一

一、内部插入

• 以下空格代表或

方法	概述
append(content fn)	向每个匹配的元素内部追加内容。
appendTo(content)	把所有匹配的元素追加到另一个指定的元素元素集合中。
prepend(content)	向每个匹配的元素内部前置内容。
prependTo(content)	把所有匹配的元素前置到另一个、指定的元素元素集合中

1.追加到元素的内容之后

   var str = 'abc';
   $('.btn').append(str);

• 后面的参数可以是字符串，也可以是对象

    str.appendTo($('.btn')); 

	$('<span>abc</span>').appendTo($('.btn'));//前面不能是字符串

• 因为字符串中没有appendTo()方法，所以不能直接用str.appendTo(),必须先把字符串转成jQuery对象。

2.jquery里面如何创建dom

$('<div></div>')

   var str = '<span>123</span>';
   $(str).appendTo($('.btn'));

3.追加到元素的内容之前

   var str = 'abc';
   $('.btn').prepend(str);
   $('<div>123</div>').prependTo($('.btn'));

4.匿名函数写法

    $('.btn').append(function(index){
        return 'abc';
    }); 

二、外部插入

• 以下空格代表或

方法	概述
after(content fn)	在每个匹配的元素之后插入内容
before(content fn)	在每个匹配的元素之前插入内容
insertAfter(content)	把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore(content)	把所有匹配的元素插入到另一个、指定的元素元素集合的前面

   var str = 'abc';
   $('.btn').after(str);
   $('.btn').before(str);
   var s = $('<span>标签</span>');
   s.insertAfter($('.btn'));
   s.insertBefore($('.btn'));

三、包裹

• 以下空格代表或

方法	概述
wrap(html element fn)	把所有匹配的元素用其他元素的结构化标记包裹起来
unwrap()	移除外包
wrapAll(html ele)	将匹配的同类型元素全部包起来
wrapInner(html element fn)	将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来，也就是内包

1. jquery对象进行包裹

   //对html进行包裹
   $('.btn').wrap($('<div></div>'));

• 匿名函数写法

   $('.btn').wrap(function(index){
       return $('<div></div>');
   })

2.移除包裹元素

   $('.btn').unwrap();

3.wrapAll()和wrapInner()

   //将匹配的所有元素全部包起来
   $('.btn').wrapAll($('<div></div>'));
   //把元素的子内容全部包起来
   $('.btn').wrapInner($('<div></div>'));

四、替换

• 以下空格代表或

方法	概述
replaceWith(content fn)	将所有匹配的元素替换成指定的HTML或DOM元素。
replaceAll(selector)	用匹配的元素替换掉所有 selector匹配到的元素。

   $('.btn').replaceWith('<div>123</div>');
   //与上一行代码意义相同
   $('<div>123</div>').replaceAll($('.btn'));

五、复制

• 以下空格代表或

方法	概述
clone([Even[,deepEven]]	克隆匹配的DOM元素并且选中这些克隆的副本，

• 不带参数为浅克隆，参数为true时为深度克隆，克隆所有的子父节点以及当前元素的事件机制
• 参数是true或false，true是深度克隆，克隆所有的子父节点以及当前元素的事件机制，false就只是克隆当前元素，若是只有一个参数，代表两个true事件，处理函数被复制，子元素被复制。

    $(".btn").click(function () {
        console.log(1);
    });
    $('body').append($('.btn').clone()); 

六、删除

• 以下空格代表或

方法	概述
empty()	删除匹配的元素集合中所有的子节点。
remove([expr])	删除元素(全部删除)–dom元素的事件删除
detach([expr])	删除所有匹配的元素–dom元素会保留事件

   //清除所有子节点
   $('.btn').empty();

   //删除元素
   var button = $('.btn');
   button.click(function(){
       console.log(1);//1
   })
   button.remove();  //全部删除
   button[0].click();//触发button[0]的click事件

<p>Hello</p> how are <p>you?</p> 

   $("p").detach();

• detach()方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

   $('.btn').remove('.list');