Dom操作网页界面中的元素用的
Dom也像winform有事件，属性，方法
CSS+javascript+Dom=DHTML
Function f1()
{
Window.alert(“哈哈！”);
}
给一个元素动态添加事件οnclick=”document.ondbclick=f1”;
Window对象又称顶级对象，使用window对象的属性和方法的时候可以省略
Alert弹出消息框；confirm弹出显示确定按钮的对话框，点击确定返回true，否则返回false；
Navigate重新导航到指定的地址；
setInterval(str,time)每隔一段事件执行一件事，str代码字符串或者匿名函数，time间隔时间;
clearInterval(定时器编号);varintervalId= setInterval(str,time)；clearInterval(intervalId)；
setTimeout(str,time)) 只执行一次
title走马灯效果的实现
function scroll()
{
vartitle=document.title;
varfirstChar=title.charAt(0);
varleftStr=title.substring(1,title.length);
document.title=leftStr+firstChar;
}
setInterval("scroll()",200);
onload页面加载完毕之后触发；
onunload页面关闭后触发；
onbeforeunload页面关闭前触发；
window.event.returnValue=“真的要离开么”显示警告消息
onclick()单击ondbclick()双击onkeydown()按键按下onkeyup()按键释放onmousedown()鼠标按下onmousemove()鼠标移动onmouseout()鼠标离开范围onmouseover()鼠标移动到元素范围onmouseup()鼠标按键释放
window.location.href=http://...重定向等价于navigate(“url”),location.href也可以表示当前页面url
window.location.reload()刷新页面
window.event事件对象包括altkey属性shiftkey属性以及ctrlkey属性均为bool类型
οnclick=”if(window.event.altKey)alert(“alt被点击了”);”;
srcElement事件源
clientX和clientY鼠标发生事件时在客户区的坐标
screenX和screenY鼠标发生事件时在屏幕中的坐标
returnValue属性,如果returnValue设置为false时，默认的事件会被取消
每次调用一个setInterval就会产生一个定时器，旧的定时器不会停止，所以一般需要clearInterva ()方法停止定时器
Screen对象，屏幕信息screen.width screen.height屏幕分辨率
ClipboardData对象，对黏贴板中的内容进行操作，clearData(“Text”),getData(“Text”),setData(“Text”,value);
很多元素都有oncopy和onpaste事件，如果事件中有return false；就可以实现禁止复制
在网站上复制文章的时候，为了防止防止那些拷贝党不添加文章来源，自动在文章的末尾添加版权声明代码如下：function modifyClipboard(){ClipboardData.setData(‘Text”, ClipboardData.getData(‘Text’)+“本文来自。。。。。，转载请注明来源”)}因为不能在oncopy直接改粘贴板中的内容，所以设置定时器，0.1秒后发生更改粘贴板中的内容
Oncopy=”setTimeout(modifyClipboard(),500)”
History对象 后退window.History.back();前进window.History.forword();window.history.go(num);
Document属性中的方法有write()用来向文档中写入内容；只有在页面加载时write中的内容才会和页面的融合，而onclick中的write内容会把页面冲掉
Write经常在广告代码中，整合资源代码中被使用。cnzz，广告联盟，heima8
getElementById()方法非常常用，根据元素id获得元素对象
getElementByName();根据名字name取对象，返回值对象数组；在js中不像c#中的foreach并不会遍历每个元素而不是遍历key(属性)，而使用普通的for循环
getelementByTagname()根据元素标签（input，p等等）获得对象数组
注册页面的倒数效果
思路：注册按钮初始不可用，disabled；使用定时器setinterval，一秒运行一次countdown方法，设定一个初始值为10秒
var lestSeconds=10;
varintervalId;
functionCountDown()
{
varbtnReg=document.getElementById("btnReg");
if(btnReg){
if(lestSeconds<=0)
{
btnReg.value="同意";
btnReg.disabled=false;
clearInterval("intervalId");//停止计时器
}else
{
btnReg.value="请仔细阅读协议（还剩"+lestSeconds+"秒）";
lestSeconds--;
}
}
}
intervalId=setInterval("CountDown()",1000);
<input type="button"value="同意" id="btnReg" disabled="disabled"
练习，图片变换
<html>
<head>
<title>注册</title>
<scripttype="text/javascript">
varCountImage=1;
functionshiftImages()
{
varimage=document.getElementById("imageId");
if(image)
{
if(CountImage<=10)
{
image.src=CountImage+".jpg";
CountImage++;
}else
{
CountImage=1;
image.src=CountImage+".jpg";
CountImage++;
}
}
}
setInterval("shiftImages()",1000);
</script>
</head>
<bodyοnlοad=”Refresh()”>
<center><imgstyle="width:500px" id="imageId"src=""/></center>
</body>
</html>
Docment的creatElement方法动态产生dom对象，再调用appendChild（）添加到层上
Var btn=docment.getElementById(“btnId”);
Var creatbtn=docment.createElement(“input”);
Creatbtn.type=”button”;
Creatbtn.value=”我是动态按钮”;
Btn.appendChild(Creatbtn);
几乎所有的dom元素都有innerText和innerHtml属性，一个只取文本，另一个只取文本和格式
function loadData()
{
vartable=document.getElementById("tableId");
vardata={"百度":"http://www.baidu.com","新浪":"http://www.sina.com"};
for(varkey in data)
{
varvalue=data[key];
vartr=document.createElement("tr");
vartd1=document.createElement("td");
vartd2=document.createElement("td");
td1.innerText=key;
tr.appendChild(td1);
td2.innerHTML="<ahref='"+value+"'>"+value+"</a>";
tr.appendChild(td2);
table.appendChild(tr);
}
}
</script>
</head>
<body>
<tableid="tableId"></table>
<inputtype="button" value="产生数据"οnclick="loadData()"/>
浏览器兼容性问题ie6不支持table.appendChild(“tr”)方法。用table.insertRow(-1)和tr.insertCell(-1)替代。火狐浏览器不支持innertext();
练习无刷新评论
事件冒泡：如果A元素嵌套到B元素中时，点击事件两个都触发，顺序由内到外
事件中的this也可表示发生事件源(只有在事件响应函数里面使用)this.value等价于event.srcElement.value
修改样式，document.getElementById(“div”).className=’night’;
div2.style.background=”red”;可以定义具体的某个样式
注意，css中的background-color在dom中是background
练习：创建三个输入文本框，当光标离开文本框的时候，如果文本框为空，则显示为红色
，如果不为空则显示为白色；获得焦点（焦点进入控件）onfocus,失去焦点（焦点离开控件）onblur
<scripttype="text/javascript">
functioninitEvent()
{
varinputs=document.getElementsByTagName("input");
for(vari=0;i<inputs.length;i++)
{
varinput=inputs[i];
input.οnblur=inputOnblur;
}
}
functioninputOnblur()
{
if(this.value.length<=0)
{
this.style.background="red";
}eles
{
this.style.background="white";
}
}
</script>
</head>
<bodyοnlοad="initEvent()">
<inputtype="text"/><input type="text"/><inputtype="text"/><input type="text"/>
评分控件：function initEventPingFen()
{
vartableId=document.getElementById("tableId");
vartds=document.getElementsByTagName("td");
for(vari=0;i<tds.length;i++)
{
vartd=tds[i];
td.οnclick=tdOnclick;
td.style.cursor="pointer"
}
}
functiontdOnclick()
{
//this.style.background="red";
vartableId=document.getElementById("tableId");
vartds=document.getElementsByTagName("td");
varindex=indexOf(tds,this);
for(vari=0;i<=index;i++)
{
vartd=tds[i];
td.style.background="red";
}
for(vari=index+1;i<tds.length;i++)
{
vartd=tds[i];
td.style.background="white";
}
}
超链接的单选效果；
表格隔行变色；
表格被点击的行变黄；（已实现）
Window.event.returnValue=false,阻止页面加载
控制层的显示style.display=none..不显示
style.display=””..显示
function togglediv()
{
Vardiv1=document.getElementById(“div1”);
If(div1.style.display==””)
{
div1.style.display=none;//不显示
}else
{
div1.style.display=””;//显示
}
}
Onmouseover鼠标移动
Ie中body事件的范围，onclick和onmouseover如果页面没有满，则最后一个元素之后的区域点击事件没反应
Ie浏览器中元素的高度和宽度可以没有单位，但是尽量不要这么做。Ff必须有单位
ParseInt（“50px”，10）=50；//10表示十进制
层的操作：position 属性有static（无定位，默认位置），absolute（绝对定位），fixed（相对窗口的定位，位置会随浏览器的变化而变化），relative（相对与默认位置的定位）。如果要修改位置，一般是由absolute修改top和left的值
跟着鼠标飞的图片。。onmousemove通过event的clientX和clientY获得鼠标的位置坐标修改位置，，，，一边移动一边出发，，，document. Onmousemove();
会飞的图片：
<scripttype="text/javascript">
document.οnmοusemοve=function()//匿名函数
{
varx=window.event.clientX;
vary=window.event.clientY;
vardivFly=document.getElementById("divFly");
if(!divFly)
{
return;
}
divFly.style.left=x;
divFly.style.top=y;
}
</script>
</head>
<body>
<divid="divFly" style="position:absolute">
<imgsrc="man.png"/>
<br/>
</div>
Title提示用的
练习：点击登陆按钮显示用户名和密码框
Div1.style.width=”80px”而不是Div1.style.width=80px
Ie用srcElement而ff用target
Ie中绑定事件用attachEvent（）绑定事件
Ff用addEventListener
在ie中使用innnerText而ff中使用textContent
使用jquery来解决浏览器之间的差异
Js中的正则表达式
Var regex=new RegExp(“\\d{5}”);…..(@”\d{5}”)或者varregex=^d{5}
RegExp对象的test（“abc@qq.com”）方法;exec();complile()
Onkeydown
Window.event.keyCode键盘码；例如：13 回车
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
