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

2024-10-09 03:19:23

1、重新导航到指定的地址：navigate("http://www.jb51.net");

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为左右键同时按。

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：给粘贴板赋值：复制地址给好友

例子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：

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">

案例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;">
       
         <input type="button" id="btn1" onclick="alert('触发了其他button了')" value="按钮" />
         <input type="button" onclick="document.getElementById('btn1').click()" value="同样提交" />
         
         <input type="submit" onclick="document.getElementById('form1').submit()" value="可提交的submit" />
         <input type="submit" value="不可提交的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>

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

1. 重新导航到指定的地址:navigate("http://www.jb51.net"); 2. (1.*setInterval每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识.如: setInterval("alert('hello')",5000); *clearInterval取消setInterval的定时执行,相当于Timer中的Enabled=False.因为setInterval可以设定
JavaScript DOM 学习第九章选取范围的介绍

虽然我们会讲解用程序创建范围对象,但是我们把精力主要集中在如何将用户的选取范围转换成为W3C 范围或者微软的文档范围对象. 什么是范围范围是指HTML文档中的任意一部分内容.一个范围的开始和结束点都可以是随意的,甚至是相同的(一个空范围).最常见的范围就是用户选取的文本.当用户在页面上选取了一部分,你就可以他的选取部分转换为范围对象.然而,你也可以让程序自动选择范围. 让我们以下面的代码为例.假设用户选择了下面的文字: <h4 id="entry1196"><a h
详解React获取DOM和获取组件实例的方式

目录 React获取DOM的方式 ref获取DOM元素 ref获取组件实例 React获取DOM的方式 ref获取DOM元素在React的开发模式中,通常情况下不需要.也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作: 管理焦点,文本选择或媒体播放; 触发强制动画; 集成第三方 DOM 库; 我们可以通过refs获取DOM; 如何创建refs来获取对应的DOM呢?目前有三种方式: 方式一:传入字符串(这种做法已经不推荐) 在React元素上绑定一个ref字符串,
JavaScript DOM 学习总结(五)

1.DOM简介. 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构,即节点树.通过DOM,JS可创建动态的HTML,可以使网页显示动态效果并实现与用户的交互功能.JS能够改变页面中所有的HTML元素.属性和CSS样式,并对页面中所有事件做出响应.所以学习JS的起点就是处理网页,处理网页就需要使用DOM进行操作. 2.DOM获取元素. JS要想操作H
Flask框架学习笔记之表单基础介绍与表单提交方式

本文实例讲述了Flask框架学习笔记之表单基础介绍与表单提交方式.分享给大家供大家参考,具体如下: 表单介绍表单是HTML页面中负责数据采集功能的部件.由表单标签,表单域和表单按钮组成.通过表单,将用户输入的数据提交给服务器,并交给服务端进行处理. 表单标签用于声明表单的范围,位于表单标签的元素将被提交. 语法:<form></form> 属性:Method规定用于发送表单数据的 HTTP 方法. Enctype规定在向服务器发送表单数据之前如何对其进行编码.(适用于 meth
JQuery 选择器、DOM节点操作练习实例

一.练习一 1.需求效果分析: 2.代码示例: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script s
封装获取dom元素的简单实例

示例如下: <script> //函数: 反复执行的代码块 //全局只有一个对象,防止全局变量污染 var itcast = { getElen : { tag : function(tag){ return document.getElementsByTagName(tag); }, id : function(id){ return document.getElementById(id); } }, css : { addStyle : function(){}, removeStyle
C语言 makefile学习及实现实例

C语言 makefile学习及实现实例俗话说,不会写makefile的程序员不是好的程序员. 看了很多人写的makefile教程,感觉太难懂,还不如韦东山老师视频里讲的好理解. 先记下这几个符号,以后看到就不会忘记这是什么东西了. 先来看一个例子: <span style="font-size:18px;">Person: main.o person.o g++ -o $@ $^ %.o : %.cpp g++ -c -o $@ $< clean: rm -rf *
Apache Commons Math3学习之数值积分实例代码

Apache.Commons.Math3里面的数值积分支持类采用的是"逼近法",即,先对大区间做一次积分,再对小区间做一次积分,若两次积分结果的差值小于某一设定的误差值,则认为积分完成.否则,将区间再次细分,对细分后的区间进行积分,与前一次积分相比较,如此反复迭代,直至最近的两次积分差值足够小.这样的结果,有可能会导致无法收敛. 为了使用org.apache.commons.math3.analysis.integration包中的积分器类,需要先实现UnivariateFunctio
spring学习之@SessionAttributes实例解析

本文研究的主要是spring学习之@SessionAttributes的相关内容,具体如下. 一.@ModelAttribute 在默认情况下,ModelMap 中的属性作用域是 request 级别是,也就是说,当本次请求结束后,ModelMap中的属性将销毁.如果希望在多个请求中共享 ModelMap 中的属性,必须将其属性转存到 session 中,这样ModelMap 的属性才可以被跨请求访问. spring 允许我们有选择地指定 ModelMap 中的哪些属性需要转存到 session

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

相关推荐

随机推荐