随笔- 118 文章- 2 评论- 152 阅读- 21万

DOM学习笔记一

1. onmousedown="" //鼠标点按事件

2. onclick="" //鼠标点击事件

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

　　3.1 alert方法，弹出消息对话框

　　3.2 confirm方法，显示“确定”、"取消"对话框，如果按了【确定】就返回true，反之则返回false

　　3.3 navigate(http://www.baidu.com) 重新导航到指定地址

　　3.4 setInterval方法，每隔多久执行指定代码。第一个参数为代码的字符串，第二个参数为时间间隔（毫秒），返回定时器标识

　　3.5 clearInterval 取消setInterval定时执行，通过定时器标识指定。

1 var intervalid = setinterval("alert('hello')",5000);
2 clearinterval(intervalid);

　　例：标题走马灯效果：标题向左滚动

 1 <title>welcome to our school</title>
 2 <script type="text/javascript">
 3     function scroll(){
 4         var title = document.title;
 5         var firstch = title.charAt(0);
 6         var leftstr = title.substring(1,title.length);
 7         document.title = leftstr + firstch;
 8     }
 9     setInterval("scroll()",1000);
10 </script>

　　3.6 setTimeout也是定时执行，不过只执行一次，像闹钟那样的。

4. body 、document对象

　　4.1 onload 页面加载完成后才会调用。防止调用的时候对象还没加载

　　<body onload="btn.value='OK';"> //onload 也可以写在控件里面。表示当前控件加载完成后触发。

　　4.2 onunload 网页关闭（或者离开）后触发（可能做不完页面就关了）

　　4.3 onbeforeunload 在关闭之前弹出提示。给window.event.returnValue赋值。

　　returnValue=false,则不处理。这个可以加在控件里面比如<a 　　　　　　　　　　　　href=http://www.baidu.com onclick="alert('unavailable!');window.event.returnValue=false;">baidu</a>

5.其他事件

onclick ondblclick ondeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup等

6.window对象属性

　　6.1 window.location.href='http://www.baidu.com' 相当于navigate

　　　　window.location.reload() 刷新页面

　　6.2 window.event 能取到跟点击对象相关的所有属性。相当于winform里的EventArg e。

　　 window.event.value 见4.3 禁止事件的进一步处理

　　6.3 screen对象获得屏幕信息。screen.width screen.height

　　6.4 clipboardData对象，对粘贴板的操作。

　　　　clearData("Text")清空粘贴版

　　　　getData('Text')

　　　　setData('Text',val)

<input type="button" value="分享本页给好友" onclick="clipboardData.setData('Text','我发现一个好玩的网页'+location.href);)"/>

　　　　<body oncopy="alert('禁止复制！');return false;"> //禁止复制网页内容。

　　　　<input type="text" onpaste=('禁止粘贴！');return false;"> //禁止粘贴内容。

　　　　给网站复制添加小尾巴的方法：

1 function modifyClipboard(){
2     clipboardData.setData('Text',clipboardData.getData('Text')
3     +'本文来自哪儿哪儿哪儿。转载请注明'+locaiton.href);
4 }
5 
6 oncopy="setTimeout('modifyClipboard()',100)" //用户复制动作发生0.1秒后执行

不能直接在oncopy中执行对粘贴板的操作，因此设定定时器。

　　6.5 history

　　　　window.history.back(); window.history.forward()

7.document的属性

　　document是window的对象。window可以省略。所以直接写document

　　7.1 document.write

　　　　document.write("<a href='http://www.baidu.com'>百度</a>");

　　　　只有在页面加载的过程中，write才会与原有内容融合在一起。

　　7.2 document.getElementById 非常常用

　　　　document.getElementByName //常用来寻找radiobutton神马的

　　　　document.getElementByTagName //常用来寻找一类控件。

 1 <head>
 2     <title></title>
 3     <script type="text/javascript">
 4 function initEvent(){
 5 var inputs = document.getElementByTagName("input");
 6 for(var i = 0; i < inputs.length; i++){
 7 var input = inputs[i];
 8 //window.event.scrElement,取得引发事件的控件
 9 if(input == window.event.srcElement){
10                     input.value = "哈哈" //也可以修改背景色，达到点击修改背景色的效果
11                 }
12             }
13         }
14 </script>
15 </head>
16 <body onload="initEvent()"> 是的页面加载完成后执行
17 <input type="button" value="嘻嘻" />
18 <input type="button" value="嘻嘻" />
19 <input type="button" value="嘻嘻" />
20 <input type="button" value="嘻嘻" />
21 </body>

　　7.3 document.createElement 可以在页面加载完成后添加元素（与document.write的区别）

 1 <head>
 2 <script type="text/javascript">
 3 function btnClick(){
 4 var divMain = document.getElementById("divMain");//获得层
 5 var input = document.createElement("input");
 6         input.type = "button"l;
 7         input.value = "我就动态按钮";
 8         divMain.appendChild(input); //将动态按钮元素添加到divMain层
 9     }
10 </script>
11 </head>
12 <body>
13     <div id="divMain"></div> //占位用于添加动态按钮
14     <input type="button" value="点击" onclick="btnClick()" />
15 </body>

　　顺便说下getElementById("linkbtn").innerText 和getElementById("linkbtn").innerHTML的区别。前者只取<linkbutton>和</linkbutton>之间的文字，

后者包括<linkbutton>和</linkbutton>之间的所有代码，比如<font>想</font>什么的。

所以可以用getElementById("divMain").innerHTML="<input type="button" value="按钮">"代替上面的document.createElement.

　　动态创建表格的例子：

 1 function LoadData(){
 2     var data = {"百度":"http://www.baidu.com", "新浪":"http://www.sina.com", "QQ":"http://www.qq.com", };
 3     var tableLink = document.getElementById("tableLink");
 4     for (var key in data){
 5         var value = data[key];
 6         var tr = tableLink.insertRow(-1); //firefox里面需要-1这个参数 插入一行并返回插入的对象
 7         
 8         var td1 = tr.insertCell(-1);
 9         td1.innerText = key; //firefox下不支持innerText
10         
11         var td2 = tr.insertCell(-1);
12         td2.innerHTML = "<a href='"+value+"'>"+value+"</a>"; //也可以使用createElement
13     }
14 }
15 
16 <body>
17 <table id="tableLink"></table>
18 <input type="button" value="创建链接" onclick="LoadData()" />
19 </body>

　　无刷新评论的例子：

 1 <head>
 2 <script type="text/javascript">
 3 function AddComment(){
 4 var nickname = document.getElementById("nickname").value;
 5 var comment = document.getElementById("comment").value;
 6     
 7 var tableComment = document.getElementById("tableComment");
 8 var tr = document.createElement("tr");
 9     
10 var tdNickName = document.createElement("td");
11     tdNickName.innerText = nickname;
12     tr.appendChild(tdNickName);
13     
14 var tdComment = document.createElement("td");
15     tdComment.innerText = comment;
16     tr.appendChild(tdComment);
17     
18     tableComment.tBodies[0].appendChild(tr); //tBody是考虑兼容性问题
19 }
20 </script>
21 <head>
22 <body>
23 <table id="tableComment">
24     <tbody>
25     </tbody>
26 </table>
27 昵称：<input id="nickname" type="text" /><br />
28 <textarea id="comment"></textarea><br />
29 <input type="button" value="评论" onclick="AddComment()" />
30 </body>