jQuery — 文档处理（CRUD）

一、内部插入节点

　　1、append(content)

　　　　用法：

格式： a.append(b)                      把 b 插入到 a 的末尾，称为最后一个子元素

说明：向每个匹配的元素的内部结尾处追加内容

　　2、appendTo(content)

　　　　用法：

格式： a.appendTo(b)                   把 a 插入到 b 的末尾，称为最后一个子元素

说明：把所有匹配的元素追加到另一个指定的元素集合中

　　3、prepend(content)

　　　　用法：

格式：a.prepend(b)                        把 b 插入到 a 所有的子元素前面，成为第一个子元素

说明：向每个匹配的元素的内部的开始处插入内容

　　4、prependTo(content)

　　　　用法：

格式： a.prependTo(b)                    把 a 插入到 b 所有的子元素前面，成为第一个子元素

说明：将每个匹配的元素插入到指定的元素内部的开始处

二、外部插入节点

　　1、after(content)

　　　　用法：

格式：  a.after(b)                                 在 a 元素的后面插入 b 元素

说明：在每个匹配的元素之后插入内容

　　2、before(content)

　　　　用法：

格式： a.before(b)                               在 a 元素的前面插入 b 元素

说明：在每个匹配的元素之前插入内容

　　3、insertAfter(content)

　　　　用法：

格式： a.insertAfter(b)                          把 a 元素插入到 b 元素的后面

说明：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

　　4、insertBefore(content)

　　　　用法：

格式：  a.insertBefore(b)                     把 a 元素插入到 b 元素的前面

用法：把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

三、查找节点

　　1、使用 jQuery 选择器查询

　　　　用法：

格式：$(selector)

说明：得到一个包含所有匹配的dom节点对象的jQuery对象

　　2、查询 jQuery 对象内部数据

　　　　用法：

格式：$object.find(selector)

说明：在 jQuery 对象中根据 selector 查找其中匹配的后代节点

　　3、遍历 jQuery 对象包含的数据

　　　　用法：

格式：$(selector1).each(function(index,itemDom){ })

说明：遍历 jQuery 对象所包含的所有节点，每取一个 dom 节点对象都去调用设置的回调函数，并将取出的节点在数组中的下标和节点对象传入函数

　　Demo：

　　<script type="text/javascript">
        $(function () {
            $("p").each( function () {
                // this 是 dom 对象
                alert(this.innerText);
            } )

            $.each($("p"),function (i,el) {
                //el 是 dom 对象
                console.log("第" + i + "个元素的值是" + el.innerText);
            })
        })
   　　</script>

四、创建节点

　　$(htmlString) 用于创建节点

　　说明：

　　　（1）动态创建的新元素节点不会被自动添加到文档中，需要使用其他方法将其插入到文档中；

　　　（2）当创建单个元素时，需注意闭合标签和使用标准的 XHTML 格式。例如创建一个 <p> 元素，可以使用$(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“</P>”)

　　　（3）创建文本节点就是在创建元素节点时直接把文本内容写出来；创建属性节点也是在创建元素节点时一起创建

五、删除节点

　　1、empty()

　　　　用法：

格式： $("p").empty()                                  把所有段落的子元素（包括文本节点）删除，即清空 p 里面的内容

说明：删除匹配的元素集合中所有的子节点，即把元素置空（不包括本身）

　　2、remove([expr])

　　　　用法：

格式：$("p").remove()                                 把 dom 中所有的段落删除

说明：从 dom 中删除所有匹配的元素及其子元素（包括本身）

注意：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

　　3、detach([expr])

　　　　用法：

格式：$("p").detach()

说明：从  dom 中删除所有匹配的元素及其子元素（包括本身）

注意：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

六、替换节点

　　1、replaceWith(content | fn)

　　　　用法：

格式：$("p").replaceWith("<b>Paragraph</b>")                        用<b>Paragraph</b>替换p

说明：将所有匹配的元素替换成指定的HTML或DOM元素

　　2、replaceAll(selector)

　　　　用法：

格式：$("<b>Paragraph</b>").replaceAll("p")                         用 <b>Paragraph</b> 替换所有的 p

说明：用匹配的元素替换掉所有 selector匹配到的元素

七、复制

　　clone([Even,[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本

　　　　用法：

格式：$("#btn1").clone(true).appendTo("p");                        参数为true，表示复制 dom 对象，也会复制 dom 对象的事件

说明：复制dom对象，如果有参数，true代表该对象上面的事件处理函数也会被复制；false则代表只是复制该对象，并没有复制事件

八、包裹

　　1、wrap(html | ele | fn)

　　　　用法：

格式：$("p").wrap("<div class='wrap'></div>")                   把所有的段落用一个新创建的 div 包裹起来

说明：把所有匹配的元素用其他元素的结构化标记包裹起来

　　2、unwrap()

　　　　用法:

格式：$("p").unwrap()                                                       将 p 元素的父元素移除

说明：这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。

　　3、wrapAll(html | ele)

　　　　用法：

格式：$("p").wrapAll("<div></div>")                                 把所有的 p 标签都移动到第一个 p 标签处，然后用 div 包裹

语法：将所有匹配的元素用单个元素包裹起来

　　4、wrapInner(html | ele | fn)

　　　　用法：

格式：$("p").wrapInner("<b></b>")                                  把所有 p 标签内的子内容加粗

说明：将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来