jQuery中的DOM操作------复制及包裹节点

时间:2021-03-20 16:01:27

1、复制节点:
  如果单击<li>元素后需要再复制一个<li>元素,可以用clone()方法来完成:
  $(this).clone().appendTo("ul");
  复制节点后,被复制的新元素不具有任何行为,如果需要新元素也具有复制功能,可以这么写:
  $(this).clone(true).appendTo("ul");

2、包裹节点:wrap()&warpAll()&wrapInner()
  如下代码:
  <strong title="add your choice 1">Add your choice 1</strong>
  <strong title="add your choice 2">Add your choice 2</strong>

(1)$("strong").wrap("<b></b>");
  <b><strong title="add your choice 1">Add your choice 1</strong></b>
  <b><strong title="add your choice 2">Add your choice 2</strong></b>

(2)$("strong").wrapAll("<b></b>");
  <b>
    <strong title="add your choice 1">Add your choice 1</strong>
    <strong title="add your choice 2">Add your choice 2</strong>
  </b>

(3)$("strong").wrapInner("<b></b>");
  <strong title="add your choice 1"><b>Add your choice 1</b></strong>
  <strong title="add your choice 2"><b>Add your choice 2</b></strong>

3、parent(),parents(),closest()的区别:
1)parent(): 获得集合中每个匹配元素的父级元素,从指定类型的直接父节点开始查找,返回一个元素节点;
2)parents(): 获得集合中每个匹配元素的祖先元素,当它找到第一个父级节点时,不停止查找,而是继续查找,最后返回多个父节点;
3)closest(): 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。 从包含自身的节点找起,同parents()类似,只返回匹配的第一个元素节点。