05-jQuery操作DOM

jQuery操作DOM

对于所有的节点操作中，node参数节点可以是选择器字符串，可以是jQuery对象，可以是HTML代码片段

添加操作

内部添加

方法名	描述
jQuery.prototype.append(node)	将node节点添加到jQuery对象中第一个DOM元素内部的尾部
jQuery.prototype.appendTo(node)	将jQuery对象添加到node节点的内部首部
jQuery.prototype.prepend(node)	将node节点添加到jQuery对象中第一个DOM元素内部的头部
jQuery.prototype.prependTo(node)	将jQuery对象添加到node节点的内部尾部

外部添加

方法名	描述
jQuery.prototype.after(node)	将node节点添加到jQuery对象中第一个DOM元素之后
jQuery.prototype.insertAfter(node)	将jQuery对象添加到node节点的之前
jQuery.prototype.before(node)	将node节点添加到jQuery对象中第一个DOM元素之前
jQuery.prototype.insertBefore(node)	将jQuery对象添加到node节点的之后

包裹操作

方法名	描述
jQuery.prototype.wrap(HTMLorDOM)	将jQuery对象中所有DOM元素分别包裹一个DOM元素，该DOM元素可以是HTML代码片段
jQuery.prototype.unwrap(HTMLorDOM)	将jQuery对象中所有DOM元素的包裹元素删除
jQuery.prototype.wrapAll(HTMLorDOM)	将jQuery对象中所有DOM元素整体包裹一个DOM元素，该DOM元素可以是HTML代码片段
jQuery.prototype.wrapInner(HTMLorDOM)	将jQuery对象中所有DOM元素的子元素分别包裹一个DOM元素，该DOM元素可以是HTML代码片段

删除操作

删除节点时会同时将该节点所绑定的事件一同销毁

方法名	描述
jQuery.prototype.empty()	将jQuery对象中所有DOM元素所有子元素从页面删除
jQuery.prototype.remove([selector])	将jQuery对象中所有DOM元素从页面删除 也可指定选择器删除jQuery对象中指定的DOM元素 被删除节点附加数据、事件等信息会一并销毁
jQuery.prototype.detach([selector])	将jQuery对象中所有DOM元素从页面删除 也可指定选择器删除jQuery对象中指定的DOM元素 被删除节点附加数据、事件等信息会保留

替换操作

方法名	描述
jQuery.prototype.replaceWith(node)	将jQuery对象中所有DOM元素都替换为将node节点
jQuery.prototype.replaceAll(node)	将node节点替换为jQuery对象

克隆操作

方法名	描述
jQuery.prototype.clone(flag)	返回jQuery对象的克隆 flag为true则是深复制，包括附加数据和事件 false则是浅复制，不包括附加数据和事件