跟着杨中科学习asp.net之dom

首页 > 代码库 > 跟着杨中科学习asp.net之dom

跟着杨中科学习asp.net之dom

2024-07-08 07:31:55 225人阅读

Dom教程

使用javascript操作dom进行dhtml开发,目标:能够使用javascript操作dom实现常见的dhtml效果

Dom就是html页面的模型，将每个标签都做成为一个对象

，javascript通过调用dom中的属性、方法就可以对网页中的文本框、层等元素进行编程控制，比如通过操作文本框的dom对象，就可以读取文本框中的值、设置文本框中的值

Dom也像winform一样，通过事件、属性、方法进行编程

Javascript→dom就是c#→.net framework。

Css+javascritp+dom=dhtml

clip_image002

Dom事件

<head>

</head>

</body>

</html>

clip_image003

封装到函数里面:直接调用

<head>

function bodymousedown()

{ alert(‘点到我了!‘); alert(‘哈哈!‘) }

</script>

</head>

</br></br></br></br></br></br></br></br></br></br></br></br>

</br></br></br></br></br></br>

</body>

</html>

clip_image004

<head>

function bodymousedown()

{ alert(‘点到我了!‘); alert(‘哈哈!‘) }

function f1() {

alert("我是f1");

}

function f2() {

alert("我是f2");

}

</script>

</head>

</br></br></br></br></br></br></br></br></br></br></br></br>

</br></br></br></br></br></br>

</body>

双击效果:

clip_image005

Window对象

clip_image006

<head>

