---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ----------------------
今天开始DOM 2012年1月14日星期六
内容:使用Javascript操作Dom进行Dhtml开发。
目标:能够了使用Javascript操作Dom实现常见的DHTML效果。
参考书:张孝祥《Javascript网页面——体验式学习教程》
Dom就是Html页面的模型,将每个标签都做为一个对象,Javascript通过调用Dom中的属性,方法就可以对网页中的文本框、层等元素进行编程控制,比如通过操作文本框的Dom对象,就可以读取文本框中的值,设置文本框中的值。
Javascript——Dom就是C# .NetFramwork
Dom也像WinForm一样,通过事件、属性、方法进行编程。
CSS+Javascript+Dom=DHTML。
动态设置事件
可以在代码中动态设置事件响应函数,就像.Net中btn.click+=一样
<head>
<title></title>
<script type="text/javascript">
function liting() {
alert('我¨°是o?李¤?婷?');
}
function huangjiangmiao(){
alert('我¨°是o?黄?江-苗?小?皇¨o帝ì?');
}
</script>
</head>
<body>
<input type ="button"οnclick="document.οndblclick=liting" value ="关?联¢a事o?件t一°?:êoliting"/>
<input type ="button"οnclick="document.οndblclick=huangjiangmiao" value ="关?联¢a事o?件t二t:êo黄?江-苗?"/>
</body>
Window对象1
Window对象代表当前浏览窗口,使用Window对象的属性,方法的时候可以省略window,比如Window.alert(‘a’)可以省略成alert(‘a’)。
Alert方法,弹出消息对话框。
Confirm方法,显就“确定”“取消”对话杠,如果按了“确定”就返回Ture,否则就False
if (confirm("您¨2确¨?¤定?§要°a进?入¨?吗e?ê?")) {
alert("进?入¨?");
}
else {
alert("取¨?消?");
}
Window对象2
重新导航到指定的地址:<input type = "button" value = "navigatetest"onclick ="navigate('HTMLPageDom1.htm')" />
SetInterval每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(毫秒),返回值为定时器的标识。
function startinterval() {
setInterval("alert('相¨¤信?心?里¤?有?D花?§就¨a能¨1够?怒-放¤?')",5000);
}
<input type = "button" value ="setintervaltest" onclick ="startinterval()" />
ClearInterval取消SetInterval的定时执行,相当于Timer中的Enabled=False。因为SetInterval可以设定多个定时,所以ClearInterval要指定清除好个定时器的标识,即SetInterval的返回值。
var pauseinterval;
function startinterval() {
pauseinterval =setInterval("alert('相¨¤信?心?里¤?有?D花?§就¨a能¨1够?怒-放¤?')",3000); //注á?é意°a被à?执??行D的ì?代?¨2码?是o?字á?符¤?串??格?式o?,ê?也°2可¨|以°?写??一°?个?匿?名?函?¥数oy。?ê
}
<input type = "button" value ="停a?ê止1执??行D" onclick ="clearInterval( pauseinterval)" />
SetTimeout也是定时执行,但是不像Setinterval那样是得复的定时执行,只执行一次,ClearTimeout也是清除定时。很好区分:Interval间隔;Timeout:超时;
Body、Document对象的事件
Onload:网页加载完毕时触发,浏览器是一边下载文档一边解析执行,可能会现Javascript执行时需要操作的某个元素,这个元素还没有加载,如果这样,就要把操作的代码放到Body的Onload事件中,或者可以把Javascript放到元素之后,元素的Onload事件是元素自己加载完毕时触发,Body Onload才是全部加载完成.
Onunload:网页关闭(或者离开)后触发。
Onbeforeunload:在网页准备关闭后触发。在事件中为window.event.return value赋值(要显示的警告消息),宋窗口离开(比如前进、后退、关闭)就会弹出确认消息<body onbeforeunload =”window.event.returnValue=”真的要放弃发贴退出吗?”>
除了有特有的属性之外,当然还有通用的HTML元素事件:
Onclick单击ondblclick双击onkeydown按键按下onkeypress点击按键onkeyup按键释放onmouseout鼠标离开元素范围onmouseover鼠标移动到元素范围onmouseup鼠标按键释放
Window.location.href=http://www.itcast.cn重新导向新的地址,和Navigate方效果一样,Window.location.reload()刷新页面。
Window.event是非常重要的属性,用来获得发生事件的信息,事件不局限于Window对象的事件,所有元素的事件都可以通过Event属性取到相关信息,类似于WinForm中的e(EventArg)。
Altkey属性,Bool类型,表示发生事件睅Alt键是否被按下,类似的还有CtrlKey,ShiftKey属性,例子<inputtype = "button" value = "点击" οnclick="if(window.event.ctrlKey){alert('按下了CTRL');}else{alert('普通点击')}"/>
ClipboardData对象,对粘贴板的操作。ClearData(“Text”)清空粘贴板GetData(“Text”)读取粘贴板的值。返回值为粘贴板中的内容; setData(“Text”,val),设置粘贴板的值。
当复制的时候Body的Oncopy方法被触发,直接Return false就是禁止复制。<body oncopy =”alert(‘禁止复制!’);return false;”
很多元素也有oncopy onpaste事件;
Window对象的属性3
在网站中复制文章的时候,为了防止那些拷贝时不添加文章来源,自动在复制的内容后添加版权声明。
function modifyClipboard() {
var txt = clipboardData.getData('Text');
txt = txt + "..本à?文?章?来¤??自á?舒o?适o¨o城?埼?夺¨¢.文?章?来¤??源??:êo" + location.href;
clipboardData.setData('Text', txt);
}
<body οncοpy="setTimeout('modifyClipboard()'),100">
用户复制动作发生100Ms以后再去改粘贴板中的内容。不能直接在ONcopy里修改粘贴板。
不能直接在Oncopy中托运地执行粘贴板的操作,因此设定定时器,100毫秒后执行,这样就不再Oncopy的执行调用栈上了。
Window对象的属性四
History操作历史记录
Window.history.back() 后退;window.history.forward()前进.
也可以用Window.history.go(-1)后退;window.history.go(1)前进。
Document属性是Window对象最复杂的的属性之一。
Document属性一:
Document是Window对象的一个属性,因为使用Window对象成员的时候可以省略Window,所以一般直接写Document。
Document的方法:
Write:向文档中写入内容。WriteIn,和Write差不多,只不过最后添加一个回车。在ONclick等事件占写的代码会冲掉页面中的内容,只有在页面加载过程中Write才会与原有内容融合在一起。
<script type ="text/javascript" >
document.write("<font color =blue>hello isblue</font>");
</script>
Write经常在广告代码、整合资源代码中被使用。
广告代码的例子:Http://heima8.com注册一个账户(itcast0710密码123456),申请一个广告代码,然后放到页面中。
整合资源的例子:百度新闻http://news.baidu.com/newscode.html
百度新闻代码相当于页面中嵌入另外一个网站的JS文件,文件就是一个大的write语句,这样的好处就是主页面不用写死内容,被嵌入的JS内容变了嵌入的内容就变了。
内容联盟、广告代码,不需要被主页面的站长去维护内容,只要被嵌入的JS内容提供商修改内容,显示的内容就变了。
GetElementById方法(非常常用),根据元素Id获得对象,网页中Id不能重复,也可以直接通过元素的Id来引用元素,但是有有效范围之类的问题,因此不建议直接通过Id操作元素,而是通过GetElementById .
GetElementById方法在VisualStudio2010中不能在Form中编写,否则有错误。
<head>
<title></title>
<script type ="text/javascript">
function btnClick() {
alert(textbox.value);
var txt =document.getElementById(textbox);
alert(textbox.value);
}
function btnClickboss() {
alert(textboss.value);//错?¨a误¨?
alert(form1.textboss.value);//正y确¨?¤
var txt = document.getElementById(textboss);
alert(textboss.value);
}
</script>
</head>
<body>
<input type ="text" id="textbox" />
<input type="button"value="press" οnclick="btnClick()" />
<!--<form action="HTMLPage 1.htm"id="form1">
<input type ="text" id="textboss" />
<input type ="button" value="whatever you write anything to out" οnclick="btnClickboss()" />
</form>-->
<input type ="text" id="textboss" />
<input type ="button" value="whatever you write anything to out" οnclick="btnClickboss()" />
</body>
</html>
GetElementName,根据元素的Name获得对象,由于页面中元素的Name可以重复,比如多个RadioButton的Name一样,因此GetElementByName返回值是对象的数组。
<head>
<title></title>
<script type ="text/javascript" >
var radios = document.getElementsByName("gender");
function btnClick() {
for (var radio in radios) {
alert(radio.value);
}
for (i = 0; i < radios.length; i++) {
var radio = radios[i];
alert(radio.value);
}
}
</script>
</head>
<body>
<input type="radio"name="gender"value ="boy" />boy
<input type="radio"name="gender"value="girl" />girl
<input type ="radio"name ="gender"value="protect" />mimi
<input type ="button"value="click"οnclick="btnClick()" />
</body>
</html>
getElementsByTagName,获得指定标签名称的元素数组,比如getElementsByTagName(“p”)可以获得所有的<p>标签。
<br />
<input type = "text" />
<input type = "text" />
<input type = "text" />
<input type = "text" />
<br />
<input type = "button" value="bytagname"onclick ="btnClickss()" />
function btnClickss() {
var inputs = document.getElementsByTagName("input");
for ( i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.value ="hello";
}
}
浏览器兼容性问题
浏览器兼容性的例子:IE6,IE7对Table.appendChild("tr")的支持和IE8不一样,用insertRow、insertCell来代替或者为表格添加tdody,然后向tbody中添加tr。FF不支持InnerText。
<head>
<title></title>
<script type ="text/javascript">
function loadData() {
var data ={"新闻代码":"HTMLPage新闻代码1.htm","加法计算器":"HTMLPage加法计算器.htm","动态产生超链接":"HTMLPage动态产生超链接.htm"};
var tablelinks = document.getElementById("tablelinks");
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);
tablelinks.tBodies[0].appendChild(tr);
}
}
</script>
</head>
<body>
<p>动态产生的元素,查看源代码是看不到的,通过DebugBar--Dom--文档---HTML可以看到</p>
<table id="tablelinks"></table>
<tbody></tbody>
<input type ="button" value="加载数据" onclick ="loadData()" />
</body>
</html>
事件冒泡:如果元素A嵌套在元素B中,那么A被点击不仅A的Onclick事件会被触发,B的Onclick也会被触发。触发的顺序是“由内而外”。
如:
<table onclick ="alert('tableOnclick')">
<tr onclick ="alert('tr Onclick')"><td οnclick="alert('td Onclick')"><p onclick ="alert('点一下P被触发)">这里是P</p></td></tr>
</table>
创建三个输入文本框,当光标离开文本框时如果文本框为空,则刚文本框背景设置为红色,如果不为空则为白色。提示:焦点进入控件的事件是onfocus,焦点离开控件的事件是onblur。
易错:不要写成div1.style.width = 60px,而是div1.style.width="60px"
修改元素的样式不能this.style ="background-color:Red",哪怕可以的话也是把以前所有的样式都冲掉了。单独修改控件的样式this.style.background='red',只修改要修改的样式。技巧,没有文档的情况下的值属性名,随便给一个元素设定ID,然后在JS中就能id.style.出来能用的属性。
createElement的两种用法,注意innerText的问题。
--------------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ---------------------- 详细请查看:http://net.itheima.com/