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)!