jQuery操控DOM元素

建立節點元素

$(html)用於動態的建立節點元素，只須要找到元素的上級節點

點擊按鈕建立p元素節點，並設置內容爲：建立的節點，顏色爲紅色，字體大小爲20像素

<script type="text/javascript">
    $(function(){
        var p=$('<p style="color: red;font-size: 20px">建立的節點</p>');
        $("input").click(function(){
            $("#wrapper").append(p);
        });
    });
</script>
<div id="wrapper">
    <input type="button" value="點擊建立圖片節點" />
</div>

插入節點

插入內部節點

append(function(index,html))

這個方法是將一個function函數做爲append方法的參數，該函數的功能必須返回一個字符串，做爲append方法插入的內容，index參數爲對象在這個集合中的索引值，html參數爲該對象原有的html值

經過append(function(index,html))方法插入節點

<script type="text/javascript">
    $(function(){
        var p=$('<p style="color: red;font-size: 20px">建立的節點</p>');
        $("input").click(function(){
            $("#wrapper").append(fun);
        });
        function fun(){
            var p=$('<p style="color: red;font-size: 20px">建立的節點</p>');
            return p;
        }
    });
</script>
<div id="wrapper">
    <input type="button" value="點擊建立圖片節點" />
</div>

appendTo(content);

該方法用於將一個指定的元素插入到另外一個元素的內容中

將img元素插入到div元素中去

<script type="text/javascript">
    $(function() {
        $("input").click(function() {
            $("img.img").appendTo($("div.con"));
            });
    });
</script>
<div id="wrapper">
    <input type="button" value="點擊建立圖片節點" />
    <div class="con" style="border: 2px solid red">
        <img src="http://xinxinjs.github.io/img_test/st1.jpg" />
    </div>
    <img class="img" src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>

其餘方法：

append(context);
context表示追加到目標中的內容

prepend(content);
content表示插入目標元素內部前面的內容

prepend(function(imdex,html));
經過function函數返回插入目標元素內部前面的內容

prependTo(content);
content用於表示選擇元素的jQuery表達式

插入外部節點

after(content);
content表示插入目標元素外部後面的內容

after(function);
經過function函數返回插入目標元素外部後面的內容

before(content);
content表示插入目標元素外部前面的內容

before(function);
經過function函數返回插入目標元素外部前面的內容

insertAfter(content);
content表示插入目標元素外部後面的內容，（經測試，該方法會刪除目標元素，而後在目標元素的外部後面插入新的內容）

insetBefore(function);
content表示插入目標元素外部前面的內容，（經測試，該方法會刪除目標元素，而後在目標元素的外部前面插入新的內容）

在目標元素的外部後面插入圖片

<script type="text/javascript">
    $(function() {
        $("input").click(function() {
            $(".con").after('<img src="http://xinxinjs.github.io/img_test/st1.jpg" />');
        });
    });
</script>
<div id="wrapper">
    <input type="button" value="點擊建立圖片節點" />
    <div class="con" style="border: 2px solid red">
        <img src="http://xinxinjs.github.io/img_test/st1.jpg" />
    </div>
        <img class="img" src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>

複製節點

將某個元素節點複製到另外一個節點後，在jQuery中經過clone方法實現，其功能是複製匹配的DOM元素，而且選中複製成功的元素，該方法僅是複製元素自己，被複制後的新元素不具備任何元素行爲。若是在複製時將該元素的所有行爲也進行復制，能夠經過方法clone(true);實現

點擊圖片，對圖片進行復制，並添加到原來圖片的後面

<script type="text/javascript">
    $(function() {
        $("img").click(function() {
            $(this).clone().appendTo("div.con");
        });
    });
</script>
<div id="wrapper">
    <div class="con" style="border: 2px solid red">
        <img src="http://xinxinjs.github.io/img_test/st1.jpg" />
    </div>
</div>

替換節點

在jQuery中替換節點有replaceWith和replaceAll兩種方法，其語法以下

