前端提高篇(九十三)：jQueryDOM操作：删除、包裹

add

//删除li.one，并存储返回值

var one = $(‘.one’).click(function(){

$(this).remove();

})

//删除li.two，并存储返回值

var two = $(‘.two’).click(function(){

$(this).detach();

})

//点击add按钮，将前面俩个返回值再加回来

$(‘.btn’).click(function(){

$(‘ul’).append(function(){

return one.add(two);

})

})

效果：可以看到，恢复之后的one，点击之后没有被删除，即没有保留one绑定的点击事件，而two有

1.3 clone()：克隆

在上面的demo上面再加一个按钮，给这个按钮添加点击事件，点击时克隆一次li.two

clone

var clone = $(‘.two’).clone();

$(‘.clone’).click(function(){

$(‘ul’).append(clone);

})

效果：点击一次，克隆出一个，但绑定的点击事件没有克隆过来，且多次点击也只有一个

var clone = $(‘.two’).clone(true);

传入’true’，绑定的点击事件就被克隆过来了

但由于每次点击都是克隆li.two，一个对象只能克隆出一个副本，多次点击不能克隆出新元素，append的始终都是那个副本，同一个对象做同样的操作，效果不会改变，只是一遍遍在原li.two后面添加这个克隆的对象

另：append传入的参数如果是新的对象，就能一直加，比如用字符串拼接的对象：

var clone = ‘

• li
• ’

  $(‘.clone’).click(function(){

  $(‘ul’).append(clone);

  })

  如果是已存在的对象，就不能多次添加，因为本体只有一个，每次拿到的都是这个本体的索引，然后对这个本体做同样操作

  var clone = $(‘.one’);//取已存在的li.one

  $(‘.clone’).click(function(){

  $(‘ul’).append(clone);//添加进ul

  })

  效果：可以看到，li.one换了位置，说明是对本体做操作的

  

  2. wrap()、wrapAll()、wraplnner()、unwrap()

  ---

  wrap()：每个单独包裹，每个匹配的元素都包上指定的标签，可以兼容只写头标签，但不能只写尾标

  wrapAll()：集体包裹，会破坏dom结构，需要精确定位标签

  wraplnner()：内部包裹，

  unwrap()：解除包裹，无参，支持链式调用，一层层包裹解除，直至body

  2.1 wrap():
• one
• two

• $(‘li’).wrap(‘

  ’);

  效果：

  

  2.2 wrapAll：

  如果我一开始的dom结构是这样的：
• one
• two
• two

• 然后我对li调用wrapAll方法：

  $(‘li’).wrapAll(‘

  ’);

  dom结构就会变成这样：

  可以看到，本来在ul外面的li也整合进去了

  

  如果我一开始的dom结构是这样的，再对li调用wrapAll方法，先匹配到的li是ul外的那个li，整合时，就会向这个先匹配到的li靠齐

• two
• one
• two

• $(‘li’).wrapAll(‘

  ’);

  效果：