jQuery学习笔记三 jQuery对DOM的一些操作

DOM(Document Object Model)文档对象模型，是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件，jQuery大大简化了对DOM元素的操作，这也是jQuery的亮点之一。下面分以下几部分介绍一下jQuery对DOM的操作，包括jQuery对DOM元素的创建并插入，移除，替换，复制，更改DOM的属性。。。

1，创建并插入DOM元素

1.1，创建节点

1.2，添加节点

插入节点的方法：
append() ，appendTo()，prepend()，prependTo()，after()，insertAfter()，before()，insertBefore()

具体区别如下：

方法	描述	示例
A.append(B)	A的内部追加B(追加到内容后部)	HTML: <p>Hello</p> jQuery: $("p").append("<b>World</b>"); Result: <p>Hello <b>World</b></p>
A.appendTo(B)	将A追加到B的内容后面	HTML: <p>Hello</p> jQuery: $("<b>World</b>").appendTo("p"); Result: <p>Hello <b>World</b></p>
A.prepend(B)	在A的内容前面追加B	HTML: <p>World</p> jQuery: $("p").prepend("<b>Hello </b>"); Result: <p><b>Hello </b>World</p>
A.prependTo(B)	将A追加到B内容的前面	HTML: <p>World</p> jQuery: $(" <b>Hello</b >").prependTo("p"); Result: <p><b>Hello </b>World</p>
A.after(B)	在A元素后面插入B	HTML: <p>Hello</p> jQuery: $("p").after("<b>World</b>"); Result: <p>Hello <b>World</b></p>
A.insertAfter(B)	将A插入到B元素的后面	HTML: <p>Hello</p> jQuery: $("<b>World</b ").after("p"); Result: <p>Hello <b>World</b></p>
A.before(B)	在A元素的前面插入B	HTML: <p>World</p> jQuery: $("b").before("<p>Hello </p>"); Result: <p>Hello<b>World</b></p>
A.insertBefore(B)	将A插入到B元素的前面	HTML: <p>World</p> jQuery: $("<p>Hello</p>").insertBefore("b"); Result: <p>Hello</p><b>World</b>

2，移除DOM元素

2.1，remove方法

首先在jquery中id 是不能重复的，如果ID重复，只能获取到第一个ID，所以你只能够删除一个，当然你还可以给tr一个样式,不需要这个样式实际存在，只是做个标记，例如：

2.2，empty()方法

jQuery的empty方法采用的是清空节点，它能清空元素内容及其所有的后代节点。元素本身的标签依据存在，不是严格的删除节点。

3，替换DOM元素

3.1，replaceWith()方法

将所有匹配的元素替换为指定的HTML元素或者DOM元素，

3.2，replaceAll()方法

作用同replaceWith()，位置颠倒，

4，复制DOM元素

复制节点是常用的DOM操作之一，例如某个购物网站的效果，用户可以通过鼠标拖动商品并将起放到购物车中，这个商品拖动功能就是用的复制节点，将用户选择的商品所处的节点元素复制，并将其跟随鼠标移动，从而达到拖动商品的效果。

clone()方法：

上面例子的效果是当用户点击ul下的li元素时，将其clone到div下的ul下。
PS，如果在clone()方法中加入参数ture，则把该元素绑定的事件也一并复制。

5，获取、设置、移除DOM元素的属性

5.1，获取和设置

5.2，移除