document属性

•document是window对象的一个属性，因为使用window对象成员的时候可以省略window.，所以一般直接写document；
 
•document的方法：
            –（1）write：向文档中写入内容。writeln，和write差不多，只不过最后添加一个回车
                            –<input type="button" value="点击" onclick="document.write('<font color=red>你好</font>')" />
          –在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起
                          <script type="text/javascript">
                                  document.write('<font color=red>你好</font>');
                         </script>
         –write经常在广告代码、整合资源代码中被使用。
                               write经常在广告代码、整合资源代码中被使用
                              广告代码的例子：在http://heima8.com/注册一个账户（测试用 账户名：itcast0710 密码：123456），申请一个广告代码，然后放到页面中
                               整合资源的例子：百度新闻 http://news.baidu.com/newscode.html
                              百度新闻代码相当于页面中嵌入另外一个网站的js文件，js文件就是一个大的write语句，这样的好处就是主页面不用写死内容，被嵌入的js内容变了嵌入的内容就变了。
 
内容联盟、广告代码、cnzz，不需要被主页面的站长去维护内容，只要被嵌入的js内容提供商修改内容，显示的内容就变了。
 
•getElementById方法（非常常用），根据元素的Id获得对象，网页中id不能重复。也可以直接通过元素的id来引用元素，但是有有效范围、form1.textbox1之类的问题，因此不建议直接通过id操作元素，而是通过getElementById
View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6         function setText() {
 7             var txt = document.getElementById("t1");
 8             txt.value = "123";
 9             //t1.value = "123";
10         }
11         function setText2() {
12             var txt = document.getElementById("t2");
13             txt.value = "abc";
14            //form1.t2.value = "abc";
15         }
16     </script>
17 </head>
18 <body>
19     <input id="t1" type="text" value="" />
20     <form id="form1">
21         <input id="t2" type="text" value="" />
22     </form>
23     
24     <input type="button" value="按钮" onclick="setText()" />
25     <input type="button" value="按钮2" onclick="setText2()" />
26 </body>
27 </html>

（*）getElementsByName，根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementsByName返回值是对象数组。

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 2 
 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml" >
 5 <head>
 6     <title></title>
 7     <script type="text/javascript">
 8         function btnClick() {
 9             var chks = document.getElementsByName("hobby");
10               //错误,这样遍历的是数组的成员
11 //            for (var c in chks) {
12 //                alert(c);
13             //            }
14             for (var i = 0; i < chks.length; i++) {
15                 //alert(chks[i].value);//输出对象的value属性值
16                 chks[i].checked = "checked";
17             }
18         }
19 
20         function checkAll() {
21             //当全选复选框被选中时，其他复选框都选中
22             var chkAll = document.getElementById("chkAll");
23             
24             var chks = document.getElementsByName("hobby");
25             for (var i = 0; i < chks.length; i++) {
26                 chks[i].checked = chkAll.checked;
27             }
28         }
29         function reverseCheck() {//反选
30             var chks = document.getElementsByName("hobby");
31             for (var i = 0; i < chks.length; i++) {
32                 chks[i].checked = !chks[i].checked;
33             }
34         }
35         function checkSingle() {
36             var b = true;    //假设全被选中   
37             var chkAll = document.getElementById("chkAll");
38             var chks = document.getElementsByName("hobby");
39             for (var i = 0; i < chks.length; i++) {
40                 //查找所有子的checkbox，判断是否被选中
41                 //如果有一个checkbox没有被选中，则退出循环，最终全选的checkbox为false
42                 if (!chks[i].checked) {
43                     b = false;
44                     break;
45                 }
46             }
47             chkAll.checked = b;
48         }
49     </script>
50 </head>
51 <body>
52     <input type="checkbox" value="cf" onclick="checkSingle()" name="hobby"/>吃饭<br />
53     <input type="checkbox" value="sj" onclick="checkSingle()" name="hobby"/>睡觉<br />
54     <input type="checkbox" value="ddd" onclick="checkSingle()" name="hobby"/>打豆豆<br />
55     <br /><br />
56     <input id="chkAll" type="checkbox" onclick="checkAll()"/>全选
57     <input type="button" value="反选" onclick="reverseCheck()" />
58     
59     
60     <input type="button" value="全选" onclick="btnClick()" />
61    
62     <br />
63     <input type="checkbox" value="ctl" />春天里<br />
64     <input type="checkbox" value="xtl" />夏天里<br />
65 </body>
66 </html>


