1. 程式人生 > >jQuery的文件處理操作

jQuery的文件處理操作

文件處理常用的函式:

append, appendTo   向每個匹配的元素內部追加內容

prepend, prependTo   向每個匹配的元素內部前置內容。

before, after, insertBefore, insertAfter 在每個匹配的元素之後或者前面插入內容。

wrap, unwrap  把所有匹配的元素用其他元素的結構化標記包裹起來。unwrap 表示移除直接父級元素

replaceWith 將所有匹配的元素替換成指定的HTML或DOM元素。

empty, remove, clone  刪除匹配的元素集合中所有的子節點。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-1.11.1.min.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>I would like to say: </p>
<div>this is div1</div>
<div>this is div2</div>
<p class="test_p">I would like to say: test_p</p>
<div id="foo">Hello foo after</div>
<div id="foo2">Hello foo before</div>
<div class="test_wrap" style="color: red">
    <p class="test_p2">I would like to say: test_p2</p>
</div>


<p class="test_empty">Hello,<span>Person</span> <a href="#">and person</a></p>
<p class="test_remove">Hello,</p> how are <p>you?</p>
<b class="test_clone">Hello,</b>
<p>how are you?</p>

<p class="test_replace">Hello</p>
<p class="test_replace">cruel</p>
<p class="test_replace">World</p>

</body>
</html>

<script>
    $(function () {

        //append
        //$("p").append("<b>Hello</b>");


        //appendTo 剪下操作
        // $("p").appendTo("div");

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

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

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

        // 剪下操作
        //insertAfter 把所有匹配的元素插入到另一個、指定的元素元素集合的後面 和$("#foo").after("p")相同
        // $("p.test_p").insertAfter("#foo");
        //$("#foo").after($("p.test_p"));

        //insertBefore 把所有匹配的元素插入到另一個、指定的元素元素集合的前面。 和 與 $("#foo").before("p")相同。
        // $("p.test_p2").insertBefore("#foo2");
        // $("#foo2").before($("p.test_p2"));

        //wrap。把所有匹配的元素用其他元素的結構化標記包裹起來
        // $("p.test_p2").wrap("<div class='wrap' style='color: red;'></div>");

        //unwrap 取消包裹, 移除直接父級元素
        // $("p.test_p2").unwrap();

        //empty 刪除匹配的元素集合中所有的子節點。
        // $("p.test_empty").empty();

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

        //clone 克隆所有b元素(並選中這些克隆的副本),然後將它們前置到所有段落中。
        // $("b").clone().prependTo("p");

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

    });
</script>