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

• one
• two
• three

• 此时是这样的：

  

  用empty()清空ul下的所有后代元素

  $(‘ul’).empty();

  效果：

  

  用html()和text()方法也能实现清空的效果：

  $(‘ul’).html(‘’);//用html(‘’)将标签里的内容变成空字符串，相当于清空

  $(‘ul’).text(‘’);//理由同上

  1.2 remove()、detach()：删除当前选中的元素

  remove()：在dom结构中删除元素，也会移除被选元素的数据和事件，仅返回匹配的dom元素本身

  detach()：在dom结构中删除元素，返回匹配的dom元素及匹配元素上绑定的事件、附加的数据

  提示：

  如需移除元素，但保留数据和事件，请使用 detach() 方法代替。

  如只需从被选元素移除内容，请使用 empty() 方法。

  demo：用remove和detach分别实现点击元素，选中的元素被删除的功能；再点击add按钮，恢复元素，看看恢复回来的对象的区别
• one
• two

• 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(‘

  ’);

  总结

  • 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

  • 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

  • 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

  

  第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

  祝大家都有美好的未来，拿下满意的 offer。