DOM学习随笔二
一、window对象的属性
1、window.location.href="http://www.sina.com.cn",重新导向新的地址，和navigate方法效果一样。window.location.reload()刷新页面。
2、window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。
1) altKey属性，boot类型，表示发生事件时alt键是否被按下，类似的还有ctrlKey、shiftKey属性，例子<input type="button" value="点击" onclick="if(event.altKey)
{alert('Alt点击')}
else{alert('普通点击')}"/>;
View Code
<!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='HTMLPage1.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="jing.aspx">
<input type="submit" value="提交" onclick="alert('数据有问题!');window.event.returnValue=false;" />
</form>
</body>
</html>
2) clientX、clientY 发生事件时鼠标在客户区的坐标；screenX、screenY发生事件时鼠标在屏幕上的坐标；offsetX、offsetY发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。
3）returnValue属性，如果将returnValue设置为false，就会取消默认事件的处理。
4）srcElement:获得事件源对象
5）KeyCode：发生时间时的按键值
6）button：发生时间时鼠标的按键，1为左键，2为右键，3为左右键同时按。<body onmousedown="if(event.button==2){alert('禁止复制')}">
3、screen对象，屏幕的信息
alert("分辨率："+screen.width+"*"+screen.height);
if(screen.width<1024||screen.height<768)
{
alert("分辨率太低！");
}
4、clipboardData对象，对粘贴板的操作。clearData("Text")清空粘贴板；getData("Text")读取粘贴板的值，返回值为粘贴板中的内容；setData("Text",val),设置粘贴板中的值。
1）案例：复制地址给好友。
<input type="button" value="分享本页给好友" onclick="clipboardData.setData('Text','我发现一个很实用的网站，计算机方面的!'+
location.href);alert(' 已经将地址放到粘贴板中，赶快通过QQ传递给你的好友吧！');" />
2）当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。<body oncopy="alert('禁止复制！');return false;">
3）很多元素也有oncopy、onpaste事件。
4）案例：禁止粘贴账号。<input type="text" onpaste="alert('为保证您充值到正确的手机号，请勿粘贴手机号，请直接填！');return false;/>
5、在网站中复制文章的时候，为了防止那些拷贝党不添加文章来源，自动在复制的内容后添加版权声明。function modifyClipboard()
{
clipboardData.setData('Text',clipboardData.getData('Text')+'本文来自CSDN博客技术专区，转载请注明来源。'+location.href);
}
oncopy="setTimeout('modifyClipboard()',100)"。用户复制动作发生0.1秒以后再去修改粘贴板中的内容（即添加文章来源）。100ms只是一个经常取值，写1000、10、50、20……都行。不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒以后执行，这样就不再oncopy的执行调用栈上了。
View Code
<!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 modifyClipboard() {
var txt = clipboardData.getData('Text');
txt = txt + "本文章转载自CSDN博客技术社区，文章来源：" + location.href;
clipboardData.setData('Text', txt);
}
</script>
</head>
<!--<body oncopy="alert('禁止复制！');return false;">-->
<body oncopy="setTimeout('modifyClipboard()',100)">
<input type="button" value="分享本页给好友" onclick="clipboardData.setData('Text','我发现一个很实用的网站，计算机方面的!'+
location.href);alert(' 已经将地址放到粘贴板中，赶快通过QQ传递给你的好友吧！');" />请先复制这些内容<br />
请输入您的手机号码：<input type="text" />
请您再次输入手机号码：<input type="text" onpaste="alert('为保证您充值到正确的手机号，请勿粘贴手机号，请直接填！');return false;"/>
</body>
</html>
6、1）history操作历史记录
window.history.back()后退；
window.history.forward()前进。也可以用window.history.go(-1)表前进；window.history.go(1)表后退。
先添加两个HTML页面，页面名称分别为：HTMLPageHis1.htm和HTMLPageHis2.htm。页面代码分别如下所示：
View Code
<!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><a href="HTMLPageHis2.htm">进入第2</a>
</body>
</html>
View Code
<!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>这里是第2页<a href="javascript:window.history.back()">后退</a><input type="button" value="后退" onclick="window.history.go(-1)" />
</body>
</html>
7、document属性（最复杂的属性）document是window对象的一个属性，因为使用window对象成员的时候可以省略window,所以一般直接写document。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>
5) write经常在广告代码、整合资源代码中被使用。
广告代码的例子：在http://heima8.com/注册一个账户（测试用 账户名：itcast0710 密码：123456），申请一个广告代码，然后放到页面中。
整合资源的例子：百度新闻：http://news.baidu.com/newscode.html/百度新闻代码相当于页面中嵌入另外一个网站的js文件，js文件就是一个大的write语句，这样的好处就是主页面不用写死内容，被嵌入的js内容变了嵌入的内容就变了。
View Code
<!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">
document.write("<a href='http://www.sina.com.cn/'>新浪主页</a>");
document.write("<a href='http://www.alipay.com/'>淘宝网</a>");
</script>
</head>
<body>
这里是页面的内容
<script type="text/javascript">
document.write("<font color=red>您好</font>");
</script>
<input type="button" value="来点我啊" onclick="document.write('Welcome to BeiJing')" />
<input type="button" value="点击" onclick="document.write('<font color=blue>您好</font>')" />
</body>
</html>
6）getElementById的例子
View Code
<!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="abc.aspx" id="form1">
<input type="text" id="textbox2" />
<input type="button" value="显示刚输入的内容" onclick="btnClick2()"
</form>
</body>
</html>
7）getElementByName的例子
View Code
<!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 = "Merry Christmas";
}
}
</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>
8）getElementByTagName的例子
View Code
<!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>
笔记整理中，手续……
posted on 2011-12-22 23:52 Gelivable【IT随笔】 阅读(425) 评论(0) 编辑 收藏 举报
