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 ...
随机推荐
- 2016福州大学软件工程Beta阶段团队作业成绩汇总
1.评分规则 本次Beta阶段团队作业评分方法如下: 团队得分=[[7次scrum过程评分+(小组互评得分+教师评分)/2]/2],其中过程.小组.教师各30分 说明:由于没有规定提交团队贡献比,因此 ...
- C#基础练习
1.冒泡排序 namespace _0 { class Program { public static int[] BubbleSort(int[] arr) { ; i < arr.Lengt ...
- PHP 进程间通信——消息队列(msg_queue)
PHP 进程间通信--消息队列 本文不涉及PHP基础库安装.详细安装说明,请参考官网,或期待后续博客分享. 1.消息队列函数准备 <?php//生成一个消息队列的key$msg_key = ft ...
- Network Basic Commands Summary
Network Basic Commands Summary set or modify hostname a) temporary ways hostname NEW_HOSTNAME, b ...
- Matlab插值函数
x=0:2*pi; y=sin(x); xx=0:0.5:2*pi; %interp1对sin函数进行分段线性插值,调用interp1的时候,默认的是分段线性插值 y1=interp1(x,y,xx) ...
- Hybrid APP混合开发的一些经验和总结
http://www.cnblogs.com/kingplus/p/5588339.html 写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目.当时是第一次接触混合开发,有一些经 ...
- canvas刮刮乐效果（pc端&H5、zepto-touchmove）
一.html <div id="canvasArea" style="width:300px;height:200px;position:relative;&quo ...
- 碳膜电阻+1N5408二极管?
整定电流: 整定: 调整, 确定, 是指某一物理量,到达某个一个设定值时, 设备开始动作. 主要是指电路中的一些起 保护作用的 继电器, 如: 电机, 控制电路中的 过电流继电器, 的整定值. 如空气 ...
- CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- Ubuntu 手动更新firefox的flash插件
Ubuntu下 Firefox更新flash插件老是提示失败,自己动手丰衣足食啊. 1.下载tar文件,地址:http://get.adobe.com/cn/flashplayer/?no_redir ...