1.window对象
confirm("是否删除"); //显示确定、取消的对话框。
navigate("http://www.baidu.com"); //重新导航到指定的地址。
window.location.href="http://www.baidu.com"; //重新导向新的地址
window.location.reload()刷新页面
var intervalId = setInterval("",5000); //设置定时器
clearInterval(intervalId); //清除定时器
charAt(0); //取第一个字符
substring(start,end); //取start-end区域(不包括end)的字符
2.body、document对象的事件
onload: 网页加载完毕时触发
onunload: 网页关闭(或者离开)后触发
onbeforeunload:在网页准备关闭(或者准备离开)后触发。
<body οnbefοreunlοad="window.event.returnValue='真的要放弃发帖退出吗?'">
window.event.altKey/ctrlKey/shiftKey ;bool类型,表示发生事件时键是否被按下。
clientX、clientY发生事件时鼠标在客户区的坐标;
screenX、screenY发生事件时鼠标在屏幕上的坐标;
offsetX、offsetY发生事件时鼠标相对于事件源
event.srcElement,获得引发事件源对象
this:当前监听事件的对象
keyCode,发生事件时的按键值
returnValue=false,会取消默认事件的处理
3.剪切板:
clipboardData对象
setData("Text",val);
clipboardData.setData('Text','好玩的网站地址'+location.href);
oncopy/onpaste事件
当复制的时候body的oncopy方法被触发,直接return false就是禁止复制。
<body οncοpy="alert('禁止复制!');return false;">
<input type="text" οnpaste="alert('禁止粘贴!');return false;" />
在网站中复制文章的时候,为了防止那些拷贝党不添加文章来源,设置自动添加版权声明
clipboardData.setData('Text',clipboardData.getData('Text')+'本文来自传智播客技术专区,转载请注明来源。'+location.href);
不能直接在oncopy中执行对粘贴板的操作,因此设定定时器,0.1秒后执行。
οncοpy="setTimeout('modifyClipboard()',100)" ;
history 操作历史记录
window.history.back()后退;
window.history.forward()前进
document的方法:
1.write:向文档中写入内容。
document.getElementById(""); //取得对象
document.getELementsByName(""); //返回对象数组 (如:radioButton)
document.getElementsByTagName(""); //返回对象数组
案例:
十秒钟后协议文本框下的注册按钮才能点击,时钟倒数。(btn.disabled=true)
思路:
1.注册按钮初始状态为不可用,disabled
2.启动定时器,setInterval,1秒钟运行一次CountDown方法,设定一个初始值为10的全局变量,
在CountDown方法中对全局变量倒数,然后将倒数的值写到注册按钮上(请仔细阅读协议(还剩8秒))。
3.直到全局变量值为<=0,就让注册按钮可用,将按钮的文本设置为“同意”。
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
var leftSeconds=10;
function countDown(){
var btn=document.getElementById("btnReg");
if(btn){
if(leftSeconds<=0){
btn.value="同意";
btn.disabled=false;
clearInterval("timerId");
}
else{
btn.value="请仔细阅读协议(还剩"+leftSeconds+"秒)";
leftSeconds--;
}
}
}
var timerId=setInterval("countDown()",1000);
</script>
</head>
<body>
<textarea></textarea>
<input type="button" id="btnReg" value="同意" disabled="true" />
</body>
</html>
4.动态注册事件
在body的onload事件中处理,例如为每个text对象添加onclick,onblur事件
例:(评分控件)
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function indexOf(arry,element){
for(var i=0;i<arry.length;i++){
if(arry[i]==element){
return i;
}
}
return -1;
}
function initEvent(){
var table=document.getElementById("tab")
var tds=table.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
var td=tds[i];
td.style.cursor="pointer";
td.οnmοuseοver=tdMouseover;
td.οnmοuseοut=tdMouseout;
//td.οnclick=tdClick;
}
}
function tdMouseover(){
var table=document.getElementById("tab")
var tds=table.getElementsByTagName("td");
var index=indexOf(tds,this);
for(var i=0;i<=index;i++){
tds[i].innerText="★";
}
for(var i=index+1;i<tds.length;i++){
tds[i].innerText="☆";
}
}
function tdMouseout(){
var table=document.getElementById("tab")
var tds=table.getElementsByTagName("td");
var index=indexOf(tds,this);
for(var i=0;i<=index;i++){
tds[i].innerText="☆";
}
}
//function tdClick(){
//var table=document.getElementById("tab")
//var tds=table.getElementsByTagName("td");
//var index=indexOf(tds,this);
//for(var i=0;i<=index;i++){
//tds[i].innerText="★";
//}
//for(var i=index+1;i<tds.length;i++){
//tds[i].innerText="☆";
//}
//}
</script>
</head>
<body οnlοad="initEvent()">
<table id="tab">
<tr>
<td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
</tr>
</table>
</body>
</html>
5动态创建元素:
document.createElement("button")
appendChild()
innerText、innerHTML属性
:分别表示元素标签内内容的文本表示形式和HTML源代码,可读可写。
例:
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function AddData(){
var tab=document.getElementById("tab");
var data={"百度":"http://www.baidu.com","新浪":"http://www.sina.com","谷歌":"http://www.google.com"};
for(var key in data){
var value=data[key];
var tr=document.createElement("tr");
var td1=document.createElement("td");
td1.innerText=key;
tr.appendChild(td1);
var td2=document.createElement("td");
td2.innerHTML="<a href='"+value+"'>"+value+"</a>";
tr.appendChild(td2);
tab.appendChild(tr);
//var tr=tab.insertRow(-1);
//var td1=tr.insertCell(-1);
//td1.innerText=key;
//var td2=tr.insertCell(-1);
//td2.innerHTML="<a href='"+value+"'>"+value+"</a>";
}
}
</script>
</head>
<body>
<table id="tab"></table>
<input type="button" value="加载数据" οnclick="AddData()"/>
</body>
</html>
---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------
详细请查看:http://net.itheima.com/