function confirmdemo() {

if (confirm("是否进入?")) {

alert("进入了！");

}

else {

alert("取消进入了！");

}

</script>

</head>

<body>

</body>

</html>

clip_image007

clip_image008

重新导航到另外的页面

setInterval每隔一段时间执行指定的代码，第一个参数为代码

的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时

器的标识

function startInterval() {

setInterval("alert(‘hello‘)", 5000)

}

</script>

</head>

<body>

clip_image009

clearInterval取消setInterval的定时执行，相当于Timer中的

Enabled=False。因为setInterval可以设定多个定时，所以

clearInterval要指定清除那个定时器的标识，即setInterval的返回

值。

var intervalId = setInterval("alert(‘hello‘)", 5000);

clearInterval(intervalId);

var intervalId;

function startInterval() {

intervalId=setInterval("alert(‘hello‘)", 5000)

}

</script>

</head>

<body>

</body>

clip_image011

setTimeout("alert(‘这是timeout‘)",2000)

走马灯

标题栏走马灯效果

<head>

<title>新学期欢迎新同学</title>

function scroll() {

var title = document.title;

}

</script>

</head>

<body>

</body>

</html>

clip_image012

<head>

<title>新学期欢迎新同学</title>

function scroll() {

var title = document.title;

var firstch = title.charAt(0);

var leftstr = title.substring(1,title.length);

document.title = leftstr + firstch;

}

scroll();

</script>

</head>

<body>

</body>

</html>

clip_image013

<head>

<title>新学期欢迎新同学</title>

function scroll() {

var title = document.title;

var firstch = title.charAt(0);

var leftstr = title.substring(1, title.length);

document.title = leftstr + firstch;

}

setInterval("scroll()", 500)

</script>

</head>

<body>

</body>

</html>

每隔500毫秒滚动,实现走马灯效果

练习：刚进入的时候还是向左滚动，点击【向左】按钮就向左连

续滚动，点击【向右】按钮就向右连续滚动。

? 思路1、全局变量，标志当前的滚动方向，当点击向左的时候

dir="left",向右dir="right"。

? 思路2、scrollleft scroolright,向右滚的时候将scrollleft的Interval

clear掉，然后setInterval启动scrollright

clip_image014

Dom事件

clip_image015

<head>

btn.value = http://www.mamicode.com/"ok";

</script>

</head>

<body>

</body>

</html>

clip_image016

<head>

// btn.value = http://www.mamicode.com/"ok";

</script>

</head>

</body>

</html>

clip_image017

在页面加载完成后onload才会调用

<head>

// btn.value = http://www.mamicode.com/"ok";

</script>

</head>

</body>

</html>

clip_image019

<head>

// btn.value = http://www.mamicode.com/"ok";

</script>

</head>

<body onl oad="btn.value = http://www.mamicode.com/‘ok‘;"

onbeforeunload="window.event.returnValue=http://www.mamicode.com/‘ 真的要放弃发帖退出吗？‘">

</body>

</html>

clip_image021

clip_image022

Dom属性

window对象的属性1

window.location.href=http://www.mamicode.com/‘http://www.itcast.cn‘，重新导向新的地址，和navigate方

法效果一样。window.location.reload() 刷新页面

window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于

window对象的事件，所有元素的事件都可以通过event属性取到相关信息。类似

于winForm中的e(EventArg).

? altKey属性，bool类型，表示发生事件时alt键是否被按下，类似的还有

ctrlKey、shiftKey属性，例子 <input type="button" value=http://www.mamicode.com/"点击"

onclick="if(event.altKey){alert(‘Alt点击‘)}else{alert(‘普通点击‘)}" /> ；

? clientX、clientY 发生事件时鼠标在客户区的坐标；screenX、screenY 发生

事件时鼠标在屏幕上的坐标；offsetX、offsetY 发生事件时鼠标相对于事件

源（比如点击按钮时触发onclick）的坐标。

? returnValue属性，如果将returnValue设置为false，就会取消默认事件的处

理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提

交表单到服务器，防止错误数据提交给服务器、防止页面刷新。

<a href=http://www.mamicode.com/"http://www.baidu.com" onclick="alert(‘禁止访问！‘)">百度

点击百度后，页面会弹出禁止访问

clip_image024

但是点击ok后页面还是会跳转到百度

现要实现页面不跳转

要阻止跳转：

<a href=http://www.mamicode.com/"http://www.baidu.com" target="_blank" onclick="alert(‘禁止访问！‘); window.event.returnValue=false;">百度

同样表单的提交操作类似：

</form>

? srcElement，获得事件源对象。几个事件共享一个事件响应函数用。

? keyCode，发生事件时的按键值。

? button，发生事件时鼠标按键，1为左键，2为右键，3为左右键同时按。

<head>

</head>

<body>

<input type="button" value=http://www.mamicode.com/"href" onclick="alert(location.href)"/>//显示当前页面的地址

</body>

</html>

clip_image025

clip_image026

定时器走马灯易错点：

<head>

<title>新学期欢迎新同学</title>

function scrollleft() {

var title = document.title;

var lastch = title.charAt(title.length-1);//易错返回最后一个字符charAt() 方法可返回指定位置的字符。

var leftstr = title.substring(0, title.length-1);//易错 substring截取字符串

document.title = lastch + leftstr;

}

// function scrollright() {

// var title = document.title;

// var firstch = title.charAt(title.length);

// var leftstr = title.substring(1, title.length);

// document.title = leftstr + firstch;

// }

// setInterval("scrollleft()", 500)

</script>

</head>

<body>

</body>

</html>

每点击一次会启动一个定时器，因此滚动的速度会加快

停止代码写法：

<head>

<title>新学期欢迎新同学</title>

function scrollleft() {

var title = document.title;

var lastch = title.charAt(title.length-1);//易错

var leftstr = title.substring(0, title.length-1);//易错

document.title = lastch + leftstr;

}

// function scrollright() {

// var title = document.title;

// var firstch = title.charAt(title.length);

// var leftstr = title.substring(1, title.length);

// document.title = leftstr + firstch;

// }

// setInterval("scrollleft()", 500)

</script>

</head>

<body>

</html>

Dom属性

clip_image027

<head>

</head>

<body>

<input type="button" value=http://www.mamicode.com/"分享本页给好友" onclick="clipboardData.setData(‘Text‘,‘我发现这个页面很黄很暴力！‘

+location.href);alert(‘已经将地址放到粘贴板中，赶快通知qq好友！‘);"/>

</body>

</html>

clip_image028

<input type="button" value=http://www.mamicode.com/"分享本页给好友" onclick="clipboardData.setData(‘Text‘,‘我发现这个页面很黄很暴力！‘

+location.href);alert(‘已经将地址放到粘贴板中，赶快通知qq好友！‘);"/>abcdefg

clip_image029

所有元素都有oncopy,onpaste事件

<head>

</head>

<input type="button" value=http://www.mamicode.com/"分享本页给好友" onclick="clipboardData.setData(‘Text‘,‘我发现这个页面很黄很暴力！‘

+location.href);alert(‘已经将地址放到粘贴板中，赶快通知qq好友！‘);"/>abcdefg

<br/>

</body>

</html>

clip_image031

