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 ...
随机推荐
- C#读取Excel,或者多个excel表，返回dataset
把excel 表作为一个数据源进行读取 /// <summary> /// 读取Excel单个Sheet /// </summary> /// <param name=& ...
- Think twice before doing~
1.遇到任何矛盾,对事不对人. 2.接到朋友等人的求助电话后,一定要先问清楚对方有什么事情,然后再告诉他(她)能不能帮她(他). 3.如果没有十足的把握和必要,就不要轻易说假话. 4.少提自己的私事, ...
- redis 操作 list 的测试
lpush 从头部压入数据 127.0.0.1:6379> lpush listname value1 (integer) 1//返回list的当前长度 127.0.0.1:6379> l ...
- 为什么不用rxjava?
rxjava等系列产品.思想是很好的,但是被大多数人用成了一坨屎! 就拿rx最经典的那个例子来说: 假设有这样一个需求:界面上有一个自定义的视图 imageCollectorView ,它的作用是显示 ...
- （转载）详解网络传输中的三张表，MAC地址表、ARP缓存表以及路由表
郑重声明:原文转载于http://dengqi.blog.51cto.com/5685776/1223132 向好文章致敬!!! 一:MAC地址表详解 说到MAC地址表,就不得不说一下交换机的工作原理 ...
- php 时间戳与日期的转换（转载）
UNIX时间戳和格式化日期是我们常打交道的两个时间表示形式. a:Unix时间戳存储.处理方便,但是不直观 b:格式化日期直观,但是处理起来不如Unix时间戳那么自如 [关于两者的互相转换] 日 期 ...
- MyBatis日志配置
关于MyBatis的日志,其实MyBatis已经弄得很好了,你甚至都不用配置,只要导入了jar包,MyBatis就会自动寻找. 具体步骤 1.导入jar包,就是把下载MyBatis时,lib里的包复制 ...
- Node.js API 初解读（一）
Node.JS API 初解读 Version: NodeJs v6.2.0 一. Assert 1.简介 Assert模块主要用于断言.如果表达式不符合预期,就抛出一个错误. 该模块用于编写程序的单 ...
- js删除数组指定元素
删除js数组中制定的元素,这里用到了jquery. var a = new Array("a","b","cc","d3" ...
- JAVA之线程同步的三种方法
最近接触到一个图片加载的项目,其中有声明到的线程池等资源需要在系统中线程共享,所以就去研究了一下线程同步的知识,总结了三种常用的线程同步的方法,特来与大家分享一下.这三种方法分别是:synchroni ...