首頁 > web前端 > js教程 > JavaScript和jQuery的DOM操作

JavaScript和jQuery的DOM操作

黄舟
發布: 2016-12-21 15:11:38
原創
1549 人瀏覽過

001    1 , 建立元素節點   

002    傳統的javascript方法,建立元素節點   

003    var a = documgo.create方法是:    

005    $(' ');    

006    和createElement()一樣,建立出來的新元素節點不會自動加入文件。    

007    如果想把它加入文件裡,可以使用 jQuery中的 append()或insertAfter()方法或 before ()等方法。

008    例如:    

009    var a = $('');    

010   /p>');    

010  011    

012    

013    2,建立文字節點:    

014    p. ");    

016    通常建立文字節點和建立元素節點搭配使用.    

017    例如:    

018    var mes = document.createTextNode("hello world”); 頎p. 

020    container.appendChild(mes);

021    document.body.appendChild(container);    

022    

023    /p>');    

025    和createElement()一樣,建立出來的新元素節點不會被自動加入到文件裡。    

026    如果想把它加入文件裡,可以使用 jQuery中的 append()或insertAfter()方法或 before ()等方法。

027    例如:    

028    var a = $('hello world');    

029  .

030    

031    3,復刻document.createTextNode("hello world");    

035    var container = document. createElement("p");    

036    container.appendChild(mes);    

037    document.body.appendChild(container); ;//true和false的差別   

039    document.body.appendChild(newpara );    

040    注意:    

041    true : 是

是 複製。    

042    false: 只複製 ,裡面的文字不複製。    

043    可以用 firebug 看看。

044    

045    在jQuery複製節點:    

046    var a = $('hello world')  var a = $('hello world'); );    

048    var clone_a = a.clone();    

049    $('body').append(clone_a);    

050   複製文件裡。    

052    如果想把它加入文件裡,可以使用 jQuery中的 append()或insertAfter()方法或 before ()等方法。    

053    另外還有一個注意:如果克隆後,id一樣,不要忘記用.attr("id","new_id")來改變新的節點的ID。    

054    

055    4, 插入節點    

056    傳統的javascript  appendChild() :    

059    給予元素一個子節點, 新的節點 插入到 最後。    

060    var container = document.createElement("p");    

061    document.body.appendChild(container);  

063    insertBefore() :    

064    顧名思義,就是將一個新的節點插入到目標節點的前面。

065    Element.insertBefore( newNode , targerNode );    

066    

067   

069    .append()    

070    .appendTo( )    

071    .prepend()    

072    .prependTo()    

073     

075    .before()    

076    .insertBefore()    

077    因此對操作的簡化也是jquery的亮點之一。

078    

079    

080    5, 刪除節點   

  

083    var b = document.getElementById("b");    

084    var c = b.parentNode;    

085    c.removeChild(b);    

086    

087    在jQuery中刪除的刪除節點:

089    $('#test2').remove();    

090

091    6, 替換節點   

092    傳統的javascript方法,替換節點:    

093     

095    oldNode必須是Element的子節點。

096    

097    在jQuery中的替換節點:    

098    例如:    

test);   

100    

101    7 ,設定屬性,取得屬性   

102    傳統的javascript方法,設定屬性,取得屬性:    

103    

105    var a = document.createElement(“p” );    

106    a.setAttribute("title","my demo");    

107    不管以前有沒有title屬性,以後的值就是my demo。

108    

109    getAttribute();//取得   

110    var a =document.getElementById(110    var a =document.getElementById(cssrain")  bute("title");    

112    取得的時候,若屬性不存在,則回傳空,    

113    

114    在jQuery中的設定屬性,取得屬性:    

115   "class" : "test " , "title" : "TestDemo!" });    

117    $("#test1").attr("class");    

🠎1188 185

120    查找節點對jQuery來說簡直是小菜一碟.    

121    jQuery最引入關注的是找出節點,也就是通常所說的選擇器.    

122       $('.class ')    

125    $('tag')    

126    $('tag.class')    

127    ')    

129    $(' #id:visible')    

130    $('#id .class')    

131    $('.class .class')    

DOM操作的內容,更多相關內容請關注PHP中文網(m.sbmmt.com)! 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板