在网站中复制文章的时候，为了防止那些拷贝党不添加文章来源，

function modifyClipboard() {

clipboardData.setData(‘Text‘, clipboardData.getData(‘Text‘)

+ ‘本文来自传智播客技术专区，转载请注明来源。‘ +

location.href);

}

oncopy="setTimeout(‘modifyClipboard()‘,100)"。用户复制动作发生

0.1秒以后再去改粘贴板中的内容。100ms只是一个经常取值，

写1000、10、50、200……都行。不能直接在oncopy里修改粘

贴板。

不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1

秒以后执行，这样就不再oncopy的执行调用栈上了。

function modifyClipboard() {

clipboardData.setData(‘Text‘, clipboardData.getData(‘Text‘)

+ ‘本文来自传智播客技术专区，转载请注明来源。‘ +

location.href);

}

</script>

</head>

<input type="button" value=http://www.mamicode.com/"分享本页给好友" onclick="clipboardData.setData(‘Text‘,‘我发现这个页面很黄很暴力！‘

+location.href);alert(‘已经将地址放到粘贴板中，赶快通知qq好友！‘);"/>abcdefg

<br/>

</body>

</html>

前进后退导航

window对象的属性4

history操作历史记录

? window.history.back()后退；window.history.forward()前进。也可以

用window.history.go(-1)、window.history.go(1)前进

document属性。是最复杂的属性之一。后面讲解详细使用。

第一个页面:

<head>

<!--<javasctipt type="text/javascript">

function modifyClipboard() {

clipboardData.setData(‘Text‘, clipboardData.getData(‘Text‘)

+ ‘本文来自传智播客技术专区，转载请注明来源。‘ +

location.href);

}

</javascript>-->

function modifyClipboard() {

clipboardData.setData(‘Text‘, clipboardData.getData(‘Text‘)

+ ‘本文来自传智播客技术专区，转载请注明来源。‘ +

location.href);

}

</script>

</head>

<input type="button" value=http://www.mamicode.com/"分享本页给好友" onclick="clipboardData.setData(‘Text‘,‘我发现这个页面很黄很暴力！‘

+location.href);alert(‘已经将地址放到粘贴板中，赶快通知qq好友！‘);"/>abcdefg

<br/>

</body>

</html>

第二个页面:

<head>

</head>

<body>

</body>

</html>

或可写成<a href="javascript:window.history.back()">后退</a>

这样,效果是一样的

clip_image032

document属性。是最复杂的属性之一。后面讲解详细使用。

document属性1

document是window对象的一个属性，因为使用window对象成员

的时候可以省略window.，所以一般直接写document

document的方法：

? （1）write：向文档中写入内容。writeln，和write差不多，只不过

最后添加一个回车

? <input type="button" value=http://www.mamicode.com/"点击" onclick="document.write(‘

color=red>你好</font>‘)" />

? 在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载

过程中write才会与原有内容融合在一起

? <script type="text/javascript">

? document.write(‘<font color=red>你好</font>‘);

? </script>

? write经常在广告代码、整合资源代码中被使用。见备注

内容联盟、广告代码、cnzz，不需要被主页面的站长去维护内容，只

要被嵌入的js内容提供商修改内容，显示的内容就变了。

1. write

document.write("<a href=http://www.mamicode.com/‘http://www.itcast.cn‘>传智播客");

</script>

clip_image033

<head>

</head>

document.write("<a href=http://www.mamicode.com/‘http://www.itcast.cn‘>传智播客");

</script>

<body>

<br/>

这是页面类容

document.write("<a href=http://www.mamicode.com/‘http://www.itcast.cn‘>传智播客");

</script>

这是页面类容

</body>

</html>

Script也可以写在body里面

<head>

</head>

document.write("<a href=http://www.mamicode.com/‘http://www.itcast.cn‘>传智播客");

</script>

<body>

<br/>

这是页面类容

document.write("<a href=http://www.mamicode.com/‘http://www.itcast.cn‘>传智播客");

</script>

这是页面类容

</body>

</html>

clip_image034

点击hello按钮感觉会在新页面打印出来，但其实还是当前的页面只有在页面加载

过程中write才会与原有内容融合在一起（onlick页面已经加载完成）

clip_image035

广告联盟

http://news.baidu.com/newscode.html 百度广告获取广告代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

