深入學習jQuery節點操作 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　DOM節點操作包括創建節點、插入節點、移除節點、替換節點和復制節點。jQuery也有類似的方法，此外，還擴展了包裹節點。本文將詳細介紹jQuery節點操作

創建節點

　　創建節點的流程比較簡單，包括創建節點、添加屬性和添加文本。若應用原生方法，一般地，包括document.createElement()、setAttribute()和innerHTML

var ele = document.createElement('div');
ele.innerHTML = '測試內容';
ele.setAttribute('id','test');

　　在jQuery中，創建元素節點、屬性節點和文本節點的過程，只需要一步即可

$('<div id="test">測試內容</div>')

插入節點

　　jQuery關于插入節點有多達8個方法

【append()】

　　使用append(content[,content])方法在每個匹配元素里面的末尾處插入參數內容，參數可以是DOM元素，DOM元素數組，HTML字符串，或者jQuery對象

　　如果插入的節點已經是文檔的一部分了，那結果就是將該節點從原來的位置轉移到新位置。類似于原生的appendChild()方法

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box">Greetings</div>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<button id="btn">增加內容</button>
<script>
$('#btn').click(function(){
    $('#box').append('<span id="test">測試內容</span>');    
    $('.inner').append($('#box'));
})
</script>

　　append()方法可以接受多個參數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box"></div>
<button id="btn">增加內容</button>
<script>
$('#btn').click(function(){
    var $ele1 = $('<i>1</i>');
    var $ele2 = $('<i>2</i>');
    $('#box').append($ele1,$ele2);    
})
</script>

append(function(index,html))

　　append()方法可接受一個函數作為參數。該函數的index參數表示元素在匹配集合中的索引位置，html參數表示元素上原來的HTML內容。this指向元素集合中的當前元素，返回HTML字符串，DOM元素或jQuery對象　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box">123</div>
<button id="btn">增加內容</button>
<script>
$('#btn').click(function(){
    $('#box').append(function(index,html){
        return '<i>' + (index+1+html/1) + '</i>';
    });    
})
</script>

【appendTo(target)】

　　appendTo()方法的參數可以是一個選擇符，元素，HTML字符串，DOM元素數組，或者jQuery對象

　　appendTo()方法與append()方法正好相反，append()方法前面是要選擇的對象，參數是要在對象內插入的元素內容；而appendTo()方法前面是要插入的元素內容，而參數是要選擇的對象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box"></div>
<button id="btn">增加內容</button>
<script>
$('#btn').click(function(){
    var $ele1 = $('<i>1</i>');
    $ele1.appendTo($('#box'))
})
</script>

【insertBefore()】

　　javascript存在原生的insertBefore()方法。jQuery也存在insertBefore()方法，但用法不同

insertBefore(target)

　　insertBefore(target)方法接受一個選擇器，元素，HTML字符串或者jQuery對象作為參數，匹配的元素將會被插入在由參數指定的目標前面

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加內容</button>
<script>
$('#btn').click(function(){
    $('<i>Test</i>').insertBefore('.inner')
})
</script>

【insertAfter(target)】

　　insertAfter(target)方法與insertBefore()方法相反，該方法接受一個選擇器，元素，HTML字符串或者jQuery對象作為參數，匹配的元素將會被插入在由參數指定的目標后面

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加內容</button>
<script>
$('#btn').click(function(){
    $('<i>Test</i>').insertAfter('.inner')
})
</script>

【before(content[,content])】

　　before()和insertBefore()實現同樣的功能。主要的不同是語法——內容和目標的位置不同。對于before(), 選擇器表達式在方法的前面，參數是將要插入的內容。對于insertBefore()剛好相反，內容在方法前面，選擇器表達式作為參數　　

　　before(content[,content])方法可以接受一個或多個DOM元素，元素數組，HTML字符串，或jQuery對象作為參數，插在集合中每個匹配元素前面

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加內容</button>
<script>
$('#btn').click(function(){
    $('.inner').before('<i>Test</i>')
})
</script>

　　類似地，before()方法也支持多個參數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加內容</button>
<script>
$('#btn').click(function(){
    var $ele1 = $('<i>1</i>');
    var $ele2 = $('<i>2</i>');    
    $('.inner').before($ele1,$ele2);
})
</script>

before(function(index,html))

　　before()方法可以接受一個函數作為參數。該函數的index參數表示元素在匹配集合中的索引位置，html參數表示元素上原來的HTML內容。函數中this指向元素集合中的當前元素，返回HTML字符串，DOM元素或jQuery對象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<divid="box">123</div>
<button id="btn">增加內容</button>
<script>
$('#btn').click(function(){
    $('#box').before(function(index,html){
        return index+1+html/1;
    });    
})
</script>

【after()】

　　after()和insertAfter()實現同樣的功能。主要的不同是語法——特別是內容和目標的位置。對于after()，選擇表達式在函數的前面，參數是將要插入的內容；對于insertAfter()，剛好相反，內容在方法前面，它將被放在參數里元素的后面

after(content[,content])

　　after(content[,content])方法可以接受一個或多個DOM元素，元素數組，HTML字符串，或jQuery對象作為參數，插在集合中每個匹配元素后面

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加內容</button>
<script>
$('#btn').click(function(){
    $('.inner').after('<i>Test</i>')
})
</script>

　　類似地，after()方法也支持多個參數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加內容</button>
<script>
$('#btn').click(function(){
    var $ele1 = $('<i>1</i>');
    var $ele2 = $('<i>2</i>');    
    $('.inner').after($ele1,$ele2);
})
</script>

after(function(index,html))

　　after()方法可以接受一個函數作為參數。該函數的index參數表示元素在匹配集合中的索引位置，html參數表示元素上原來的HTML內容。函數中this指向元素集合中的當前元素，返回HTML字符串，DOM元素或jQuery對象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<divid="box">123</div>
<button id="btn">增加內容</button>
<script>
$('#btn').click(function(){
    $('#box').after(function(index,html){
        return index+1+html/1;
    });    
})
</script>

【prepend()】

　　與append()方法相反，prepend()方法將參數內容插入到匹配元素內部的最前面，作為第一個子元素

prepend(content[,content])

　　prepend()方法接收一個或多個DOM元素，元素數組，HTML字符串，或者jQuery對象作為參數，然后插入到匹配元素前的內容

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加內容</button>
<script>
$('#btn').click(function(){
    $('.inner').prepend('<i>123</i>')
})
</script>

　　類似地，prepend()方法也支持多個參數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加內容</button>
<script>
$('#btn').click(function(){
    var $ele1 = $('<i>1</i>');
    var $ele2 = $('<i>2</i>');
    $('.inner').prepend($ele1,$ele2);
})
</script>

prepend(function(index,html))

　　prepend()方法可以接受一個函數作為參數。該函數的index參數表示元素在匹配集合中的索引位置，html參數表示元素上原來的HTML內容。函數中this指向元素集合中的當前元素，返回HTML字符串，DOM元素或jQuery對象　　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box">123</div>
<button id="btn">增加內容</button>
<script>
$('#btn').click(function(){
    $('#box').prepend(function(index,html){
        return index+1+html/1;
    });    
})
</script>

【prependTo()】

　　prepend()和prependTo()實現同樣的功能，主要的不同是語法，插入的內容和目標的位置不同。對于prepend()而言，選擇器表達式寫在方法的前面，作為待插入內容的容器，將要被插入的內容作為方法的參數。而prependTo()正好相反，將要被插入的內容寫在方法的前面，可以是選擇器表達式或動態創建的標記，待插入內容的容器作為參數

prependTo(target)

　　prependTo()方法的參數是一個選擇器, DOM元素，元素數組，HTML字符串，或者jQuery對象，插入到匹配元素前的內容

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">增加內容</button>
<script>
$('#btn').click(function(){
    $('<i>123</i>').prependTo('.inner')
})
</script>

刪除節點

　　如果文檔中某一個元素多余，那么應將其刪除。jQuery提供了三種刪除節點的方法，包括detach()、empty()、remove()

【detach()】

　　如果我們希望臨時刪除頁面上的節點，但是又不希望節點上的數據與事件丟失，并且能在下一個時間段讓這個刪除的節點顯示到頁面，這時候就可以使用detach()方法來處理。detach()方法所綁定的事件、附加的數據等都會保留下來

