您的位置：首页 > 职场人生

【黑马程序员】DOM基础知识

2013-03-01 18:40 316 查看
---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------
一、DOM入门

Dom就是HTML页面的模型，将每个标签都做为一个对象javascript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象就可以读取文本框中的值、设置文本框中的值。

Javascript->Dom 就是C#->.NetFramwork

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

CSS+javascript+DOM=DHTML

二、事件

1、事件：<bodyonmousedown=”alert(‘haha’)”>当点击鼠标的时候执行onmousedown中的代码，有时事件响应的代码太多就放到单独的函数中：

<script type=”text/javascript”>

functionbodymousedown(){

alert (“网页电话了”);

alert(“逗你玩的哦”);}

</script>

<body onmousedown=”bodymousedown()”>

bodymousedown()后的括号不能丢因为表示调用bodymousedown函数而不是onmousedown事件的响应函数是bodymousedown

2、动态设置事件

function fi(){

alert(“1”);}

furction f2(){

alert(“2”);}

<input type=”button” onclick=”document.ondbclick=f1”value=”关联事件1”/>

<input type=”button” onclick=”document.ondbclick=f2”value=”关联事件2”/>

三、window对象

1. window对象代表当前浏览器的窗口，使用window对象的属性、方法的时候可以省略window。

alert 方法,弹出消息框

confirm方法，显示“确定”、“取消”对话框，如果按了确定就返回true否则就false

if(confirm(“是否继续”)){

alert(“确定”);

}

Else{

Alert(“取消”);

}

重新导航到指定的地址：navigate(http://www.rupeng.com);

setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个残参数为间隔时间，返回值为定时器的标识

setInerval(“alert(‘hello’)”,5000);

clearInterval取消setInterval的定时执行，相当于Timer中的Enable=False，因为setInterval可以设定多个定时，所以clearInterval要指定清除哪个定时器的标识，即setIenterval的返回值

varintervalId=setInterval(“alert(‘hello’)”,5000);

clearInterval(intervalId);

<!DOCTYPEhtmlPUBLIC
"-//W3C//DTDXHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scripttype="text/javascript">
functionconfirmdemo() {
if(confirm("是否进入？")) {
alert("进入");
}
else{
alert("取消进入¨?");
}
}
varintelvalId;
functionstartInterval() {
intelvalId=setInterval("alert('hello')", 1000); }
</script>
</head>
<body>
<inputtype="button"
value="confirmtest"
onclick="confirmdemo()"
/>
<inputtype="button"
value="nav测a试º?"onclick="navigate('HTMLPageDom1.htm')"/>
<inputtype="button"
value="setinterval测a试º?"onclick="startInterval()"/>
<inputtype="button"
value="停ª¡ê止1setinterval"onclick="clearInterval(intelvalId)"/>

</body>
</html>
setTime也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清除定时，很好区别：Interval：间隔；timeout：超时 vartimeout=setTimeout(“alert(‘hello’)”,2000);
四、DOM事件

1、
body、document对象的事件

onload:网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现javascript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中或者可以把javascript放到元素之后，元素的onload事件是元素自己加载完毕时触发，body
onload才是全部加载完成

onunload：网页关闭或者离开后触发

onbeforeunload:在网页准备关闭或者离开后触发，在事件中为”window.event.returnValue赋值（要显示的警告消息），这样窗口离开就会弹出确认消息 <body onbeforeunload=”window.event.returnValue=”真的要放弃发帖退出吗？”/>

2. 其他事件：

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

五、DOM属性

1、
window对象的属性

wondow.location.href=http://www.baidu.com,重新导向新的地址，和navigate方法效果一样，window.location.reload()刷新页面

window.event属性，用来获得发生事件的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取得相关信息

altkey属性，bool类型，表示发生事件的alt属性是否被按下，类似的还有ctlkey,shiftkey属性

<input type=”button”value=”点击” onlick=”if(event.altkey){alert(“Alt点击了”)} else{alert(“普通点击”)}/>;

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

鼠标在屏幕上的坐标；offSetX、offSetY发生事件时鼠标相对于事件源

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

在超链接的onclick里面禁止访问href的页面，在表单校验时禁止提交表单到服务器。

srcElement获得事件源对象

keyCode，发生时间是的按键值

button，发生时间时鼠标按键，1为左键2为右键3为左右键同时按下

<body onmkousedown=”if(event button==2){alert(‘禁止复制’);}”>

Screen对象，屏幕的消息

Alert（”分辨率:”+screen. width+”*”+screen.height）

If(screen.width<1024||sreen.height<768){

Alert(“分辨率太低”);

}

clipboardData对象，对粘贴板的操作。ClearData（”Text”）清空粘贴板;getData(“Text”)

读取粘贴板的值，返回值为粘贴板中的内容；setData(“Text”,val),设置粘贴板中的

值

自动在复制的内容后添加版权声明

Function modifyClipboard(){

clipboardData(“Text”,clipboardData.getData(‘Text’)+’文本来自传智播客技术专区，转载情报注明来源’+location.href);

}

六、Document属性

1、
document的方法：

write：想文档中写入内容

<input type=”button” value=”点击” onclick=”document.write(‘<fontcolor=red>你好</font>’)”/>

在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起

<script type=”text/javascript”>

document.write(‘<fontcolor=red>你好</font>’)

</scipt>

Write 经常在广告代码、整合代码中被使用，

getElementById方法，根据元素的Id获得对象，网页中id不能重复，也可以直接通

过元素的id来引用元素，但是有有效范围、form1.textbox1之类的问题，因此不建议直接通过id操作元素而是通过getElementById

getElementByName，根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementByName返回值是对象数组

getElementByTagName(“p”)可以获得所有的<p>标签

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

<script type ="text/javascript">

function btnClick1() {

alert(textbox1.value);

}

function btnClick12() {

alert(form1.textbox2.value);

}

function btnClick() {

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

/* for (var r in radios) {//在JS中这样用for不想c#中的foreach，并不会遍历每个元素而是遍历的key

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

}

}

</script>

</head>

<body>

<input type="text" id="textbox1" />

<input type="button" value="点一下" onclick="btnClick1()" />

<form action="ok.apsx" id="form1">

<input type="text" id="textbox2" />

<input type="button" value="点一下" onclick="btnClick12()" />

</form>

<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()" />

<input type="text" />

<input type="text" />

<input type="text" />

<input type="button" value="bytaname" onclick="btnClick2()" />

</body>

</html>

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ---------------------- 详细请查看：http://edu.csdn.net/heima/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航