replaceWith(content);
該方法的功能是將全部選擇的元素替換成指定的HTML或DOM元素，其中參數content爲被所選元素替換的內容

replaceAll(selector);
該方法是將全部選擇的元素替換成指定selector的元素，其中參數selector爲須要被替換的元素

分別用兩種方法實現圖片的替換

<script type="text/javascript">
    $(function(){
        $("#s1").click(function(){
            $(this).replaceWith('<img src="http://xinxinjs.github.io/img_test/st3.jpg" />');
        });
        $("#s2").click(function(){
            
            $('<img src="http://xinxinjs.github.io/img_test/st3.jpg" />').replaceAll("#s2");
        });
    });
</script>
<img id="s1" src="http://xinxinjs.github.io/img_test/st2.jpg" />
<img id="s2" src="http://xinxinjs.github.io/img_test/st1.jpg" />

包裹節點

在jQuery中能夠根據需求包裹某各指定節點，對節點的包裹也是DOM對象操做中很重要的一項

如下列表展現包裹節點的所有方法

wrap(html);

html參數爲字符串代碼，用於生成元素幷包裹所選元素

功能：把全部選擇的元素，用其餘字符創代碼包裹起來

wrap(elem);

elem參數用於包裝所選元素的DOM元素

功能：把全部選擇的元素用其餘DOM元素包裹起來

wrap(fn);

fn參數爲包裹結構的一個函數

功能：把全部選擇的元素用function函數返回的代碼包裹起來

unwrap();

無參數

功能：移除所選元素的父元素或包裹標記

wrapAll(html);

html參數爲字符串代碼，用於生成元素，幷包裹元素

功能：把全部選擇的元素用單個元素包裹起來

wrapAll(elem);

elem參數用於包裹所選元素的DOM元素

功能：把全部選擇的元素用單個DOM元素包裹起來

wrapInner(html);

html參數爲字符串代碼，用於生成元素，幷包裹所選元素

功能：把全部選擇元素的子內容（包括文本節點），用字符串代碼包裹起來

wrapInner(elem);

elem參數用於包裹所選元素的DOM元素

功能：把全部選擇元素的子內容（包括文本節點），用DOM元素包裹起來

wrapInner(fn);

fn參數爲包裹結構的一個函數

功能：把全部選擇元素的子內容（包括文本節點），用function函數返回的代碼包裹起來

點擊文本，用a標籤包裹文本

<script type="text/javascript">
    $(function(){
        $("p").click(function(){
            $(this).wrap("<a href='#'></a>");
        });
    });
            
</script>
<p>元素，點擊以後用a標籤包裹</p>

遍歷元素

在DOM文檔中，有時候須要對同一標記的元素進行同一操做。在傳統的JavaScript中，老是先獲取元素的總長度，而後以for循環語句，遞減總長度，訪問其中的某各元素，代碼相對複雜
而在jQuery中可使用each方法實現元素的遍歷，其語法如是：each(callback);

其中callback是一個function函數，該函數還能夠接受一個形參，此形參爲遍歷元素的序號，從0開始。若是須要訪問元素中的屬性，能夠藉助形參index，配合this關鍵字來實現元素屬性的設置或獲取

刪除元素

帶DOM操做頁面時，jQuery提供了兩個刪除元素的方法remove和empty方法，嚴格來講empty並不是真正意義上的刪除，使用該方法僅僅能夠清空全部的節點或節點所包括的全部後代元素，並不是刪除節點和元素

remove方法的語法以下：remove([expr]);

其中expr爲可選項，若是接受參數，則該參數爲篩選元素的jQuery表達式，經過該表達式獲取指定的元素，並進行刪除。

empty語法的格式以下：empty();

點擊文字，刪除文字

<script type="text/javascript">
    $(function(){
        $("p").click(function(){
            $(this).remove();
        });
    });     
</script>
<p>元素，點擊以後用a標籤包裹</p>