Dom 学习总结以及实例的使用介绍

      2020-06-30 14:29      编程语言
本篇文章小编为大家介绍,Dom 学习总结以及实例的使用。需要的朋友参考下

1、 重新导航到指定的地址:navigate("//");

2、

(1、*setInterval每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识。如:

setInterval("alert('hello')",5000);

*clearInterval取消setInterval的定时执行,相当于Timer中的Enabled=False。因为setInterval可以设定多个定时,所以clearInterval要指定清除那个定时器的标识,即setInterval的返回值。

var intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld);

(2、setTimeout也是定时执行,但是不像setInterval那样是定时执行,而是设定时间后只执行一次,clearTimeout也是清除定时。
很好区分:Interval是定时;Timeout是超时之意。

var timeoutld=setTimeout("alert('hello')",2000);
(3、案例:实现标题栏走马灯的效果,也就是浏览器的标题文字每隔500ms向右滚动一下
复制代码 代码如下:
跑马灯效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>欢迎来到daomul的博客,欢迎再来,谢谢</title>
<script type="text/javascript">
function scroll() {
var title = document.title;
var first = title.charAt(0);
var last = title.substring(1, title.length);
document.title = last+first;
}
setInterval("scroll()",500);
</script>
</head>
<body>

</body>
</html>

3、

(1、onload:网页加载完毕时触发,浏览器是一边下载文档、一边解析执行,可能会出现JavaScript执行时需要操作某个元素,这个元素还没有加载,如果这样就要把操作的代码放到body的onload事件中,或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发,而body 里的onload才是全部加载完成。
(2、onunload:网页关闭(或者离开)后触发。onbeforeunload:窗口离开(比如前进、后退、关闭之前)就会弹出确认消息。如: <body onbeforeunload="Window.event.returnValue='真的要放弃发贴退出吗?'">

4、

除了有特有的属性之外,当然还有通用的HTML元素的事件:onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeyup(按键释放)、onkeypress(点击按键)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、
onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)等。

5、window对象的属性

(1、window.location.href="http://www.sina.com.cn",重新导向新的地址,和navigate方法效果一样。window.location.reload()刷新页面。
(2、window.event是非常重要的属性,用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过event属性取到相关信息。
a、altKey属性,boot类型,表示发生事件时alt键是否被按下,类似的还有ctrlKey、shiftKey属性
复制代码 代码如下:
windows事件样例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type="button" value="href" onclick="alert(location.href)" />
<input type="button" value="重定向" onclick="location.href='页面1.htm'" />
<input type="button" value="点击" onclick="if(window.event.ctrlKey){alert('按下了Ctrl')}else{alert('普通点击')}" /><a
href="http://www.baidu.com" onclick="alert('禁止访问!');window.event.returnValue=false;"></a>
<form action="daomul.aspx">
<input type="submit" value="提交" onclick="alert('数据有问题!');window.event.returnValue=false;" />
</form>
</body>
</html>

b、 clientX、clientY 发生事件时鼠标在客户区(浏览器界页面内)的坐标;screenX、screenY发生事件时鼠标在屏幕上的坐标;offsetX、offsetY发生事件时鼠标相对于事件源(按钮button内)的坐标。
c、returnValue属性,如果将returnValue设置为false,就会取消默认事件的处理。
d、srcElement:获得事件源对象
e、KeyCode:发生时间时的按键值
f、button:发生时间时鼠标的按键,1为左键,2为右键,3为左右键同时按。

<body onmousedown="if(event.button==2){alert('禁止复制')}">

6、clipboardData对象,对粘贴板的操作。clearData("Text")清空粘贴板;getData("Text")读取粘贴板的值,返回值为粘贴板中的内容;setData("Text",val),设置粘贴板中的值。

(1、当复制的时候body的oncopy方法被触发,直接return false就是禁止复制。<body oncopy="alert('禁止复制!');return false;">
(2、很多元素也有oncopy、onpaste事件。

例子1:禁止复制
<body oncopy="alert('禁止复制!');return false;">
例子2:给粘贴板赋值:复制地址给好友

<input type="button" value="分享本页给好友" onclick="clipboardData.setData('Text','我发现一个很实用的网站,计算机方面的!'+
location.href);alert(' 已经将地址放到粘贴板中,赶快通过QQ传递给你的好友吧!');" />

例子3:禁止粘贴到文本框

请输入您的手机号码:<input type="text" />
请您再次输入手机号码:<input type="text" onpaste="alert('为保证您充值到正确的手机号,请勿粘贴手机号,请直接填!');return false;"/>:

例子4:复制时附带内容

在网站中复制文章的时候,为了防止那些拷贝党不添加文章来源,自动在复制的内容后添加版权声明。

function modifyClipboard(){

clipboardData.setData('Text',clipboardData.getData('Text')+'本文来自博客园技术专区,转载请注明来源。'+location.href);
}
oncopy="setTimeout('modifyClipboard()',100)"。

用户复制动作发生0.1秒以后再去修改粘贴板中的内容。100ms只是一个经常取值,写1000、10、50、20……都行。不能直接在oncopy中执行对粘贴板的操作,因此设定定时器,0.1秒以后执行,这样就不再oncopy的执行调用栈上了。

7、页面前进、后退:history操作历史记录

window.history.back()后退;
window.history.forward()前进。也可以用window.history.go(-1)表前进;window.history.go(1)表后退。

实例1:

<body>这里是第2页<a href="javascript:window.history.back()">后退</a><input type="button" value="后退" onclick="window.history.go(-1)" />
</body>

8、document属性(最复杂的属性)document是window对象的一个属性,因为使用window对象成员的时候可以省略window,所以一般直接写document。

(1、write:向文档中写入内容。writeln和write差不多,只不过最后添加一个回车
(2、<input type="button" value="点击" onclick="document.write('<font color=blue>您好</font>')" />
(3、在onclick等事件中写的代码会冲掉页面中的内容,只有在页面加载过程中write才会与原有内容融合在一起
(4、<script type="text/javascript">
document.write("<font color=red>您好</font>");
</script>

案例1:
复制代码 代码如下:
getElementById
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>getElementById</title>
<script type="text/javascript">
//不建议直接通过id操作元素,而是通过getElementById根据元素的Id获得对象
function btnClick() {
//alert(textbox1.value);
var txt = document.getElementById("textbox1");
alert(txt.value);
}
function btnClick2() {
//alert(form1.textbox2.value);//要显示表单里的信息需添加表单名称
var txt = document.getElementById("textbox2");
alert(txt.value);
}
</script>
</head>
<body>
<input type="text" id="textbox1" />
<input type="button" value="点击我" onclick="btnClick()" />
<form action="页面1.htm" id="form1">
<input type="text" id="textbox2" />
<input type="button" value="显示刚输入的内容" onclick="btnClick2()" />
</form>
</body>
</html>

案例2:
复制代码 代码如下:
getElementByName
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>getElementByName的例子</title>
<script type="text/javascript">
function btnClick() {
var radios = document.getElementsByName("gender");
/*//在JS中for(var r in radios)不像C#中的foreach,并不会遍历每个元素,而是遍历的key
for (var r in radios) {
alert(r.value);
}*/
for (var i = 0; i < radios.length; i++) {
var radio = radios[i];
alert(radio.value);
}
}
function btnClick2() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs(i);
input.value = "welcome to my room";
}
}
</script>
</head>
<body>
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
<input type="radio" name="gender" value="保密" />保密
<input type="button" value="click" onclick="btnClick()" />
<br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="button" value="bytagname" onclick="btnClick2()" />
</body>
</html>

案例3:
复制代码 代码如下:
getElementByTagName
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>getElementByTagName</title>
<script type="text/javascript">
function initEvent() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onclick = btnClick;
}
}
function btnClick() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
//window.event.srcElement//取得引发事件的控件
if (input == window.event.srcElement) {
input.value = "哈哈"; //以下五个按钮,点到的那个就变为“哈哈”,其余都为“呜呜”,点“呜呜”就变为“哈哈”
}
else {
input.value = "呜呜";
}
}
}
</script>
</head>
<body onload="initEvent()">
<input type="button" value="欢迎进入" />
<input type="button" value="欢迎进入" />
<input type="button" value="欢迎进入" />
<input type="button" value="欢迎进入" />
<input type="button" value="欢迎进入" />
</body>
</html>

案例4:
复制代码 代码如下:
阅读协议等待计时器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>欢迎来到daomul的博客,欢迎再来,谢谢</title>
<script type="text/javascript">

var leftTime = 10;
var TimeID;
function scroll() {//alert(222);
var btn = document.getElementById("btnAgree");
//如果网页速度非常慢的话,可能定时器运行的时候控件还没有加载!
if (btn) {//alert(11);
if (leftTime <= 0) {
btn.value = "同意";
btn.disabled = "";
clearInterval(TimeID);
}
else {
btn.value = "请阅读协议,同意(还剩下"+leftTime+"秒)";
leftTime--;
}
}
}
TimeID=setInterval("scroll()", 1000);
</script>
</head>
<body>
<textarea id="TextArea1" cols="20" rows="2"></textarea>
<input id="btnAgree" type="button" value="同意" disabled="disabled"/>
</body>
</html>

案例5:
复制代码 代码如下:
美女时钟
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>欢迎来到daomul的博客,欢迎再来,谢谢</title>
<script type="text/javascript">
//var now = new Date();不能放在这,否则取得时间不变
function Fill2Len(i) {
if (i < 10) {
return "0" + i;
}
else {
return i;
}
}
function Refresh() {
var imgMM = document.getElementById("imgMM");
if (!imgMM) {
return; //没加载就直接return
}
var now = new Date(); //每次刷新时取得时间
var filename = Fill2Len(now.getHours()) + "_" + Fill2Len(now.getSeconds()) + ".jpg";
imgMM.src = "MMClock/" + filename;
}
setInterval("Refresh()", 1000);
</script>
</head>
<body onload="Refresh()">
<img id="imgMM" src="" />
</body>
</html>

案例6:搜索框关键字搜索
复制代码 代码如下:
搜索框关键字搜索
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>欢迎来到daomul的博客,欢迎再来,谢谢(文本框关键字3)</title>
<script type="text/javascript">
function inputBlur(keyword) {
if (keyword.value.length <= 0) {
keyword.value = "请输入搜索关键词";
keyword.style.color = 'Gray';
}
}
function inputFocus(keyword) {
//var keyword = document.getElementById("keyword");把this传给两个方法,省去了getElementById依赖id
if (keyword.value == "请输入搜索关键词") {
keyword.value = "";
keyword.style.color = 'Black';
}
}
</script>
</head>
<body onload="InitLoad()">
<input onblur="inputBlur(this)" onfocus="inputFocus(this)" value="请输入搜索关键词" style="color: Gray" />
<input type="button" value="搜索" />
</body>
</html>

16、Form表单: Form 对象是表单的 Dom 对象。

方法: submit() 提交表单,但是不会触发 onsubmit 事件。 实现 autopost ,也就是焦点离开控件以后页面立即提交,而不是 只有提交 submit 按钮以后才提交,当光标离开的时候触发 onblur 事件,在 onblur 中调用 form 的 submit 方法。在点击 submit 后 form 的 onsubmit 事件被触发 ,在 onsubmit 中可以 进行数据校验,数据有问题, 返回 false 即可取消提交。

案例1:
复制代码 代码如下:
Form表单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>欢迎来到daomul的博客,欢迎再来,谢谢(Form表单提交4)</title>
<script type="text/javascript">

</script>
</head>
<body onload="InitLoad()">
<form action="default.aspx" id="form1" onsubmit="return false;">
<!--通过click函数"欺骗"其他按钮触发-->
<input type="button" id="btn1" onclick="alert('触发了其他button了')" value="按钮" />
<input type="button" onclick="document.getElementById('btn1').click()" value="同样提交" />
<!--因为return false,所以不可提交表单,但是调用submit(),却可以触发方法-->
<input type="submit" onclick="document.getElementById('form1').submit()" value="可提交的submit" />
<input type="submit" value="不可提交的submit" />
<!--类似于asp.net中的autopostback(相同的还有文本框输入后移开的onblur方法的submit调用)-->
<select id="Select1" onchange="document.getElementById('form1').submit()">
<option>111</option>
<option>222</option>
<option>333</option>
<option>444</option>
</select>
</form>
</body>
</html>

17、正则表达式

*JavaScript 中创建正则表达式类的方法:
var regex = new RegExp("\\d{5}") 或者 var regex = /\d{5}/
/ 表达式 / 是 JavaScript 中专门为简化正则表达式编写而提供的语法,
写在 // 中的正则表达式就不用管转义符了。
*RegExp 对象的方法:
** test(str) 判断字符串 str 是否匹配正则表达式,相当于 IsMatch
var regex = /.+@.+/;
alert(regex.test("a@b.com"));
alert(regex.test("ab.com"));
** exec(str) 进行搜索匹配,返回值为匹配结果 ( * )
** compile 编译表达式,提高运行速度。 ( * )
*String 对象中提供了一些与正则表达式相关的方法,相当于对于
RegExp 类的包装,简化调用:
match(regexp) ,相当于调用 exec

var s = "aaa@163.com";
var regex = /(.+)@(.+)/;
var match = s.match(regex);
alert(RegExp.$1 + " ,服务器: " + RegExp.$2);

案例1:
复制代码 代码如下:
正则表达式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>欢迎来到daomul的博客,欢迎再来,谢谢</title>
<script type="text/javascript">
var s = "4444@163.com";
var regex = /(.+)@(.+)/;
s.match(regex);
alert(RegExp.$1); //取得第一组即@前面的部分
alert(RegExp.$2); //取得@后面的部分
</script>
</head>
<body>
</body>
</html>

18、不同浏览器的差异

<!--
(1、appendChild,insertCell,px
(2、获取网页中哪个元素触发事件
IE中使用srcElement
FireFox使用target

(3、使用Dom获取标签文本
IE中使用innerText
FireFox使用textContent
(4、动态网页绑定
Id:attachEvent
FireFox:addEventListener
(5、不同浏览器css样式支持不同:
哀悼网页使用的css只有IE才支持,FF不支持
(6、JQuery进行封装:可在不同浏览器中进行封装
解决不同浏览器中Dom的不同-->

19、键盘码操作以及金融框案例:

案例1:

财务相关系统中涉及到金额的文本框有如下要求:

*进入金额文本文本框不使用中文输入法 不能输入非数字 焦点在文本框中时文本框左对齐;焦点离开文本框时文本框右对齐,显示千 分位 禁用输入法: style="ime-mode:disabled"

*禁止键入非法值,只有这些才能被键入 (k == 9) || (k == 13) ||
(k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)|| (k>=48 &&
k<=57)||(k>=96 && k<=105)||(k>=37 && k<=40) 。 onkeydown="return
numonKeyDown()" 不要写成 onkeydown="numonKeyDown()" 区分事件响应函数 和事件响应函数调用的函数。

* 禁止粘贴 ( 伟大的 Tester) , <input onpaste="return false;" ,太暴力,应该只是禁止粘贴非法值。在 onpaste 中通过 clipboardData.getData('Text')
取到粘贴板中的值,然后遍历每个字符,看是否是合法的值,如果全部是合法值才允许粘贴,只要有一个非法值就禁止粘贴。 charAt 、 charCodeAt添加千分位 的方法

* 焦点在的时候左对齐没有千分位,焦点不在时右对齐千分位:this.style.textAlign='right'
复制代码 代码如下:
金融文本框设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>欢迎来到daomul的博客,欢迎再来,谢谢</title>
<script type="text/javascript">

//非数字
function numonKeyDown() {
var k = window.event.keyCode;
return isValidNum(k);
}
//判断k是否为合法的Ascii
function isValidNum(k) {
return ((k == 9) || (k == 13) || (k == 46) || (k == 8) || (k == 189) || (k == 109) || (k == 190) || (k == 110) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40));
}
//添加千分位
function commafy(n) {
//var re = /\d{1,3}(?=(\d{3})+$)/g;
//var n1 = n.replace(/^(\d+)/((\.\d+)?)$/,function(s,s1,s2){return s1.replace(re,"$,")+s2;});
re = /(\d{1,3})(?=(\d{3})+(?:$|\D))/g;
n1 = n.replace(re, "$1,")
return n1;
}
//处理粘贴板数据
function numPaste() {
var text = window.clipboardData.getData("Text");
for (var i = 0; i < text.length; i++) {
var asc = text.charCodeAt(i); //charAt→"3",charCodeAt()取到的是ASCII码
if (!isValidNum(asc)) { //遇到一个非法值就认为要粘贴的内容是非法的return false
return false;
}
}
}
</script>
</head>
<body onkeydown="if(window.event.keyCode==13){window.event.keyCode=9;}">
不能输入非数字:
<input type="text" style="text-align: right" onkeydown="var k=window.event.keyCode; if((k == 9) || (k == 13) || (k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)|| (k>=48 && k<=57)||(k>=96 && k<=105)||(k>=37 && k<=40)){}else{return false;}" />
<br />
禁用输入法:
<input type="text" style="text-align: right; ime-mode: disabled;" />
<br />
不能输入和粘贴非数字:
<input type="text" style="text-align: right;" onpaste="return numPaste()" onkeydown="return numonKeyDown()" />
<br />
添加去掉千分位:
<input id="t" type="text" value="95654784.75"
onblur="this.value=commafy(this.value);this.style.textAlign='right';"
onfocus="this.style.textAlign='left';this.value=this.value.replace(/,/g,'')" />
<br />
</body>
</html>

复制代码 代码如下:
省市选择
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
案例:实现省市选择界面。请选择省的处理,从后向前删。
-->
<head>
<title>欢迎来到daomul的博客,欢迎再来,谢谢(省市选择)</title>
<script type="text/javascript">
var data = { "山东": ["济南", "青岛", "潍坊"], "河南": ["郑州", "洛阳", "三门峡"], "辽宁": ["沈阳", "鞍山", "大连"] };
function loadProv() {
var prov = document.getElementById("prov");
for (var key in data) {
var option = document.createElement("option");
option.value = key;
option.innerText = key;
prov.appendChild(option);
}
}
function provChange() {
var prov = document.getElementById("prov");
var city = document.getElementById("city");
/* 先清除旧的市列表
可以采取这种方式city.option.length=0;
遍历select的所有子节点,如果从前往后删,每次都会有漏网之鱼,因为有重新排号的问题
从后向前删就没顺序问题了 */
for (var i = city.childNodes.length - 1; i >= 0; i--) {
var option = city.childNodes[i];
city.removeChild(option);
}

var provName = prov.value;
var cities = data[provName]; //取出的内容["济南", "青岛", "潍坊"]
for (var i = 0; i < cities.length; i++) {
var option = document.createElement("option");
option.value = cities[i];
option.innerText = cities[i];
city.appendChild(option);
}
}
</script>
</head>
<body onload="loadProv()">
<select id="prov" onchange="provChange()">
<option value="请选择省">--请选择省--</option>
</select>
<select id="city">
</select>
</body>
</html>

案例3:复选框实现全选、全不选、反选
复制代码 代码如下:
复选框选择
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>欢迎来到daomul的博客,欢迎再来,谢谢(歌曲选择)</title>
<script type="text/javascript">
function selAll() {
var div1 = document.getElementById("playlist");
var input1 = div1.getElementsByTagName("input");
for (var i = 0; i < input1.length; i++) {
if (input1[i].type == "checkbox") {
input1[i].checked = "checked";
}
}
}
function deSelAll() {
var div1 = document.getElementById("playlist");
var input1 = div1.getElementsByTagName("input");
for (var i = 0; i < input1.length; i++) {
if (input1[i].type == "checkbox") {
input1[i].checked = "";
}
}
}
function reverseSel() {
var div1 = document.getElementById("playlist");
var input1 = div1.getElementsByTagName("input");
for (var i = 0; i < input1.length; i++) {
if (input1[i].type == "checkbox") {
if (input1[i].checked == true) {
input1[i].checked = false;
}
else{
input1[i].checked = true;
}
}
}
}
</script>
</head>
<body>
<div id="playlist">
<input type="checkbox" id="p1" /><label for="p1">leaving into the dog</label><br />
<input type="checkbox" id="p2" /><label for="p1">take a shower</label><br />
<input type="checkbox" id="p3" /><label for="p1">fire heart</label><br />
<input type="checkbox" id="p4" /><label for="p1">china</label><br />
<p>
<input type="button" onclick="selAll()" value="全选" />
<input type="button" onclick="deSelAll()" value="全不选" />
<input type="button" onclick="reverseSel()" value="反选" />
</p>
</div>
</body>
</html>

案例4:权限选择
复制代码 代码如下:
权限选择
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>欢迎来到daomul的博客,欢迎再来,谢谢(权限选择)</title>
<script type="text/javascript">
function moveSelected(selectedSrc, selectedLast) {
for (var i = selectedSrc.childNodes.length - 1; i >= 0; i--) {
var newOption = selectedSrc.childNodes[i];
if (newOption.selected == true) {
selectedSrc.removeChild(newOption);
newOption.selected = false;
selectedLast.appendChild(newOption);
}
}
}
function moveAll(selectedSrc, selectedLast) {
for (var i = selectedSrc.childNodes.length - 1; i >= 0; i--) {
var newOption = selectedSrc.childNodes[i];
selectedSrc.removeChild(newOption);
selectedLast.appendChild(newOption);
}
}
</script>
</head>
<body>
<select style="float:left;width:15%;height:100px;" id="select1" multiple="multiple">
<option>添加</option>
<option>删除</option>
<option>修改</option>
<option>查询</option>
<option>打印</option>
</select>
<div style="float:left">
<input style="float:left;width:100%;" type="button" value=">" onclick="moveSelected(document.getElementById('select1'),document.getElementById('select2'))" />
<input style="float:left;width:100%;" type="button" value="<" onclick="moveSelected(document.getElementById('select2'),document.getElementById('select1'))" />
<input style="float:left;width:100%;" type="button" value=">>" onclick="moveAll(document.getElementById('select1'),document.getElementById('select2'))" />
<input style="float:left;width:100%;" type="button" value="<<" onclick="moveAll(document.getElementById('select2'),document.getElementById('select1'))" />
</div>
<select style="float:left;width:15%;height:100px;" id="select2" multiple="multiple"></select>
</body>
</html>