html中DOM 操作(js 和 jquey) - html/css语言栏目：htm-自学php网

html中DOM 操作(js 和 jquey) - html/css语言栏目：htm

来源：自学PHP网时间：2015-04-14 14:51 作者：阅读:次

[导读] 一.查询js:document.getElementById(id)、document.getElementsByName(name)(返回的是一个数组，可加[0])、document.getElementsByTagName(Tag)(数组)jquery:用选择器查找（参考jQuey选择器）二.插入js:vari......

一.查询

js:document.getElementById(“id”)、document.getElementsByName("name")(返回的是一个数组，可加[0])、document.getElementsByTagName("Tag")(数组)

jquery:用选择器查找（参考jQuey选择器）

二.插入

js:

varinputElement =document.createElement("input"); //添加标签
inputElement.setAttribute("type","text");//设置标签的属性

document.getElementsByTagName("div")[0].appendChild(inputElement);//不要忘了把创建的元素添加到某个元素上面 (增加子节点)

jquery:

varli1 = "<li>我要学好框架的东东</li>";//$("<li>我要学好框架的东东</li>");
var li2 = "<li>我要找个月薪5k的工作</li>";//$("<li>我要找个月薪5k的工作</li>");
var li3 = "<li>00:18</li>";

$("ul").append(li1);//添加的是jqurey对象,也可自符串,同js中的appenChild()方法
$("ul").prepend(li2);//ul中第一个节点增加
$("ul li:eq(1)").after(li3);//后面增加一个元素反过来添加的有insertAfter

三.删除

js:

varbr = document.createElement("br");

varbody =document.getElementsByTagName("body")[0];//注意其返回的是数组啊

body.appendChild(br);//添加

removeChile("br");//删除

jquery:

var$remove = $("ul li:eq(1)").remove();//返回删除的对象
$("ul").append($remove); //ul中删除$remove
$("ul li").remove("li[title != 2]");
$("li[title=2]").empty();//清空元素的内容，还在页面上

四.复制

js:(转)

cloneNode(deepBoolean)
复制并返回当前节点的复制节点，复制节点是一个孤立节点，它复制了原节点的属性，在把这个新节点加入到document前，根据需要修改ID属性确保其ID的唯一。
这个方法支持一个布尔参数，当deepBoolean设置true时，复制当前节点的所有子节点，包括该节点内的文本。
<html>
<body>
<p id="mynode">test</p>
<script language="javascript">
p=document.getElementById("mynode")
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone);
</script>
</body>
</html>

jquey:

$(this).clone(true).appendTo("ul");//$(this)每一个被点击对象转化成jquery对象,clone(true) true代表事件也复制到里面

五.替换

js:(转)

replaceChild(newChild,oldChild)
把当前节点的一个子节点换成另一个节点
<html>
<body>
<div id="mynode2">
<span id="orispan">span</span>
</div>
<script language="javascript">
var orinode=document.getElementById("orispan");
var newnode=document.createElement("p");
var text=document.createTextNode("test ppp ");
newnode.appendChild(text);
document.getElementById("mynode2").replaceChild(newnode,orinode);
</script>
</body>
</html>

jquery:

$("ulli:eq(1)").replaceWith("<li>星期五</li>");//用后面的元素替换前面的
$("<li>星期六</li>").replaceAll("li:eq(2)");//用前面的元素替换后面的

六.包裹

js:

jquey:

$("p").wrap("<ahref='http://www.google.com>'></a>");//用超链接把p包裹起来

$("p").wrapInner("<ahref='http://www.baidu.com'></a>");//把超链接放到p里面

NPOI 导出数据到Excel（包括图片） - html/css语言栏

wordpress二次开发：站外以HTML的形式调用wordpress文

子栏目

html中DOM 操作(js 和 jquey) - html/css语言栏目：htm

最新评论

添加评论

更多文章推荐

添加评论