2. 程式人生 > >jQuery節點操作

jQuery節點操作

阿新 • • 發佈：2017-05-10
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>

技術分享



jQuery節點操作

相關推薦

jQuery節點操作

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

51 jquery 節點操作和 bootstrapt

jquery 和 bootstrapt1.jquery each 函式 1.each 迴圈方式一： 可迴圈物件: var arr =["alex","deng","wang"] 或 var dic ={"name":"deng","age":18} $.each(可迴圈物件，

jQuery-DOM操作之復制、替換、包裹節點

code 操作 所有 喜歡 傳遞 pen 傳遞參數 含義 新元素 1、復制節點 clone() $(function(){ $(‘ul li‘).click(function() { $(this).clone().

jQuery DOM節點操作

使用 strong cti html ndt pty index all taf 一、創建節點 var box = $(‘<div id =box>節點</div>‘); //創建一個節點 $(‘body‘).appended(box);　　　　　

JQuery---選擇器、DOM節點操作練習

span gif .text ide none tle pre splay body 一、練習一 1、需求效果分析： 2、代碼示例： 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/

jQuery DOM節點操作方法大全

dom jquery 元素操作 append(content | fn)：向每個匹配的元素內部追加內容。參考：http://jquery.cuishifeng.cn/append.html例如：向所有段落中追加一些HTML標記。<p>I would like to say: </

jQuery基礎——節點操作

() 生成 for 視頻 原生 循環 新的 value clone() 一、html標簽追加 ·　　1、音頻標簽 　　　　<audio src="" controls></audio> //src：引入文件 controls：顯示進度條 　　　

jquery——元素節點操作

span jquery asc nbsp insert pen text class strong 插入節點： 1.append（）和appendTo（）：在現存元素的內部，從後面插入元素 <script type="text/javascript">

jQuery教程-DOM節點操作及位置和大小 - 04

1. jQuery建立DOM標籤 1.1 DOM動態建立標籤的方法 DOM時代我們通過document的createElement方法動態建立標籤。建立標籤後，動態的給他新增屬性。例如程式碼： // 動態建立標籤 var domDiv = document.createElment('d

jquery元素節點操作,滾輪事件與函式節流:(六)

15：jquery元素節點操作 16：滾輪事件與函式節流 17：json 18：ajax與jsonp 19：本地儲存 20：jqueryUI 目錄十五 jquery元素

jQuery--DOM的節點操作

目錄 建立節點 新增節點 替換節點 刪除節點 清空節點 包裹節點  遍歷節點 屬性操作 文字操作 樣式操作 建立節點 $(html)方法會根據傳入的HTML標記字串，建立一個DOM物件,並將這個DOM物件包裝成一個jQuery物件 返回值:建立的

jQuery教程-DOM節點操作及位置和大小

1. jQuery建立DOM標籤 1.1 DOM動態建立標籤的方法 DOM時代我們通過document的createElement方法動態建立標籤。建立標籤後，動態的給他新增屬性。例如程式碼： // 動態建立標籤 var domDiv = document.create

jQuery 之 DOM節點操作及位置和大小

1. jQuery建立DOM標籤 1.1 DOM動態建立標籤的方法 DOM時代我們通過document的createElement方法動態建立標籤。建立標籤後，動態的給他新增屬性。例如程式碼： // 動態建立標籤 var domDiv = document.createElment(

jQuery DOM操作之插入節點

插入節點 將新建立的節點插入到某個文件的方法並非只有常見的append()， 在jQuery中還提供了其他幾種插入節點的方法， 如表 一、append( ) 、appendTo( ) -- 在元素內部

jquery的tree增刪改查節點操作

1 首選需要新增jquery的css和js。順序不能變（注意：有script標籤。一定要有</script>結尾。不然會出錯） 如：<link rel="stylesheet" type="text/css" href="./common/easyui/t

jQuery基礎教程之DOM操作-節點操作函式（一）

jQuery作為Javascript的一個強大的庫，其對DOM物件的操作之簡化，讓開發人員甚至於小白們都為之讚歎不已。 接著上一個系列的jQuery選擇器的教程，接下來教大家的是jQuery中的DOM操作。為了方便大家更加容易對jQuery中的各種操作DOM物件的函式進行理解。今天我花了一天的時間自己構建了

【Jquery】- DOM 節點操作

Jquery DOM 比較 <html> <head> &

JQuery學習筆記（3）——節點操作 節點查詢

插入節點 內部插入 所謂的內部插入，就是指在節點裡面的插入，而外部插入，則是在節點外面插入。 append() prepend() appendTo() prependTo() append和prepend是相反的 後面以To結尾的，引數為被插入內容的節點 append可以理解為尾部插入，prepend為

jQuery 批量操作checkbox

ttr als false box rip 後來 true 全不選 批量操作 困擾很久的問題： 如果只是 $(‘input[type=checkbox]‘).attr(‘checked‘,true);//全選 $(‘input[type=checkbox]‘).a

jQuery特性操作

信息 元素 前面的話　　每個元素都有一個或者多個特性，這些特性的用途就是給出相應元素或者其內容的附加信息。操作特性的DOM方法主要有3個：getAttribute()方法、setAttribute()方法和removeAttribute()方法，而在jQuery中用一個attr()與removeAtt