html中DOM 操作(js 和 jquey)
来源:互联网 发布:运营美工表情包 编辑:程序博客网 时间:2024/06/10 01:48
一.查询
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里面
- html中DOM 操作(js 和 jquey)
- html中DOM 操作(js 和 jquey)
- Html-js中的DOM操作
- jquey和js插入节点
- jquey对象和dom对象互转
- js操作html中select和opthion
- HTML DOM 事件,可用于定义js在HTML元素中不同操作的处理程序
- DOM操作HTML(JS加强)
- HTML DOM基本操作,附js代码
- JS中操作DOM文档
- js中DOM操作汇总
- js中一些操作DOM的属性和方法
- jquery和js中对DOM元素的操作
- jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
- jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
- 用js操作html dom对象是,对象和js方法同名的问题
- jquey和普通js的执行时间
- Js中Dom对象,控制Html元素
- Java对象及其引用
- BNU 0814 B Domino Sorting
- 微软Windows Phone卷土归来
- require "watir"报装载库文件错误(no such file to load -- watir)
- HDU 4358 Boring counting(线段树)
- html中DOM 操作(js 和 jquey)
- 报告-简单的asp.net 登陆验证配置
- 如何配置Oracle客户端以及sys系统超级管理员无法登录的问题
- ubuntu下淘宝的使用
- Decorator模式
- POJ 3468 A Simple Problem with Integers 线段树
- poj 2762 Going from u to v or from v to u?
- ubuntu 12.04 安装google输入法 输入法图标消失解决办法
- VC右键菜单中显示图片,附源码