detach()

　　當detach()方法沒有參數時，將直接刪除節點元素。該方法返回被刪除的元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn1">刪除元素</button>
<button id="btn2">恢復元素</button>
<script>
var $div;
$('.inner').click(function(){
    alert(1);
})
$('#btn1').click(function(){
    $div = $('.inner').detach();
})
$('#btn2').click(function(){
    $div.prependTo('body');
})
</script>

detach([selector])

　　detach()方法可以接受一個選擇表達式作為參數，將需要移除的元素從匹配的元素中過濾出來

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<p class="inner">Goodbye</p>
<button id="btn1">刪除元素</button>
<button id="btn2">恢復元素</button>
<script>
var $div;
$('.inner').click(function(){
    alert(1);
})
$('#btn1').click(function(){
    $div = $('.inner').detach('div');
})
$('#btn2').click(function(){
    $div.prependTo('body');
})
</script>

【empty()】

　　empty()方法不接受任何參數。嚴格來講，empty()方法并不是刪除節點，而是清空節點，它能清空元素中的所有后代節點，但并不刪除自身節點。為了避免內存泄漏，jQuery先移除子元素的數據和事件處理函數，然后移除子元素

<style>
.inner{height: 30px;width: 100px;background-color: lightblue;}
</style>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn">清空元素</button>
<script>
$('#btn').click(function(){
    $('.inner').empty();
})
</script>

【remove()】

　　remove()方法會將元素自身移除，同時也移除元素內部的一切，包括綁定事件及與該元素相關的jQuery數據

　　當remove()方法沒有參數時，將直接刪除節點元素，并返回被刪除的元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
<button id="btn1">刪除元素</button>
<button id="btn2">恢復元素</button>
<script>
var $div;
$('.inner').click(function(){
    alert(1);
})
$('#btn1').click(function(){
    $div = $('.inner').remove();
})
$('#btn2').click(function(){
    $div.prependTo('body');
})
</script>

remove([selector])

　　remove()方法可以接受一個選擇表達式作為參數，將需要移除的元素從匹配的元素中過濾出來

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="inner">Hello</div>
<p class="inner">Goodbye</p>
<button id="btn1">刪除元素</button>
<button id="btn2">恢復元素</button>
<script>
var $div;
$('.inner').click(function(){
    alert(1);
})
$('#btn1').click(function(){
    $div = $('.inner').remove('div');
})
$('#btn2').click(function(){
    $div.prependTo('body');
})
</script>

復制節點

clone()

　　clone()方法深度復制所有匹配的元素集合，包括所有匹配元素、匹配元素的下級元素、文字節點

　　出于性能方面的考慮，表單元素動態的狀態(例如，用戶將數據輸入到input和textarea，或者用戶在select中已經選中某一項)不會被復制到克隆元素。克隆操作將設置這些字段為HTML中指定的默認值

　　當clone()方法沒有參數(相當于參數為false)，表示不會復制元素上的事件處理函數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="test"><i>測試</i></div>
<button id="btn">復制節點</button>
<script>
$('.test').click(function(){
    alert(1);
})
$('#btn').click(function(){
    $('.test').clone().appendTo('body')
})
</script>

　　當clone()方法參數為true時，會復制元素上的事件處理函數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="test"><i>測試</i></div>
<button id="btn">復制節點</button>
<script>
$('.test').click(function(){
    alert(1);
})
$('#btn').click(function(){
    $('.test').clone(true).appendTo('body')
})
</script>

替換節點

　　如果要替換某個節點，jQuery提供了相應的方法，即replaceWith()和replaceAll()

【replaceWith()】

　　replaceWith()方法用提供的內容替換集合中所有匹配的元素并且返回被刪除元素的集合

replaceWith(newContent)

　　replaceWith(newContent)方法可以接受一個HTML字符串，DOM元素，或者jQuery對象作為參數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>
<button id='btn'>替換內容</button>
<script>
$('#btn').click(function(){
    alert($('.inner').replaceWith('<div>div</div>').html())
})
</script>

