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 ...
随机推荐
- 利用django创建一个投票网站（六）
建你的第一个 Django 项目, 第六部分 这一篇从第五部分(zh)结尾的地方继续讲起.再上一节中我们为网络投票程序编写了测试,而现在我们要为它加上样式和图片. 除了服务端生成的 HTML 以外,网 ...
- foreach
一 foreach的语法介绍 PHP 4以上的版本包括了 foreach 结构,这只是一种遍历数组简便方法.foreach 仅能用于数组,当试图将其用于其它数据类型或者一个未初始化的变量时会产生 ...
- pdf在线处理网站
https://smallpdf.com/unlock-pdf
- thinkphp3.2.3版本文件目录及作用
下载thinkphp3.2.3版本,解压缩后将文件夹名字改为thinkphp,然后放在www目录下,里面的文件夹和文件的名字和作用如下:(前面有Tab健的表示下一级,thinkphp是根目录) //t ...
- CMake
使用CMake编译跨平台静态库 http://www.tuicool.com/articles/3uu2Yj cmake命令 安装.用法简介 https://fukun.org/archives/04 ...
- HTML中的SVG
HTML5中的SVG是Scalable Vector Graphic的简称,是一种用来绘制矢量图的HTML5标签,由万维网联盟定制,是一个基于可扩展标记语言,用于绘制二维可缩放矢量图形. 是一种使用X ...
- Java集合之HashSet
1.HashSet概述: HashSet实现Set接口,由哈希表(实际上是一个HashMap实例)支持.它不保证set 的迭代顺序:特别是它不保证该顺序恒久不变.此类允许使用null元素.HashSe ...
- Codeforces Round 319 # div.1 & 2 解题报告
Div. 2 Multiplication Table (577A) 题意: 给定n行n列的方阵,第i行第j列的数就是i*j,问有多少个格子上的数恰为x. 1<=n<=10^5, 1< ...
- WdatePicker 使用
限制范围为今年之后的3年 $("input[name='year']").attr("onClick","WdatePicker({dateFmt:' ...
- Java多线程--线程安全问题的相关研究
在刚刚学线程的时候我们经常会碰到这么一个问题:模拟火车站售票窗口售票.代码如下: package cn.blogs.com.isole; /* 模拟火车站售票窗口售票,假设有50张余票 */ publ ...