JQuery之dom文档操作

jQuery之文档处理操作

jQuery的文档处理其实就是dom操作，不外乎四个字"增" "删" "改" "查"，但是却比原生的要简单得多，特别实用，大家不妨可以试试。

文档处理操作一共分六大类

一.内部插入

1.append

2.appendTo

3.prepend

4.prependTo

html代码

   <p>I would like to say: </p>
   <div></div><div></div>

jQuery代码

     //向每个匹配的元素内部追加内容。
      $("p").append("<b>Hello</b>");

    //把所有匹配的元素追加到另一个指定的元素元素集合中。
      $("p").appendTo("div");

    //向每个匹配的元素内部前置内容。
      $("p").prepend("<b>Hello</b>");

    //把所有匹配的元素前置到另一个、指定的元素元素集合中。
      $("p").prependTo("class");

二.外部插入

1.after

2.before

3.insertAfter

4.insertBefore

html代码

    <p>I would like to say: </p><div id="foo">Hello</div>
    <div>
	    <p>Hello</p>
	    <p>cruel</p>
	    <p>World</p>
   </div>

jQuery代码

    //在每个匹配的元素之后插入内容。
    $("p").after("<b>Hello</b>");

    //在每个匹配的元素之前插入内容。
    $("p").before("<b>Hello</b>");

    //把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
    $("p").insertAfter("#foo");

    //把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
    $("p").insertBefore("#foo");

三.包裹

1.wrap

2.unwrap

3.wrapAll

4.wrapInner

hHTML代码

    <p>I would like to say: </p><div id="foo">Hello</div>

jQuery代码

    //把所有匹配的元素用其他元素的结构化标记包裹起来。
    $("p").wrap("<div class='wrap'></div>");

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

    //将所有匹配的元素用单个元素包裹起来
    $("p").wrapAll("<div></div>");

    //将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
    $("p").wrapInner("<b></b>");
    $("p").insertBefore("#foo");

四.替换

1.replaceWith

2.replaceAll

hHTML代码

    <p>Hello</p><p>cruel</p><p>World</p>

jQuery代码

    //将所有匹配的元素替换成指定的HTML或DOM元素。
    $("p").replaceWith("<b>Paragraph. </b>");

    //用匹配的元素替换掉所有 selector匹配到的元素。
    $("<b>Paragraph. </b>").replaceAll("p");

五.删除

1.empty()

2.remove

3.detach

hHTML代码

    <p>Hello, <span>Person</span> <a href="#">and person</a></p>

jQuery代码

    //删除匹配的元素集合中所有的子节点。
    $("p").empty();

    //从DOM中删除所有匹配的元素。
    $("p").remove();

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

六.克隆

1.clone

hHTML代码

    <b>Hello</b><p>, how are you?</p>

jQuery代码

    //克隆匹配的DOM元素并且选中这些克隆的副本。
    $("b").clone().prependTo("p");

上面这些代码大家直接用就可以查看效果，希望对大家有所帮助。