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

Dom教程

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

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

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

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

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

Css+javascritp+dom=dhtml

Dom事件

<head>

</head>

</body>

</html>

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

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

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

双击效果:

Window对象

<head>

function confirmdemo() {

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

alert("进入了！");

}

else {

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

}

</script>

</head>

<body>

</body>

</html>

重新导航到另外的页面

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

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

器的标识

function startInterval() {

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

}

</script>

</head>

<body>

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>

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

走马灯

标题栏走马灯效果

<head>

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

function scroll() {

var title = document.title;

}

</script>

</head>

<body>

</body>

</html>

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

<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

Dom事件

<head>

btn.value = "ok";

</script>

</head>

<body>

</body>

</html>

<head>

// btn.value = "ok";

</script>

</head>

</body>

</html>

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

<head>

// btn.value = "ok";

</script>

</head>

</body>

</html>

<head>

// btn.value = "ok";

</script>

</head>

<body οnlοad="btn.value = 'ok';"

οnbefοreunlοad="window.event.returnValue=' 真的要放弃发帖退出吗？'">

</body>

</html>

Dom属性

window对象的属性1

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

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

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

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

于winForm中的e(EventArg).

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

ctrlKey、shiftKey属性，例子 <input type="button" value="点击"

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

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

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

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

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

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

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

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

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

现要实现页面不跳转

要阻止跳转：

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

</form>

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

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

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

<head>

</head>

<body>

<input type="button" value="href" οnclick="alert(location.href)"/>//显示当前页面的地址

</body>

</html>

定时器走马灯易错点：

<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属性

<head>

</head>

<body>

<input type="button" value="分享本页给好友" οnclick="clipboardData.setData('Text','我发现这个页面很黄很暴力！'

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

</body>

</html>

<input type="button" value="分享本页给好友" οnclick="clipboardData.setData('Text','我发现这个页面很黄很暴力！'

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

所有元素都有oncopy,onpaste事件

<head>

</head>

<input type="button" value="分享本页给好友" οnclick="clipboardData.setData('Text','我发现这个页面很黄很暴力！'

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

<br/>

</body>

</html>

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

function modifyClipboard() {

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

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

location.href);

}

οncοpy="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="分享本页给好友" οnclick="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="分享本页给好友" οnclick="clipboardData.setData('Text','我发现这个页面很黄很暴力！'

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

<br/>

</body>

</html>

第二个页面:

<head>

</head>

<body>

</body>

</html>

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

这样,效果是一样的

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

document属性1

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

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

document的方法：

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

最后添加一个回车

• <input type="button" value="点击" οnclick="document.write('<font

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.itcast.cn'>传智播客</a>");

</script>

<head>

</head>

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

</script>

<body>

<br/>

这是页面类容

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

</script>

这是页面类容

</body>

</html>

Script也可以写在body里面

<head>

</head>

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

</script>

<body>

<br/>

这是页面类容

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

</script>

这是页面类容

</body>

</html>

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

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

广告联盟

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.itcast.cn'>传智播客</a>");

</script>

<body>

<br/>

这是页面类容

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

</script>

这是页面类容

</body>

</html>

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

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

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>

错误原因：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>

这样使用每次要找到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="男" name="gender"/>男

<input type="radio" value="女" name="gender"/>女

<input type="radio" value="未知" name="gender"/>未知

</body>

</html>

正确方法：

<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="男" name="gender"/>男

<input type="radio" value="女" name="gender"/>女

<input type="radio" value="未知" 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 = "hello";

}

</script>

</head>

<body>

<input type="radio" value="男" name="gender"/>男

<input type="radio" value="女" name="gender"/>女

<input type="radio" value="未知" 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>

<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 = "呜呜";

}

else {

input.value = "哈哈";

}

// 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 = "同意";

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

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

}

else {

btnReg.value = "请仔细阅读协议（还剩" + leftScconds + "秒）";

leftScconds--;

}

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

</script>

</head>

<body>

</body>

</html>

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

放到第三个文本框中。

<head>

function calClick() {

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

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

document.getElementById("text3").value = 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 = 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 = "Images/1.jpg";

}

setInterval("ReFlash()",1000);

</script>

</head>

<body>

</body>

</html>

完整代码如下：

<head>

function ReFlash() {

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

if (!imgMM) {

return;

}

// else {

// imgMM.src = "Images/1.jpg";

// }

var now = new Date();

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

imgMM.src = "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 = "Images/1.jpg";

// }

var now = new Date();

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

imgMM.src = "mm/" + filename;

}

setInterval("ReFlash()",1000);

</script>

</head>

</body>

</html>

转载于:https://www.cnblogs.com/seclusively/p/3789487.html

跟着杨中科学习asp.net之dom相关推荐

【解惑】杨中科说给弟弟的话
刚才和我弟弟通电话聊了聊这一段时间的学习以及下一阶段的学习规划,我弟弟在读大二,是计算机专业,他也是如鹏网上一个比较活跃的会员.今天和他聊电话,感触颇多,倒不是因为我发现了新的东西,而是因为竟然连他都 ...
杨中科的.NET 6新书的出版进度汇报
各位朋友好,我有3个月没发公众号了,今天打扰大家一下,不好意思. 最近这3个月,我在忙着给我的.NET 6新书收尾,并且在.NET 6正式版发布后,我把书中用.NET 6 预览版编写的内容在.NET ...
【杨中科】问苍天，微软的技术更新真的快吗
经常在网站上看到有人抱怨: "微软的技术怎么更新这么快,.Net2.0.3.0.3.5.4.0.4.5,我的妈呀,都跟不上微软的步伐了!" "还没学会Silverligh ...
【vue】跟着老马学习vue-数据双向绑定
学习了node.js教程,只能说是有了一定的了解,之前也了解了webpack和es6的核心内容,也看过vue2.0的官网教程,并结合视频看过项目,但是理解和运用仍然存在很多问题,接下来的一段时间,跟着 ...
杨中科.NET5视频教程更新了：DI、配置系统、Logging、EF Core等
我的.NET5视频教程又更新了一些内容了,包含依赖注入.配置系统.日志系统以及部分Entity Framework Core的内容.Entity Framework Core还没全讲完,会继续更新. ...
怎样学习ASP.NET
优秀ASP.NET程序员修炼之路 "为人写程序" 初级的程序员或经验不足的程序员往往只意识到自己的程序是写给计算机的,而不会在意程序其实也是写给人的,或在意得不够.不全面. 写给机 ...
学习ASP.NET MVC系列 - 还有比这更简炼的吗？把复杂的事情变简单了，贡献啊！...
转自学习ASP.NET MVC系列: 学习ASP.NET MVC(一)--我的第一个ASP.NET MVC应用程序学习ASP.NET MVC(二)--我的第一个ASP.NET MVC 控制器学习 ...
艾伟_转载：学习 ASP.NET MVC （第五回）理论篇
本系列文章导航学习 ASP.NET MVC (第一回)理论篇学习 ASP.NET MVC (第二回)实战篇学习 ASP.NET MVC (第三回)实战篇学习 ASP.NET MVC (第四回) ...
一步一步学习ASP.NET MVC 1.0创建NerdDinner 范例程序 - 强烈推荐！！！
一步一步学习ASP.NET MVC 1.0创建NerdDinner 范例程序本文根据<Professional ASP.NET MVC 1.0>中微软牛人Scott Guthrie 提供 ...
学习ASP.NET Core Razor 编程系列九——增加查询功能
原文:学习ASP.NET Core Razor 编程系列九--增加查询功能学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.N ...

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

跟着杨中科学习asp.net之dom相关推荐

最新文章

热门文章