　　當一個元素是被替換的內容時，替換的元素從老地方移到新位置，而不是復制

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>
<button id='btn'>替換內容</button>
<script>
$('#btn').click(function(){
    alert($('.third').replaceWith($('.first')).html())
})
</script>

replaceWith(function(index,content))

　　replaceWith()方法可以接受一個函數作為參數。該函數的index參數表示元素在匹配集合中的索引位置，content參數表示元素上原來的HTML內容。函數中this指向元素集合中的當前元素，返回HTML字符串，DOM元素或jQuery對象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>
<button id='btn'>替換內容</button>
<script>
$('#btn').click(function(){
    $('.inner').replaceWith(function(index,content){
        return '<div>' + index + content + '</div>';
    })
})
</script>

【replaceAll(target)】

　　replaceAll()方法與replaceWith()功能一樣，但是目標和源相反

　　replaceAll()方法接受一個選擇器字符串，jQuery對象，DOM元素，或者元素數組為參數，用集合的匹配元素替換每個目標元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>
<button id='btn'>替換內容</button>
<script>
$('#btn').click(function(){
    alert($('<div>div</div>').replaceAll('.inner').html())
})
</script>

包裹節點

　　如果要將某個節點用其他標記包裹起來，jQuery提供了相應的方法，包括wrap()、unwrap()、wrapAll()、wrapInner()

【wrap()】
　　wrap()方法可以在每個匹配的元素外層包上一個html元素。它有以下兩種使用方法

wrap(wrappingElement)　

　　wrap()方法中的參數可以是一個HTML片段，選擇表達式，jQuery對象，或者DOM元素，用來包在匹配元素的外層

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<i>123</i>
<button id="btn">包裹元素</button>
<script>
$('#btn').click(function(){
$('i').wrap('<div style="height:20px;background:lightblue;"></div>')        
})
</script>

wrap(function(index))

　　wrap()方法的參數可以是一個函數，返回用于包裹匹配元素的HTML內容或jQuery對象。index參數表示匹配元素在集合中的集合。該函數內的this指向集合中的當前元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<i>123</i>
<button id="btn">包裹元素</button>
<script>
$('#btn').click(function(){
    $('i').wrap(function(index){
        return '<div style="height:20px;background:lightblue;">' +  index+ '</div>'
    })        
})
</script>

【unwrap()】

　　unwrap()方法不接受任何參數，與wrap()方法的功能相反，unwrap()方法將匹配元素集合的父級元素刪除，保留自身(和兄弟元素，如果存在)在原來的位置

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div style="height:20px;background:lightblue"><i>123</i></div>
<button id="btn">刪除父元素</button>
<script>
$('#btn').click(function(){
    $('i').unwrap();
})
</script>

【wrapAll()】

　　與wrap()方法不同，wrapAll()方法在所有匹配元素外面包一層HTML結構。參數可以是用來包在外面的HTML片段，選擇表達式，jQuery對象或者DOM元素

　　[注意]如果被包裹的多個元素有其他元素，其他元素會被放到包裹元素之后

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<i>1</i><i>2</i><b>3</b><i>4</i><i>5</i>
<button id="btn">包裹元素</button>
<script>
$('#btn').click(function(){
    $('i').wrapAll('<div></div>');
})
</script>

【wrapInner()】

　　wrapInner()可以在匹配元素里的內容外包一層結構。它有以下兩種使用方法

wrapInner(wrappingElement)

　　wrapInner()方法中的參數可以是用來包在匹配元素的內容外面的HTML片段，選擇表達式，jQuery對象或者DOM元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>123</div>
<button id="btn">包裹元素</button>
<script>
$('#btn').click(function(){
    $('div').wrapInner('<i></i>');
})
</script>

wrapInner(function(index))

　　wrapInner()方法的參數可以是一個返回HTML結構的函數，用來包在匹配元素內容的外面。接收集合中元素的索引位置作為參數。在函數中，this指向集合中當前的元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>123</div>
<button id="btn">包裹元素</button>
<script>
$('#btn').click(function(){
    $('div').wrapInner(function(index){
        return '<i>' + index +'</i>'
    });
})
</script>