js 与 jq 的节点添加删除实例
JavaScript实例:XML DOM节点的添加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JavaScript实例</title>
<style>
#did{width:400px;height:300px;border:1px solid #ddd;}
img{border:2px solid #fff;}
img:hover,#mid{border:2px solid red;}
</style>
</head>
<body>
<!-- html注释 -->
<h2>JavaScript实例:XML DOM节点的添加</h2>
<div id="did"></div>
<img src="./images/66.jpg" width="70"/>
<img src="./images/77.jpg" width="70"/>
<img src="./images/88.jpg" width="70"/>
<img src="./images/99.jpg" width="70"/><br/><br/>
<button onclick="dofun(1)">前添加</button>
<button onclick="dofun(2)">后追加</button>
<button onclick="dofun(3)">前删除</button>
<button onclick="dofun(4)">后删除</button>
<button onclick="dofun(5)">替换</button>
<script type="text/javascript">
//获取上面的图片并添加点击事件
var list = document.getElementsByTagName("img");
for(var i=0;i<list.length;i++){
list[i].onclick = function(){
this.setAttribute("id","mid");
}
} //处理函数
function dofun(m){
//获取div和要处理的图片
var did = document.getElementById("did");
var mid = document.getElementById("mid");
if(mid!==null){
//删除mid的id属性节点
mid.removeAttribute("id");
//克隆mid节点
var ob = mid.cloneNode();
}
//根据产生m的值执行对应的操作
switch(m){
case 1: //前添加
did.insertBefore(ob,did.firstChild); break;
case 2: //后添加
did.appendChild(ob); break;
case 3: //前删除
did.removeChild(did.firstChild); break;
case 4: //后删除
did.removeChild(did.lastChild); break;
case 5:
did.replaceChild(ob,did.lastChild); break;
}
}
</script>
</body>
</html>
jQuery实例:节点添加操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery实例</title>
<style>
#did{width:400px;height:300px;border:1px solid #ddd;}
img{border:2px solid #fff;}
img:hover{border:2px solid #f0c;}
img.hover{border:2px solid #f00;}
</style>
<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//jQuery的入口程序
$(function(){
//获取mid中的所有img并绑定鼠标点击事件
$("#mid img").click(function(){
//取消所有选中
$("#mid img").removeClass("hover");
//添加属性
$(this).addClass("hover");
}); //获取所有按钮并添加点击事件
$("button").click(function(){
//根据按钮上的字执行对应的操作
switch($(this).html()){
case "前添加":
//获取选中的图片克隆后添加到did中间
$("#mid img.hover").removeClass("hover").clone().prependTo("#did");
//$("#did").prepend($("#mid img.hover"));
break;
case "后添加":
//后添加
$("#mid img.hover").removeClass("hover").clone().appendTo("#did");
break;
case "前删除":
$("#did img:first").remove();
break;
case "后删除":
$("#did img:last").remove();
break;
}
});
});
</script>
</head>
<body>
<h2>jQuery实例:节点添加操作</h2>
<div id="did" style="width:400px;height:300px;border:1px solid #ddd"></div><br/><br/>
<div id="mid">
<img src="./images/1.jpg" width="70"/>
<img src="./images/2.jpg" width="70"/>
<img src="./images/3.jpg" width="70"/>
<img src="./images/4.jpg" width="70"/>
</div>
<br/>
<button>前添加</button>
<button>后添加</button>
<button>前删除</button>
<button>后删除</button>
</body>
</html>
js 与 jq 的节点添加删除实例的更多相关文章
- JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作
html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick=&q ...
- JS中的数组，添加删除元素,判断是否存在一个值的方法总结
一.添加元素: 1:在最后添加,返回数组长度:arr.push(...); 2:在最前面添加,返回数组长度:arr.unshift(...); 3:在指定位置添加,没有返回值:arr[i] = xxx ...
- js对table操作（添加删除交换上下TR）
<table width="100%" border="0" cellpadding="2" cellspacing="1& ...
- jQuery选择器(添加节点及删除节点及克隆及替换及包装)第九节
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...
- ORACLE 11gR2 RAC添加删除（正常及强制）节点操作步骤（删除篇）
ORACLE 11gR2 RAC添加删除(正常及强制)节点操作步骤(删除篇) 本文主要转载 [ http://www.cnxdug.org/?p=2511 ] 有部分细节自己实验添加,再此谢谢前辈. ...
- Mongodb 3.6 副本集测试及添加删除节点等操作
下载tar包并安装curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-3.6.8.tgz [root@mysqlt ...
- mongodb replica set 添加/删除节点方法--http://www.ii123.com/jc/bc/bczh/258948.html
replica set多服务器主从,添加,删除节点,肯定会经常遇到的.下面详细说明一下,添加,删除节点的2种方法. 一,利用rs.reconfig,来添加,删除节点 1,添加节点 代码如下 re ...
- zookeeper动态添加/删除集群中实例(zookeeper 3.6)
一,用来作为demo操作的zookeeper集群中的实例: 机器名:zk1 server.1=172.18.1.1:2888:3888 机器名:zk2 server.2=172.18.1.2:2888 ...
随机推荐
- RBAC权限管理
RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联. 简单地说,一个用户拥有若干角色,每一个角色拥有若干权限. 这样,就构造成“用户-角 ...
- 每天一个 Linux 命令（21）：find命令之xargs
在使用 find命令的-exec选项处理匹配到的文件时, find命令将所有匹配到的文件一起传递给exec执行.但有些系统对能够传递给exec的命令长度有限制,这样在find命令运行几分钟之后,就会出 ...
- Apache服务器网站访问伪静态内页出现No input file specified.的完美解决方案
原文地址:Apache服务器网站访问伪静态内页出现No input file specified.的完美解决方案 启用REWRITE的伪静态功能的时候,首页可以访问,而访问内页的时候,就提示:&quo ...
- 【原】webp图片牛刀小试
其实今年很早就有接触到webp图片的概念,只是一直没怎么弄.今天在一个小项目中小用了一番.总结总结 采用 what,why,how的方式来总结 what? 什么是webp图片? 维基百科: ...
- ORACLE中的LTRIM、RTRIM和TRIM
LTRIM.RTRIM和TRIM在ORACLE中的用法:1.LTRIM(C1,C2)其中C1和C2都可以字符串,例如C1是'Miss Liu',C2'MisL'等等.这是第一个和SQL SERVER不 ...
- 三、基于hadoop的nginx访问日志分析--计算时刻pv
代码: # cat pv_hour.py #!/usr/bin/env python # coding=utf-8 from mrjob.job import MRJob from nginx_acc ...
- selenium 打开浏览器
import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebE ...
- 解决jeecg包升级之后无法启动的问题
1.出现下述问题的解决办法. 解决包冲突问题,右键项目,选择properties 把lib目录下的jar吧添加上.remove调版本较低的包即可. 2. 解决方法,把jdk升级到1.7版本
- AJAX请求时status返回状态明细表 readyState的五种状态
在<Pragmatic Ajax A Web 2.0 Primer >中偶然看到对readyStae状态的介绍,感觉这个介绍很实在,摘译如下: 0: (Uninitialized) the ...
- C#对于文件的读写
C#文件的读写操作 转载请注明出处 http://www.cnblogs.com/Huerye/ /// <summary> /// 写入txt文件 /// </summary> ...