JavaScript和jQuery的DOM操作

001    1 , 创建元素节点    

002    传统的javascript方法，创建元素节点    

003    var a = document.createElement("p");    

004    jQuery中创建节点的方法是：    

005    $('< p>< /p>');    

006    和createElement()一样，创建出来的新元素节点不会被自动添加到文档里。    

007    如果想把它添加到文档里，可以使用 jQuery中的 append()或者insertAfter()方法或者 before ()等方法。    

008    比如：    

009    var a = $('< p>< /p>');    

010    $('body').append(a);//添加到body元素的最后.    

011    

012    

013    2,创建文本节点:    

014    传统的javascript方法，创建文本节点    

015    var b = document.createTextNode("my demo");    

016    通常创建文本节点和创建元素节点配合使用.    

017    比如：    

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

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

020    container.appendChild(mes);    

021    document.body.appendChild(container);    

022    

023    而在jQuery中创建节点就不必那么麻烦了：    

024    $('< p>hello world< /p>');    

025    和createElement()一样，创建出来的新元素节点不会被自动添加到文档里。    

026    如果想把它添加到文档里，可以使用 jQuery中的 append()或者insertAfter()方法或者 before ()等方法。    

027    比如：    

028    var a = $('< p>hello world< /p>');    

029    $('body').append(a);//添加到body元素的最后.    

030    

031    3,复制节点    

032    传统的javascript方法，复制节点:    

033    比如：    

034    var mes = document.createTextNode("hello world");    

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

036    container.appendChild(mes);    

037    document.body.appendChild(container);    

038    var newpara = container.cloneNode(true);//true和false的区别    

039    document.body.appendChild(newpara );    

040    注意：    

041    true ： 是< p>aaaa< /p> 克隆。    

042    false： 只克隆 < p>< /p> ，里面的文本不克隆。    

043    可以用 firebug 看看。    

044    

045    在jQuery中复制节点：    

046    var a = $('< p>hello world< /p>');    

047    $('body').append(a);    

048    var clone_a = a.clone();    

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

050    

051    和createElement()一样，复制出来的新元素节点不会被自动添加到文档里。    

052    如果想把它添加到文档里，可以使用 jQuery中的 append()或者insertAfter()方法或者 before ()等方法。    

053    另外还有一个注意：如果克隆后，id一样，不要忘记用.attr("id","new_id")来改变新的节点的ID。    

054    

055    4, 插入节点    

056    传统的javascript方法，插入节点:    

057    比如：    

058    appendChild() :    

059    给元素追加一个子节点， 新的节点 插入到 最后。    

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

061    document.body.appendChild(container);    

062    

063    insertBefore() :    

064    顾名思义，就是把一个新的节点插入到目标节点的前面。    

065    Element.insertBefore( newNode , targerNode );    

066    

067    在jQuery中插入节点比javascript自带的多了很多,    

068    比如：    

069    .append()    

070    .appendTo()    

071    .prepend()    

072    .prependTo()    

073    .after()    

074    .insertAfter()    

075    .before()    

076    .insertBefore()    

077    所以对dom操作的简化也是jquery的亮点之一。    

078    

079    

080    5, 删除节点    

081    传统的javascript方法，删除节点:    

082    比如：    

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

084    var c = b.parentNode;    

085    c.removeChild(b);    

086    

087    在jQuery中的删除节点:    

088    比如：    

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

090    

091    6, 替换节点    

092    传统的javascript方法，替换节点:    

093    比如：    

094    Element.repalceChild( newNode , oldNode );    

095    oldNode必须是Element的一个子节点。    

096    

097    在jQuery中的替换节点:    

098    比如：    

099    $("< p>替换 test1 ！ < /p>").replaceAll("#test1");    

100    

101    7 ,设置属性,获取属性    

102    传统的javascript方法，设置属性,获取属性:    

103    比如：    

104    setAttribute();//设置    

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

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

107    不管以前有没有title属性，以后的值是 my demo。    

108    

109    getAttribute();//获取    

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

111    var b = a.getAttribute("title");    

112    获取的时候，如果属性不存在，则返回空，    

113    

114    在jQuery中的设置属性,获取属性:    

115    比如：    

116    $("#test1").attr({ "class" : "test" , "title" : "TestDemo!" });    

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

118    

119    8, 查找节点    

120    查找节点对jQuery来说 简直是小菜一碟.    

121    jQuery最引入关注的就是查找节点，也就是通常所说的选择器.    

122    比如：    

123    $('#id')    

124    $('.class')    

125    $('tag')    

126    $('tag.class')    

127    $('#id tag')    

128    $('tag#id')    

129    $('#id:visible')    

130    $('#id .class')    

131    $('.class .class')    

132    ....    

 以上就是JavaScript和jQuery的DOM操作的内容，更多相关内容请关注PHP中文网（www.php.cn）！