.baidu span{color:#6f6f6f;font-size:12px} a.more{color:#008000;}a.blk{color:#000;font-weight:bold;}</style>

</head>

document.write("<a href=http://www.mamicode.com/‘http://www.itcast.cn‘>传智播客");

</script>

<body>

<br/>

这是页面类容

document.write("<a href=http://www.mamicode.com/‘http://www.itcast.cn‘>传智播客");

</script>

这是页面类容

</body>

</html>

clip_image037

可以直接在记事本里面打开别人网站的js代码

clip_image038

http://news.baidu.com/ns?word=title%3A%E8%AE%A1%E7%AE%97%E6%9C%BA&tn=newsfcu&from=news&cl=2&rn=5&ct=0

clip_image040

Cnzz数据专家

document方法

getElementById方法（非常常用），根据元素的Id获得对象，网页中id不能

重复。也可以直接通过元素的id来引用元素，但是有有效范围、

form1.textbox1之类的问题，因此不建议直接通过id操作元素，而是通过

getElementById

<head>

function btnClick() {

alert(textbox1.value);

}

</script>

</head>

<body>

</body>

</html>

通过控件的id取value值但不推荐这样使用textbox1.value会出现无法取到的情况

<head>

function btnClick() {

alert(textbox1.value);

}

function btnClick2() {

alert(textbox2.value);

}

</script>

</head>

<body>

</form>

</body>

</html>

clip_image042

错误原因：input放在了form中，引用时不能直接引用input的id

正确用法：

<head>

function btnClick() {

alert(textbox1.value);

}

function btnClick2() {

// alert(textbox2.value);

alert(form1.textbox2.value);

}

</script>

</head>

<body>

</form>

</body>

</html>

clip_image043

这样使用每次要找到form的id，再通过这个id来找控件的id略显麻烦，因此推荐使用另外一种方法：getElementById（‘控件名’）

<head>

function btnClick() {

var txt = document.getElementById("textbox1");

alert(txt.value);

// alert(textbox1.value);

}

function btnClick2() {

// alert(textbox2.value);

// alert(form1.textbox2.value);

var txt = document.getElementById("textbox2");

alert(txt.value);

}

</script>

</head>

<body>

</form>

</body>

</html>

（*）getElementsByName，根据元素的name获得对象，由于页面中元素

的name可以重复，比如多个RadioButton的name一样，因此

getElementsByName返回值是对象数组。

易错点：

<head>

function btnClick() {

var radios=document.getElementsByName("gender");

for(var r in radios)

{

alert(r.value);

}

</script>

</head>

<body>

<input type="radio" value=http://www.mamicode.com/"男" name="gender"/>男

<input type="radio" value=http://www.mamicode.com/"女" name="gender"/>女

<input type="radio" value=http://www.mamicode.com/"未知" name="gender"/>未知

</body>

</html>

clip_image044

正确方法：

<head>

function btnClick() {

var radios = document.getElementsByName("gender");

// for(var r in radios)

// {

// alert(r.value);

// }

// }在js中不像C#中的foreach，并不会遍历每个元素，而是遍历的key

for (var i = 0; i < radios.length; i++) {

var radio = radios[i];

alert(radio.value);

}

</script>

</head>

<body>

<input type="radio" value=http://www.mamicode.com/"男" name="gender"/>男

<input type="radio" value=http://www.mamicode.com/"女" name="gender"/>女

<input type="radio" value=http://www.mamicode.com/"未知" name="gender"/>未知

</body>

</html>

（*）getElementsByTagName，获得指定标签名称的元素数组，比如

getElementsByTagName("p")可以获得所有的<p>标签。

<head>

function btnClick() {

var radios = document.getElementsByName("gender");

// for(var r in radios)

// {

// alert(r.value);

// }

// }在js中不像C#中的foreach，并不会遍历每个元素，而是遍历的key

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 = http://www.mamicode.com/"hello";

}

</script>

</head>

<body>

<input type="radio" value=http://www.mamicode.com/"男" name="gender"/>男

<input type="radio" value=http://www.mamicode.com/"女" name="gender"/>女

<input type="radio" value=http://www.mamicode.com/"未知" name="gender"/>未知

</body>

</html>

案例：点击一个按钮，被点击的按钮显示“呜呜”，其他按钮显示“哈哈”。

<head>

function initEvent() {

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length;i++ ) {

var input = inputs[i];

input.onclick = btnClick;

}

function btnClick() {

alert("点了！");

}

</script>

</head>

</body>

</html>

clip_image047

<head>

function initEvent() {

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length;i++ ) {

var input = inputs[i];

// input.onclick = btnClick;

// window.event.srcElement,获得引发事件的控件

input.onclick = btnClick;

}

function btnClick() {

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {

var input = inputs[i];

if (input == window.event.srcElement) {

input.value = http://www.mamicode.com/"呜呜";

}

else {

input.value = http://www.mamicode.com/"哈哈";

}

// function btnClick() {

// alert("点了！");

// }

</script>

</head>

</body>

</html>

案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。

(btn.disabled = true )

思路：1.注册按钮初始状态为不可用

<head>

</script>

</head>

<body>

</body>

</html>

2. 启动定时器setInterval,1秒钟运行一次CountDown的方法，设定初始值10的全局变量，在

countDonw方法中对全局变量倒数

3. 将倒数的值写到按钮上（请仔细阅读协议（还剩8秒））

4. 直到全局变量的值<=0时按钮可用，并且设定按钮上文本为同意

<head>

var leftScconds = 10;

var intervalId;

function CountDown() {

var btnReg = document.getElementById("btnReg");

if(btnReg)//如果网页的加载速度非常慢的话，可能定时器运行的时候控件还没有加载！

{

if (leftScconds <= 0) {

btnReg.value = http://www.mamicode.com/"同意";

btnReg.disabled = ""; //或者btnReg.disabled=false;

clearInterval(intervalId);//停止计时器

}

else {

btnReg.value = http://www.mamicode.com/"请仔细阅读协议（还剩" + leftScconds + "秒）";

leftScconds--;

}

intervalId=setInterval("CountDown()", 1000);

</script>

</head>

<body>

</body>

</html>

clip_image048

clip_image049

练习：加法计算器。两个文本框中输入数字，点击【=】按钮将相加的结果

放到第三个文本框中。

<head>

function calClick() {

var value1 = document.getElementById("text1").value;

var value2 = document.getElementById("text2").value;

document.getElementById("text3").value = http://www.mamicode.com/value1 + value2;

}

</script>

</head>

<body>

<input type="text" id="text1"/>+<input type="text" id="text2"/>=

</body>

</html>

执行的结果为拼接字符串

正确的做法为：（转换为int类型）

<head>

function calClick() {

var value1 = document.getElementById("text1").value;

var value2 = document.getElementById("text2").value;

value1 = parseInt(value1, 10);

value2= parseInt(value2, 10);

document.getElementById("text3").value = http://www.mamicode.com/value1 + value2;

}

</script>

</head>

<body>

<input type="text" id="text1"/>+<input type="text" id="text2"/>=

</body>

</html>

注意parseInt(参数一，参数二)

参数一为要转换的数，参数二为结果的进制数（这里是十进制，所以就是10）

练习：美女时钟。

<head>

function ReFlash() {

var imgMM = document.getElementById("imgMM");

if (!imgMM) {

return;

}

else {

imgMM.src = http://www.mamicode.com/"Images/1.jpg";

}

setInterval("ReFlash()",1000);

</script>

</head>

<body>

</body>

</html>

clip_image053

完整代码如下：

<head>

function ReFlash() {

var imgMM = document.getElementById("imgMM");

if (!imgMM) {

return;

}

// else {

// imgMM.src = http://www.mamicode.com/"Images/1.jpg";

// }

var now = new Date();

var filename = now.getHours() + "_" + now.getSeconds() + ".jpg";

imgMM.src = http://www.mamicode.com/"mm/" + filename;

}

setInterval("ReFlash()",1000);

</script>

</head>

<body>

</body>

</html>

<head>

function Fill2Len(i) {

if (i < 10) {

return "0" + i;

}

else {

return i;

}

function ReFlash() {

var imgMM = document.getElementById("imgMM");

if (!imgMM) {

return;

}

// else {

// imgMM.src = http://www.mamicode.com/"Images/1.jpg";

// }

var now = new Date();

var filename = Fill2Len(now.getHours()) + "_" + Fill2Len(now.getSeconds()) + ".jpg";

imgMM.src = http://www.mamicode.com/"mm/" + filename;

}

setInterval("ReFlash()",1000);

</script>

</head>

</body>

</html>

clip_image055

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 跟着杨中科学习asp.net之dom

跟着杨中科学习asp.net之dom

看完仍有疑问？有类似问题直接问程序猿