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操作的内容,更多相关内容请关注龙方网络(www.yzlfxy.com)!

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: