jQuery学习笔记(二) DOM操作

辛苦堆砌，转载请注明出处，谢谢！

DOM操作是对DOM树进行插入，删除，修改。

1.创建新元素可以有三种方法：

(1)var newElement = $("<h1>newElement</h1>");

通过$函数创建

(2)var newElement = $("#old").clone();

通过已有的元素进行复制，clone()可以传递true，这样复制的元素也会复制已有元素的事件处理函数以及关联数据(data)。

(3)var newElement = document.createElement("h1")

使用DOM API进行创建

2.添加子元素或后代元素，分为两组：

(1)append(或append(function))和prepend(或prepend(function))

$(".A").append(newElement);

将newElement添加到class为A的元素之后

$(".A").prepend(newElement); 

将newElement添加到class为A的元素之前

注意区别：

$("#A, #B").append(newElement);

可以将newElement添加到id为A和B的元素之后

$("#A").append(newElement);

$("#B").append(newElement.clone());

如果向id为B的添加时未进行clone，只是把添加到id为A的元素又移动到id为B的元素后，不会在A和B之后均添加。

(2)appendTo和prependTo

$(".A").appendTo(newElement);

将class为A的元素集添加到newElement元素之后

$(".A").prependTo(newElement); 

将class为A的元素集添加到newElement元素之前

3.插入父元素(包裹元素)，有三组：

(1)wrap(或wrap(function))和unwap

$(".A").wrap(newElement);

用newElement包裹class为A的元素，即给class为A的每个元素分别添加了父元素

(2)wrapAll

$(".A").wrapAll(newElement);

把class为A的元素集封装到newElement中，即给所有class为A的元素设置了公共的父元素，因此，这里的class为A的元素之间最好是兄弟关系。

(3)wrapInner(或wrapInner(function))

$(".A").wrapInner(newElement);

基本类似于wrap，只不过这个是包裹了元素的内容，而不是元素本身。

4.插入兄弟元素，分两组：

(1)after(或after(function))和before(或before(function))

$(".A").after(newElement);

将newElement作为下一个兄弟元素添加到class为A元素之后

$(".A").before(newElement); 

将newElement作为上一个兄弟元素添加到class为A元素之前

(2)insertAfter和insertBefore

$(".A").insertAfter(newElement);

将class为A的元素集作为下一个兄弟添加到newElement元素之后

$(".A").insertBefore(newElement); 

将class为A的元素集作为上一个兄弟添加到newElement元素之前

5.替换元素，分两组：

(1)replaceWith(或replaceWith(function))

$(".A").replaceWith(newElement);

用newElement替换class为A的元素集中的元素

(2)replaceAll

$(element).replaceAll($(".A"));

与replaceWith参数方向相反，即用element替换所有的class为A的元素集中的元素

6.删除元素，分三组：

(1)detach删除元素保留关联数据

(2)remove删除元素，不保留关联数据(彻底删除)

(3)删除父元素(unwrap)和后代元素(empty)

$(".A").unwrap();

删除class为A的每个元素的父元素

$(".A").empty();

删除class为A的每个元素的后代元素