•（*）getElementsByTagName，获得指定标签名称的元素数组，比如getElementsByTagName("p")可以获得所有的<p>标签。

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6         function setAllText() {
 7             var txts = document.getElementsByTagName("input");
 8             for (var i = 0; i < txts.length; i++) {
 9                 if (txts[i].type == "text") {
10                     txts[i].value = i + 1;
11                 }
12             }
13         }
14     </script>
15 </head>
16 <body>
17     <input type="text" value="" />
18     <input type="text" value="" />
19     <input type="text" value="" />
20     <input type="text" value="" />
21     <input type="text" value="" />
22     <input type="text" value="" />
23     <input type="text" value="" />
24     <input type="text" value="" />
25     <input type="button" value="按钮" onclick="setAllText()" />
26 </body>
27 </html>

•案例：实现checkbox的全选，反选

•案例：点击一个按钮，被点击的按钮显示“呜呜”，其他按钮显示“哈哈”。
View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6         function init() {
 7             var btns = document.getElementsByTagName("input");
 8             for (var i = 0; i < btns.length; i++) {
 9                 if (btns[i].type == "button") { 
10                     //给按钮动态注册单击事件(并没有调用)
11                     btns[i].onclick = btnClick;
12                 }
13             }
14         }
15         
16         function btnClick() {
17             var btns = document.getElementsByTagName("input");
18             for (var i = 0; i < btns.length; i++) {
19                 if (btns[i].type == "button") {
20                     //判断按钮 是不是事件源
21                     if (btns[i] == window.event.srcElement) {
22                         btns[i].value = "呜呜";
23                     } else {
24                         btns[i].value = "哈哈";
25                     }
26                 }
27             }
28         }
29     </script>
30 </head>
31 <body onload="init()">
32     <input type="button" value="哈哈" />
33     <input type="button" value="哈哈"  />
34     <input type="button" value="哈哈" />
35     <input type="button" value="哈哈" />
36     <input type="button" value="哈哈" />
37     <input type="button" value="哈哈" />
38     <input type="text" value="" />
39 </body>
40 </html>


•案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。(btn.disabled = true )

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6         var times = 10;
 7         function count() {
 8             var btn = document.getElementById("btn");
 9             if (times > 0) {
10                 btn.value = "同意(倒计时" + times + ")";
11                 times--;
12             } else {
13                 btn.value = "同意";
14                 btn.disabled = false;
15                 clearInterval(tid);
16             }
17         }
18         var tid = setInterval("count()", 1000);
19     </script>
20 </head>
21 <body onload="count()">
22     注册协议
23     <br />
24     <input id="btn" type="button" value="同意" disabled="disabled" />
25 </body>
26 </html>

•练习：加法计算器。两个文本框中输入数字，点击【=】按钮将相加的结果放到第三个文本框中。parseInt()把字符串转换成整数

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6         function add() {
 7             var txt1 = document.getElementById("txtNum1");
 8             var txt2 = document.getElementById("txtNum2");
 9             var num1 = parseInt(txt1.value);
10             var num2 = parseInt(txt2.value);
11             var sum = num1 + num2;
12 
13             document.getElementById("txtSum").value=sum;
14         }
15     
16     </script>
17 </head>
18 <body>
19     <input id="txtNum1" type="text" /><input type="button" value="+" />
20     <input id="txtNum2" type="text" /><br />
21     <input type="button" value="=" onclick="add()" /><br />
22     <input id="txtSum" type="text" readonly="readonly" />
23 </body>
24 </html>

•练习：美女时钟。

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6         function getZero(num) {
 7             if (num < 10) {
 8                 return "0" + num;
 9             } else {
10                 return num;
11             }
12         }
13         
14         function setImage() {
15             var now = new Date();
16             var filePath = "mm/" + getZero(now.getHours()) + "_" + getZero(now.getSeconds()) + ".jpg";
17             var img = document.getElementById("i1");
18             img.src = filePath;
19         }
20         setInterval("setImage()", 1000);
21 
22 
23         function setTime() {
24             var now = new Date();
25             var time = getZero(now.getHours()) + ":" + getZero(now.getMinutes()) + ":" + getZero(now.getSeconds());
26             var txt = document.getElementById("txtTime");
27             txt.value = time;
28         }
29         setInterval("setTime()",1000);
30     </script>
31 </head>
32 <body onload="setImage();setTime()">
33     <input id="txtTime" type="text" value="" />
34     <br />
35     <img id="i1" src="" />
36 </body>
37 </html>


 

 
posted @ 2013-03-24 10:07  Big.Eagle  阅读(160)  评论(0)    收藏  举报