DOM

内容：使用JavaScript操作DOM进行DHtml开发。
目标：能够使用JavaScript操作DOM实现常见的DHtml效果。
参考书：张孝祥《JavaScript网页开发——体验式学习教程》

W3c最先将DOM应用于xml

Document Object Model（文档对象模型document）

DOM（文档对象模型）是HTML和XML的应用程序接口（API）。DOM将把整个页面规划成由节点层级构成的文档。

所谓文档对象模型，其实就是对网页HTML中的各种元素的一种内部的表示，例如HTML中的头、段落、列表、风格、ID等，所有的元素都能通过DOM来访问。
DOM可以被看作是一棵拥有很多互相关联的节点的树。

jQuery、JSON、Node.js

DHtml: Html + JavaScript+Css
Dynamic Html动态html

为什么要学习JavaScript操作DOM

JavaScript最终是要操作Html页面，让Html变成DHtml，而操作Html页面就要用到DOM。DOM就是把Html页面模拟成一个对象，就像XDocument一样，把Xml模拟成了一个对象，提供了操作各个节点的方法，直接调用就可以了。
如果JavaScript只是执行一些计算、循环等操作，而不能操作Html也就失去了它存在的意义。

DOM入门

DOM就是Html页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。 JavaScript→DOM就是C#→.Net Framwork。没有.net，C#只能for、while，连WriteLine、MessageBox都不行。DOM就是一些让JavaScript能操作Html页面控件的类、函数。DOM也像WinForm一样，通过事件、属性、方法进行编程。
CSS+JavaScript+DOM=DHtml
学习阶段只考虑IE。用IE Collection安装IE所有版本，学习使用IE6（要调试必须使用本机安装的版本）。//js DOM在不同的浏览器下支持不一样。(IETester)

Dom和js相当于 c#和类库
Console.WriteLine(‘aaaaaaaaaaaaaaaa’);
System.DateTime.Now
Console.WriteLIne();
FileStream fs=File.Open(‘’);
//这些功能其实都是调用的.net framework中已经有的类。

DOM模型和获取页面元素

<input type="button" name="name" value="按钮" id="btn" /> //name是为了提交,id是唯一标识，是不能相同的

事件

可以这样说吧,onclick后会触发一个方法,
onclick=f1;的意思就是说onclick触发的方法就是f1.
onclick=“f1()”的意思就是说onclick触发的方法里调用了f1

onclick=事件引发后的处理程序。
onclick=" f(this); "; //在onclick的事件处理程序中调用了f()方法
onclick=f;//该事件的处理程序就是f()方法。

动态设置事件

document.body.onclick范围仅限于body
document.onclick范围为整个文档。

=================================
 <script type="text/javascript">

        function btn1Click() {
            alert('按钮1被点击了');
        }
        function btn2Click() {
            alert('按钮2被点击了');
        }
        function changeClick() {
            document.getElementById(‘btn1’).onclick = f1;//btn1单击事件的事件处理程序指向了f1
            document.getElementById(‘btn2’).onclick = f2;//动态注册事件
        }
        function f1() {
            alert('我是f1方法');
        }
        function f2() {
            alert('我是f2方法');
        }
    </script>
--------------------
<body>
    <input type="button" id="btn1" name="name" value="按钮1" onclick="btn1Click();" />
    <input type="button" id="btn2" name="name" value="按钮2" onclick="btn2Click();" />
    <input type="button" id="btn3" name="name" value="按钮3" onclick="changeClick();" />
</body>

<head>
    <title></title>

    <script type="text/javascript">
        //要操作页面的元素(标签)那就要写到onload中,
    //不操作可以不用
       

        function f1() {
            alert('迁徙猿有很多猿');
        }

        onload = function () {

        //在html中注册事件加(),在这写不加
            document.getElementById('btn').onclick = f1;
        };
    </script>
</head>
<body>
    <input type="button" name="name" value="神奇的按钮" id="btn" />
    <!-- onclick="f1();"-->
</body>

为按钮注册事件

window对象(Dom中的一个顶级对象）

事件被触发后执行的那个函数就叫响应函数

var num = 100;

// alert(num);
window.alert(window.num);

function f1() {
window.alert('哈哈哈');
}

window.f1();

//在js中声明的变量,方法都属于window,所以window是顶级对象

window对象的方法

window对象的方法1

window.navigate(‘http://www.baidu.com’); 并不推荐,有些浏览器不行,空中可以

window对象的方法2

 //推荐这个
        //        window.setInterval(function () {
        //            alert('呵呵');
        //        }, 1000);
//效率低
        //window.setInterval("alert('哈哈');", 1000); 
        //        window.setInterval(ff,1000);
        //        function ff() {
        //            alert('呵呵');
        //        }

----------------------------------------练习让文本框的值自动加一,---------
 setInterval(function () {
            //            var tValue = document.getElementById('t1').value;
            //            var tt = parseInt(tValue);
            //            document.getElementById('t1').value = ++tt;
            //            var tt = parseInt(tValue) + 1;
            //            document.getElementById('t1').value = tt;
            var txtObj = document.getElementById('t1');//txtObj.value=++txtValue;
            //var tt = txtObj.value;
      //txtObj.value = ++tt;//一元运算符自动转再加
        }, 1000);
------------------------------点击按钮停止数字累加---------
 function stop(){
        clearInterval(setIntervalId);
        }





<input type="button" value="滚动" onclick="setInterval('scroll()', 500)" />
每调用一次setInterval都会产生一个新的定时器，并且旧的不会自动停止。所以看起来好像“越跑越快”！

clearInterval(setInterval('scroll()', 500))，错，不会停止原先的定时器，因为setInterval就产生一个新的定时器，刚产生就被clear。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>北京欢迎你</title>
    <script type="text/javascript">
        var timerId;
        function scroll() {
            var title = document.title;
            var lastCh = title.charAt(title.length - 1); //容易错
            var leftStr = title.substring(0, title.length - 1);
            document.title = lastCh + leftStr;
        }
        //每调用一次setInterval都会产生一个新的定时器，并且旧的不会自动停止。所以看起来好像“越跑越快”！
    </script>
</head>
<body>
<input type="button" value="滚动" onclick="if(timerId){clearInterval(timerId);}timerId=setInterval('scroll()', 500)" />
<input type="button" value="停止（错误写法）" onclick="clearInterval(setInterval('scroll()', 500))" />
<input type="button" value="停止" onclick="clearInterval(timerId)" />
</body>
</html>

案例

window对象的方法3

document.title = title.substr(title.length-1) + title.substr(0, title.length - 1);
document.title = title.charAt(title.length - 1) + title.substr(0, title.length - 1);
===============================按左按右跑马灯====
<script type="text/javascript">

        var direction = 'left';
        setInterval(function () {

            var tit = document.title
            if (direction == 'left') {

                document.title = tit.substr(1) + tit.charAt(0);
            } else {
                document.title = tit.charAt(tit.length - 1) + tit.substr(0,tit.length-1);
            }

        }, 1000);
        function setLeft() {
            direction = 'left';
        }
        function serRight() {
            direction = 'right';
        }
        window.onload = function () {

            document.getElementById('b1').onclick = setLeft;

            document.getElementById('b2').onclick = serRight;
        }
    </script>


============备注1==============================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var tid;
        function setTxtToTitle(obj) {
            if (tid) {
                clearTimeout(tid);
            }
            tid = setTimeout(function () { document.title = obj.value; }, 500);

        }
    </script>
</head>
<body>
    <input type="text" name="name" value="" id="txt" onkeyup="setTxtToTitle(this);" />
</body>
</html>



练习，标题栏走马灯：
①②③④⑤
        function scrollTitle() {
            var str = document.title;
            str = str.charAt(str.length - 1) + str.substring(0, str.length - 1);
            document.title = str;
        }
        setInterval("scrollTitle()", 500);

案例

<head>
    <title></title>

    <script type="text/javascript">

        //2秒，计时器,每隔2秒弹出一个对话框
    //该方法的返回值是该计时器的id
//      var setId= window.setInterval(function () {
//            alert('哈哈');
//        }, 200);
//      

//        onload = function () {
//            document.getElementById('btn').onclick = function () {
//                //清除该计时器
//                window.clearInterval(setId);
//            };
//        };
    </script>

    <script type="text/javascript">

    //计时器,---2秒后 执行方法中的内容,只执行一次
//       var setId= window.setTimeout(function () {
//            alert('hello');
//        }, 2000);


//        //清除该计时器
//        window.clearTimeout(setId);
    
    </script>
</head>
<body>
    <input type="button" name="name" value="停止计时器" id="btn" />
</body>

计时器练习

body、document对象的事件

 <script type="text/javascript">

        //页面加载后执行
        //        onload = function () {
        //            alert('第一次加载');
        //        };
        //        //页面中只能有一个onload
        //        onload = function () {
        //            alert('第二次加载');
        //        };
        //页面关闭后触发这个事件
        //        onunload = function () {
        //            alert('触发了这个事件');
        //        };
        //页面关闭前触发这个事件
        onbeforeunload = function () {
            alert('触发了这个事件');
        };
    </script>

三个事件的区别

<body onbeforeunload=“window.event.returnValue=‘r u sure?’”></body> //IE的写法
<body onbeforeunload=“event.preventDefault();”></body> //FF
//不同浏览器有差别，所以这里直接用了
<body onbeforeunload=“return ‘r u sure?’”></body>

其他事件

window对象的属性

window对象的属性1

    <script type="text/javascript">
        onload = function () {

            document.getElementById('btn').onclick = function () {

                //让页面重新导航,下面的方式在IE浏览器中可以,在火狐和谷歌浏览器中不行
                // window.navigate('http://www.baidu.com');
                //兼容的写法.每个浏览器都可以---以后就写这种方式
                window.location.href = 'http://www.baidu.com';
                //弹框的一个方法
                //                if (confirm('是否关闭?')) {
                //                    alert('关闭了');

                //                } else {
                //                    alert('取消关闭了');
                //                }
            };
        };
    
    </script>

window下的方法和属性

 window.onload = function () {
            document.getElementById('dv').onmousemove = function () {
                document.title = window.event.clientX +‘,’+ window.event.clientY+this.id;(获得这个层的id)
            }
        };
----------------------------标题显示坐标 
 document.getElementById('dv').onclick = function () {
                if (window.event.ctrlKey) {
                    alert('按下ctrl键子了');
                } else if (window.event.altKey) {
                    alert('按下了alt键子了');
                } else if (window.event.shiftKey) {
                    alert('按下了shitf');
                } else {
                    alert('普通按键');
                }
-------------------------------------按键

//在FF下的写法
        function BodyClickHandlerOnFF(e) {
            if (e.altKey) {
                alert('按下alt键');
            } else {
                alert('普通点击！');
            }
        }
<body onclick="BodyClickHandlerOnFF(event);">

//在IE下的写法
 //在IE下的写法
        function BodyClickHandler() {
            if (window.event.altKey) {
                alert('press alt key');
            } else {
                alert('normal click');
            }
        }
<body onclick="BodyClickHandler();">

===================================兼容的写法======================================================
 <script type="text/javascript">
        document.body.onmousemove = function () {
            if (window.event) {
                document.title = '(' + window.event.clientX + ',' + window.event.clientY + ')';
            } else {
                document.title = '(' + arguments[0].clientX + ',' + arguments[0].clientY + ')';
            }
        }
    </script>

    <script type="text/javascript">

       // onload = function () {

//            document.getElementById('dv').onmousemove = function () {


//                //兼容的写法
//                if (arguments.length>0) {
//                    //火狐
//                    document.title = arguments[0].clientX + '==' + arguments[0].clientY;
//                } else {
//                    //IE
//                    document.title = window.event.clientX + '==' + window.event.clientY;
//                }


                //通过下面的方式发现火狐浏览器有参数
                // alert(arguments.length);
                // alert(arguments[0]);
                //火狐的写法
               // document.title = arguments[0].clientX + '==' + arguments[0].clientY;
                //相对于页面的左上角的坐标,横坐标和纵坐标
                //document.title = window.event.clientX + '==' + window.event.clientY;
                //相对于屏幕左上角的坐标
                // document.title = window.event.screenX + '==' + window.event.screenY;
                //相对于当前层的左上角的坐标
                // document.title = window.event.offsetX + '==' + window.event.offsetY;
//            };
//        };
//    
    </script>

获取屏幕坐标各种兼容问题

window对象的属性2

 document.getElementById('dv').onmousemove = function () {
                document.title = window.event.screenX + ',' + window.event.screenY;
            }
==================屏幕坐标
 document.getElementById('aLink').onclick = function () {
                alert(new Date().toLocaleTimeString());
                if (!window.event.shiftKey) {
                    window.event.returnValue = false;//事件返回false return false;
                }
            };
<a id="aLink" href="http://www.baidu.com" >百度</a>

-------------------------点击a标签显示时间跳转另一个网页

<head>
    <title></title>
    <style type="text/css">
    
    img
    {
        position:absolute;/*完全脱离*/
        width:200px;
        height:150px;
        }
    </style>
    <script type="text/javascript">

        onload = function () {

            //第一步 脱离文档流  

            //第二步 设置事件
            document.onmousemove = function () {
                //第三步 设置坐标
                //获取图片
                var imObj = document.getElementById('im');
                imObj.style.left = window.event.clientX + 'px';
                imObj.style.top = window.event.clientY + 'px';
            };
        };
    
    </script>
</head>
<body>
    <img src="1.gif" id="im" />
</body>

图片飞来飞去案例

<head>
    <title></title>

    <script type="text/javascript">
    //页面加载
        onload = function () {

            document.getElementById('al').onclick = function (evt) {

                if (window.event.altKey) {
                    alert(new Date().toLocaleTimeString());
                    //阻止重新跳转
                    //取消默认事件
                    // window.event.returnValue = false;ie
                    //arguments[0].preventDefault();火狐
                    return false;//推荐的
                }
            };

        };
    
    </script>
</head>
<body>
    <a href="http://www.baidu.com" id="al">百度</a>
</body>

超链接显示时间(按alt键，点击的时候显示时间，且不跳转页面)案例

window对象的属性3

alert(this.value);
                alert(window.event.srcElement.value);
----------------------------对比
 document.getElementById('b1').onclick = function () {
                if (window.screen.width < 1024) {
                    alert('分辨率小');
                } else {
                    alert(window.screen.width);
                }
            };
----------------------检测分辨率

document.getElementById('d1').onmousedown = function () {
                alert(window.event.button);
            };
---------------------------------------鼠标



==================================备注1================================
 //It works on IE
        function MyEventHandler() {
            var obj = window.event.srcElement;
            alert(obj.value);
        }
<input type="button" value="click me!" onclick="MyEventHandler();" />


//FF
 //FF
        function MyEventHandlerFF(e) {
            var obj = e.target;
            alert(obj.value);
        }
 <input type="button" value="In FF Click me" onclick="MyEventHandlerFF(event);" />


//IE and FF
 function TNB(e) {
            if (e.target) {
                alert(e.target.value);
            } else if (e.srcElement) {
            alert(e.srcElement.value);
            }
        }

<head>
    <title></title>

    <script type="text/javascript">

        onload = function () {

        //判断分辨率

            document.getElementById('dv').onmousedown = function () {
                // alert(window.event.button);//获取鼠标键的值

                alert(window.screen.width); //获取当前的分辨率

            };
        };
    </script>
</head>
<body>
<div id="dv" style=" width:300px;height:200px; background-color:Gray;"></div>
</body>

event下的内容练习

window对象的属性4

 clipboardData.setData(‘text’, url);//赋值
                clipboardData.getData(‘text’);//粘贴

http://yanqing.readnovel.com/

-------------------
 document.body.oncopy = function () {
                alert('不让复制');
                return false;
-------------------禁止复制
 vartext= clipboardData.getData(‘text’)+‘本文出自小杨’;


 document.getElementById('t').onpaste = function () {
                alert('禁止粘贴');
                return false;
            };
------------------------禁止粘贴



<input type="button" value="推荐给好友" onclick="clipboardData.setData('Text','推荐给你一个网站，很好玩'+location.href);alert('已经将网址放到粘贴板中，发给你的好友即可');"/>

帐号：<input type="text" /><br />
重复帐号：<input type="text" onpaste="alert('为保证帐号的正确，请勿粘贴帐号');return false;" />

=========================================Firefox下使用clipboardData对象======================
 //Firefox下Clipboard的读写js脚本/**************************************************http://www.krikkit.net/howto_javascript_copy_clipboard.html将字符串maintext复制到剪贴板**************************************************/function setClipboard(maintext) {   if (window.clipboardData) {      return (window.clipboardData.setData("Text", maintext));   }   else if (window.netscape) {      netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');      var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);      if (!clip) return;      var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);      if (!trans) return;      trans.addDataFlavor('text/unicode');      var str = new Object();      var len = new Object();      var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);      var copytext=maintext;      str.data=copytext;      trans.setTransferData("text/unicode",str,copytext.length*2);      var clipid=Components.interfaces.nsIClipboard;      if (!clip) return false;      clip.setData(trans,null,clipid.kGlobalClipboard);      return true;   }   return false;}/**************************************************http://www.codebase.nl/index.php/command/viewcode/id/174返回剪贴板的内容**************************************************/function getClipboard() {   if (window.clipboardData) {      return(window.clipboardData.getData('Text'));   }   else if (window.netscape) {      netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');      var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);      if (!clip) return;      var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);      if (!trans) return;      trans.addDataFlavor('text/unicode');      clip.getData(trans,clip.kGlobalClipboard);      var str = new Object();      var len = new Object();      try {         trans.getTransferData('text/unicode',str,len);      }      catch(error) {         return null;      }      if (str) {         if (Components.interfaces.nsISupportsWString) str=str.value.QueryInterface(Components.interfaces.nsISupportsWString);         else if (Components.interfaces.nsISupportsString) str=str.value.QueryInterface(Components.interfaces.nsISupportsString);         else str = null;      }      if (str) {         return(str.data.substring(0,len.value / 2));      }   }   return null;}

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
    //页面加载
        onload = function () {
            //复制
            document.body.oncopy = function () {
            //时间间隔
                setTimeout(function () {
                    //获取粘贴板中的内容
                    var txt = clipboardData.getData('text') + '    本文出自于网络百度百科';
                    //设置内容
                    clipboardData.setData('text', txt); //设置
                }, 100);
             
            };

        };
    
    
    </script>
</head>
<body>
李白（公元701年－公元762年），字太白，号青莲居士，又号“谪仙人”。是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”。与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。其人爽朗大方，爱饮酒作诗，喜交友。天宝初，入长安，贺知章见了，称为谪仙人，荐于唐玄宗，待诏翰林。[1]
</body>
</html>

设置粘贴板的内容(粘贴的时候，顺便顺便加上其他信息)

window对象的属性5

 window.onload = function () {
            document.body.oncopy = function () {
                setTimeout(function () {
                    var t = clipboardData.getData('text') + '本文出自小杨';
                    clipboardData.setData('text', t);
                }, 10);
            };
        };
history操作历史记录。
window.history.back()后退；window.history.forward()前进。
window.history.go(-1)后退、window.history.go(1)前进

window对象的属性5-document

是换行 但
页面加载的时候一起使用,如果创建一个按钮动态添加点击事件后产生一个window.write();一点就没了
嵌入外部模块的时候使用

document.write的时候去百度找新闻
http://news.baidu.com/newscode.html

黑马广告联盟
http://heima8.com
yzk
123456


=========================站长统计=====================================
<SCRIPT language=JavaScript charset=gb2312 src="http://s23.cnzz.com/stat.php?id=613505&amp;web_id=613505&amp;show=pic2"></SCRIPT>
<A title=站长统计 href="http://www.cnzz.com/stat/website.php?web_id=613505" target=_blank><IMG border=0 hspace=0 vspace=0 src="http://icon.cnzz.com/pic2.gif"></A><IMG border=0 src="http://hzs13.cnzz.com/stat.htm?id=613505&amp;r=&amp;lg=zh-cn&amp;ntime=0.20273000 1323873730&amp;repeatip=1&amp;rtime=0&amp;cnzz_eid=16357578-1323873730-&amp;showp=1440x900&amp;st=31&amp;sin=&amp;res=0" width=0 height=0></DIV></DIV>


==========备注1===========
document.write('<pre>');
document.write('1');
document.writeln('2');
document.write('3');
document.write('</pre>');
这里是页面的内容。
<script type="text/javascript">
    document.write("<font color=red>红色呀</font>");
</script>
哈哈哈哈哈 。

write经常在广告代码、整合资源代码中被使用
广告代码的例子：在http://heima8.com/注册一个账户（测试用 账户名：itcast0710 密码：123456），申请一个广告代码，然后放到页面中
整合资源的例子：百度新闻 http://news.baidu.com/newscode.html
百度新闻代码相当于页面中嵌入另外一个网站的js文件，js文件就是一个大的write语句，这样的好处就是主页面不用写死内容，被嵌入的js内容变了嵌入的内容就变了。


脚本的好处：
1.自动执行
2.动态生成。
===================================example===============================
<script type="text/javascript">
        var reffer = "";
        var url = "";
        if (window.parent != window.self) {
            try { reffer = parent.document.referrer; }
            catch (err) { reffer = document.referrer; }
            try { url = parent.document.location; }
            catch (err) { url = document.location; }
        } else { reffer = document.referrer; url = document.location; }
        document.writeln("<iframe marginwidth='0' marginheight='0' frameborder='0' bordercolor='#000000' scrolling='no' src='http://pv.heima8.com/index.php?p=126292971&b=100002856&itemid1=107075271&reffer=" + escape(reffer) + "&url=" + escape(url) + "' width='468' height='60'></iframe>");
    </script>

==========================站长统计的============================
<script src="http://s84.cnzz.com/stat.php?id=3493955&web_id=3493955" language="JavaScript"></script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
       <style type="text/css">
        div
        {
            font-size: 12px;
            font-family: arial;
        }
        .baidu
        {
            font-size: 14px;
            line-height: 24px;
            font-family: arial;
        }
        a, a:link
        {
            color: #0000cc;
        }
        .baidu span
        {
            color: #6f6f6f;
            font-size: 12px;
        }
        a.more
        {
            color: #008000;
        }
        a.blk
        {
            color: #000;
            font-weight: bold;
        }
    </style>
    <script type="text/javascript">

        //        onload = function () {
        //            //如果在页面加载后使用,那么会把页面中其他的内容全部替换
        //        //可以动态创建元素
        //            document.write('<font face="全新硬笔行书简" color="red">这是html标签</font>');
        //        };
       
    
    </script>

    <script type="text/javascript">

        document.writeln('<a href="http://www.baidu.com">百度</a>');
        document.writeln('<a href="http://www.baidu.com">百度</a>');
        document.writeln('<a href="http://www.baidu.com">百度</a>');
    
    </script>
</head>
<body>
 
    <script language="JavaScript" type="text/JavaScript" src="http://news.baidu.com/ns?word=title%3A%E8%8B%B9%E6%9E%9C7&tn=newsfcu&from=news&cl=2&rn=5&ct=0"></script>
</body>
</html>

签入广告的代码

window对象的属性6-document

*表示全部
===================================备注1 ================================
//遍历直接子节点，如需获得所有节点，用递归。需要放在页面的最后测试（或者是在onload里面，否则页面还没有加载完毕。）
 var objHtml = document.documentElement;
        for (var i = 0; i < objHtml.childNodes.length; i++) {
            alert(objHtml.childNodes[i].nodeName);
        }
======================递归版本=========================
function dg(snodes){
//alert(snodes.nodeName+'   '+snodes.childNodes.length);

    for(var i=0;i<snodes.childNodes.length;i++)
    {
        alert(snodes.childNodes[i].nodeName);
        
        if(snodes.childNodes[i].childNodes.length>0){
            dg(snodes.childNodes[i]);
        }
        
    }
    
}
//放在body的onload事件中。
dg(document.documentElement);



//本来可以直接使用元素的Id来访问，但是如果元素嵌套在表单中后，就不能直接使用元素Id了
            //还需要window.form.元素id,所以我们一般用document.getElementById(元素id).该方法无论在哪里
            //都会搜索网页中的全部元素，找对应id的元素。
            document.getElementById('btn2').value = 'button';


            //如果在网页中有id重复的元素，那么getElementById()获得的是
            //第一id为指定id的元素，而不是数组
            var txtctrl = document.getElementById('txt1');

window对象的属性7-document

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        //页面加载
        onload = function () {

            //获取每个按钮

            var btns = document.getElementsByName('name');
            //为每个按钮注册一个单击事件
            for (var i = 0; i < btns.length; i++) {
                btns[i].onclick = function () {

                    //把每一个按钮都变成哭的内容
                    for (var j = 0; j < btns.length; j++) {
                        btns[j].value = '呜呜呜.....';
                    }
                    //当前这个按钮笑了
                    this.value = '哈哈..哈.';
                };
            }
        };
       
    
    
    </script>
</head>
<body>
    <input type="button" name="name" value="呜呜呜....." />
    <input type="button" name="name" value="呜呜呜....." />
    <input type="button" name="name" value="呜呜呜....." />
    <input type="button" name="name" value="呜呜呜....." />
    <input type="button" name="name" value="呜呜呜....." />
    <input type="button" name="name" value="呜呜呜....." />
</body>
</html>

点击一个按钮显示‘呜呜’，其他按钮显示’哈哈‘

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        onload = function () {

            //获取该按钮

            var btnObj = document.getElementById('btn');

            var i = 5;
            var setId = setInterval(function () {
                i--;
                if (i <= 0) {

                    clearInterval(setId); //清除计时器
                    btnObj.value = '同意';
                    //注意
                    btnObj.disabled = false;
                } else {
                    btnObj.value = '请仔细阅读协议(' + i + ')';
                }


            }, 1000);
        };
    
    </script>
</head>
<body>
<!--在html中属性和值一模一样-->
    <input type="button" name="name" value="请仔细阅读协议(5)" id="btn" disabled="disabled" />
</body>
</html>

十秒钟后协议文本框下注册按钮才能点击，时钟倒数

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript">

    //页面加载
        onload = function () {
            f1();
            setInterval(f1, 1000);

        };
    function f1() {

            //获取当前的时间,获取小时和秒

            var time = new Date();

            var h = time.getHours(); //获取小时
            h = h < 10 ? '0' + h : h; //时间要是小于10点,那么要在前面加个"0"


            var sec = time.getSeconds(); //秒
            sec = sec < 10 ? '0' + sec : sec;

            document.getElementById('im').src = 'images/' + h + '_' + sec + '.jpg';

        }
    
    </script>
</head>
<body>
    <img src="" id="im" />
    <!--span标签是非块级元素,要想和层一样,要设置display属性为block,如果想要层变成非块级元素(像span一样,那么要设置dsiplay为inline,设置为none没了)-->
  <!--  <span style=" display:block; width:300px;height:200px; background-color:Red;">哈哈</span>-->
</body>
</html>

美女时钟

 window.onload = function () {
            var inputElse = document.getElementsByTagName('input');
            for (var i = 0; i < inputElse.length; i++) {

                if (inputElse[i].type == 'button') {
                    inputElse[i].onclick = function () {

                        var inputObjs = document.getElementsByTagName('input');
                        for (var j = 0; j < inputObjs.length; j++) {
                            if (inputObjs[j].type=='button') {
                                inputObjs[j].value = '哈哈';
                            }
                            
                        }
                        this.value = '呜呜';
                    };
                }

            }
        };
==================================第一个
 window.onload = function () {
            var sec = 5;
            var setinid = setInterval(function () {
                sec = sec - 1;

                var btnObj = document.getElementById('bt1');
                if (sec > 0) {
                    btnObj.value = '请仔细阅读协议(' + sec + ')';
                } else {
                    btnObj.value = '同意';
                    btnObj.disabled = false;
                }
            }, 1000);
        };
=====================================第二个
 window.onload = function () {
            document.getElementById('btn1').onclick = function () {
                var n1 = document.getElementById('txt1').value;
                var n2 = document.getElementById('txt2').value;
                var sum = parseInt(n1) + parseInt(n2);
                document.getElementById('txt3').value = sum;
            };
        };
=============================================第三个
 window.onload = function () {
            f1();
            setInterval(f1,1000);
        };
        function f1() {
            //获得时间
            var nowTime = new Date();

            var hour = nowTime.getHours();
            var sec = nowTime.getSeconds();

            if (hour < 10) {
                hour = '0' + hour;
            }
            sec = sec < 10 ? '0' + sec : sec;

            var imgObj = document.getElementById('im');
            imgObj.src = 'img/' + hour + '_' + sec + '.jpg';
            imgObj.alt = hour + '_' + sec + '.jpg';
        }
================================第四个


案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。(btn.disabled = true )
思路：
1、注册按钮初始状态为不可用，disabled
2、启动定时器，setInterval，1秒钟运行一次CountDown方法，设定一个初始值为10的全局变量，在CountDown方法中对全局变量倒数，然后将倒数的值写到注册按钮上（请仔细阅读协议（还剩8秒））。
3、直到全局变量值为<=0，就让注册按钮可用，将按钮的文本设置为“同意”

================================================

 <script type="text/javascript">
function g(){
var ctrls=document.getElementsByTagName('input');
for(var i=0;i<ctrls.length;i++){
ctrls[i].value='哈哈';
}
window.event.srcElement.value='呜呜!!';
}
  </script>

事件冒泡

 <style type="text/css">
    div
    {
        width:300px;
        height:300px;
        background-color:Red;
        }
        p
        {
            width:100px;
            height:100px;
            background-color:Green;
            }
            span
            {
                background-color:Gray;
                }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            document.body.onclick = function () {
                alert(‘body被点击了’);alert(this.id);当前被触发的alert(window.event.srcElement.id);
            };
            document.getElementById('dv').onclick = function () {
                alert('div被点击了');
            };
            document.getElementById('p1').onclick = function () {
                alert('p被点击了');
            };
            document.getElementById('sp').onclick = function () {
                alert('span被点击了');
                window.event.cancelBubble = true;
            };
        };
    </script>
 <div id="dv">
        <p id="p1">
            <span id="sp">content</span>
        </p>
    </div>
==========================================事件冒泡 IE写法



//window.event.srcElement指最初引发事件的事件源（对象、元素）
            //alert('body click ' + window.event.srcElement.id);
            //this表示当前谁在执行事件，则this就表示哪个对象。

 <table onclick="alert('table onclick');">
        <tr onclick="alert('tr onclick');">
            <td onclick="alert('td onclick');"><p onclick="alert('p onclick');">aaaa</p></td>
            <td>bbb</td>
        </tr>
    </table>

<head>
    <title></title>
    <style type="text/css">
        div
        {
            width: 300px;
            height: 200px;
            background-color: Green;
            cursor: pointer;
        }
        p
        {
            width: 150px;
            height: 150px;
            background-color: pink;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">

        //事件冒泡:元素里面还有元素,为每个元素注册了相同的事件,一旦触发里面元素的事件,外面元素的事件也被触发了
        onload = function () {

            document.getElementById('dv').onclick = function () {
                //alert(this.id);//当前
                alert(window.event.srcElement.id); //事件源的id
            };
            document.getElementById('p1').onclick = function () {
                alert(this.id);
            };
            document.getElementById('st').onclick = function () {
                alert(this.id);
                //取消事件冒泡
                window.event.cancelBubble = true;//ie
                //火狐里怎么写---晚上回去查
                // window.event.returnValue = false;
                // return false;
            };
        };
    
    </script>
</head>
<body>
    <div id="dv">
        <p id="p1">
            <strong id="st">粗体</strong>
        </p>
    </div>
</body>

事件冒泡练习

事件中的this

onclick=f1;与onclick=f1();区别？

如果是在html标签里面给谁注册事件，那个方法名一定要加上括号；如果是在js里面是给哪个事件注册方法的话，直接写方法名或者匿名函数

This表示当前触发的对象,该事件注册给哪个对象this就表示哪个对象
Window.event.srcElement表示最初引发事件的对象

This表示当前触发的对象,该事件注册给哪个对象this就表示哪个对象
Window.event.srcElement表示最初引发事件的对象

===========================
 function f1() {
            alert(this.id);
            alert(typeof this);
        }
        window.onload = function () {
            document.getElementById('dv').onclick = f1;
        };
<div id="dv" onclick="f1();">
        呵呵
    </div>
================================================
This这个时候表示的是window对象
两种写法的区别
----------
缺什么写什么,写什么就有什么
Window虽然没有id，但是你写上了就有了

动态创建DOM

=====================常用方法与属性===========================
方法：
createElement(‘element’);创建一个节点
appendChild(node); 追加一个节点
removeChild(node);移除一个节点
replaceChild(new,old);替换一个节点
insertBefore(new,参照);把节点加到前面（插到某个节点前面）
属性：
firstChild
lastChild
===============================
document.getElementById('dvCreat').insertBefore(aLink,document.getElementById('dvCreat').firstChild);
=====================================插入到div中元素的前面去
document.getElementById('rem').onclick = function () {
                var dv = document.getElementById('dvCreat');
                while (dv.firstChild) {
                    dv.removeChild(dv.firstChild);
                }
            };
==============================把div中的所有元素删除
//通过js动态创建的元素，直接  右键→查看源码是看不到的，需要通过“开发人员工具”才能看到。s

nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是：元素类型 节点类型元素element 1属性attr 2文本text 3注释comments 8文档document 9
<![CDATA[
      <h1>This is the HTML to show in the element</h1>
   ]]>
document.createCDATASection
有时候在标签中如下:
<p> 你们好啊,<呵呵>hah<呵呵></p>有些时候不想把那些带尖括号的内容作为标签使用

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        onload = function () {
            //创建层的代码
            document.getElementById('btn').onclick = function () {

                //创建元素
                //创建一个层
                var dvObj = document.createElement('div');
                dvObj.id = 'dv'; //为层添加一个id
                //设置样式
                dvObj.style.width = '300px';
                //  dvObj.style.height = '200px';
                //在css中多个单词用-连接,但是到了js中-干掉,后面单词首字母大写
                dvObj.style.backgroundColor = 'yellow';
                //把元素添加到body中(追加到层中)
                document.body.appendChild(dvObj);
            };
            //创建按钮的代码
            var i = 0;
            document.getElementById('btnAddBtn').onclick = function () {
                i++;
                //不是button
                var inputObj = document.createElement('input');
                //设置是按钮
                inputObj.type = 'button';
                inputObj.value = '我是按钮' + i;
                //加到层里面去
                document.getElementById('dv').appendChild(inputObj);
            };

            //把按钮不是追加,而是添加到每个按钮的前面
            document.getElementById('btnInsert').onclick = function () {
                i++;
                //不是button
                var inputObj = document.createElement('input');
                //设置是按钮
                inputObj.type = 'button';
                inputObj.value = '按钮' + i;
                var dvObj1 = document.getElementById('dv'); //获取该层
                //插入
                dvObj1.insertBefore(inputObj, dvObj1.firstChild);
            };
            //删除所有的按钮

            document.getElementById('btnDelete').onclick = function () {

                var dvObj2 = document.getElementById('dv');
                while (dvObj2.firstChild) {//判断层中有没有第一个元素
                    dvObj2.removeChild(dvObj2.firstChild);//删除第一个
                }
            };

        };
    
    </script>
</head>
<body>
    <input type="button" name="name" value="创建一个层" id="btn" />
    <input type="button" name="name" value="创建一个按钮" id="btnAddBtn" />
    <input type="button" name="name" value="插入一个按钮" id="btnInsert" />
    <input type="button" name="name" value="删除层中所有的按钮" id="btnDelete" />

</body>
</html>

动态创建要素

innerText和innerHTML

window.onload = function () {
            document.getElementById('btn1').onclick = function () {
                alert(document.getElementById('dv').innerText);
            };

            document.getElementById('btn2').onclick = function () {
                alert(document.getElementById('dv').innerHTML);
            };
        };
-----------
 <input type="button" name="name" value="显示innerText" id="btn1" />
    <input type="button" name="name" value="显示innerHTML" id="btn2" />
<div id="dv">
北京<font color="red">传智播客</font>.Net培训,<font color="blue" size="7" face="华文行楷">小杨</font>
</div>

===============================innerText和innerHTML区别,这个是显示
document.getElementById('btn3').onclick = function () {
                document.getElementById('dv1').innerText = '北京<font color="red">传智播客</font>.Net培训,<font color="blue" size="7" face="华文行楷">小杨</font>';
            };
            document.getElementById('btn4').onclick = function () {
                document.getElementById('dv1').innerHTML = '北京<font color="red">传智播客</font>.Net培训,<font color="blue" size="7" face="华文行楷">小杨</font>';
            };
==============================这个是写入
 var dvObj = document.getElementById('dv');
            if (typeof (dv.innerText) == 'string') {
                dvObj.innerText = '<strong>哈哈</strong>';
            } else {
                dvObj.textContent = '<strong>哈哈</strong>';
            }
============================兼容的写法
上面的也属于能力检测




=========================备注1==============================
function ihd() {
            var vv = document.getElementById('dv1');
            if (typeof (vv.innerText) == 'string') {
                document.getElementById('dv1').innerText = '哈哈。。';
            } else {
                vv.textContent = '哈哈。。';
            }
        }

//innerText只能设置纯文本，即便写了html代码，也会对html代码进行编码，
//innerHTML可以设置html代码和纯文本。




============innerHTML与innerText示例=================
<script type="text/javascript">
        function showInfo() {
            var aObj = document.getElementById('a1');
            alert(aObj.innerHTML);
            alert(aObj.innerText);
        }
    </script>

<a id="a1" href="#"><font color="red">传</font>智<font color="green">播</font>客.net培训</a>
    <br />
    <input type="button" value="show innerText and innerHTML" onclick="showInfo();" />
===============================备注1===========================
<a id="a1" href="#"><font color="red">传</font>智<font color="green">播</font>客.net培训</a>
<script type="text/javascript">
        function showInfo() {
            var aObj = document.getElementById('a1');
            alert(aObj.innerHTML);
            alert(aObj.innerText); //获取去掉html标签的所有文本
        }
    </script>
=========================================outerText与outerHTML=====================================
将原来的元素直接替换。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript">

        onload = function () {
            var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" };


            document.getElementById('btn').onclick = function () {

                //创建表格

                var tbObj = document.createElement('table');
                tbObj.border = "1";
                for (var key in dic) {
                    //创建行

                    var trObj = document.createElement('tr');

                    //创建单元格
                    var tdObj1 = document.createElement('td');

                    if (typeof (tdObj1.innerText) == 'string') {
                        tdObj1.innerText = key; //文字
                    } else {
                        tdObj1.textContent = key;
                    }
                    var tdObj2 = document.createElement('td');
                    tdObj2.innerHTML = '<a href="' + dic[key] + '">' + key + '</a>';

                    //单元格加到行中

                    trObj.appendChild(tdObj1);
                    trObj.appendChild(tdObj2);

                    //行添加到表中
                    tbObj.appendChild(trObj);
                }
                //表添加到body中
                document.body.appendChild(tbObj);
            };
        };
    
    </script>
</head>
<body>
    <input type="button" name="name" value="创建表格" id="btn" />
</body>
</html>

动态创建表格案例

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript">


        onload = function () {

            document.getElementById('btn1').onclick = function () {
                //把内容以纯文本的形式写入到层中
                document.getElementById('dv').innerText = '<font face="全新硬笔行书简" color="red">这是层</font>';
            };
            document.getElementById('btn2').onclick = function () {
                //以html标签的效果展示
                document.getElementById('dv').innerHTML = '<font face="全新硬笔行书简" color="red">这是层</font>';
            };
            //=====================================================================
            document.getElementById('btn3').onclick = function () {
                //把元素中的(显示的)内容以文本的方式展示出来
                alert(document.getElementById('dv').innerText);
            };
            document.getElementById('btn4').onclick = function () {
                //把元素中的html形式展示出来
                alert(document.getElementById('dv').innerHTML);
            };
            document.getElementById('btn5').onclick = function () {
                //IE设置纯文本用innerText,火狐用的是textContent

                // document.getElementById('dv').textContent = '<a href="http://www.baidu.com">百度</a>';
                //能力检测
                if (typeof(document.getElementById('dv').innerText)=='string') {
                    document.getElementById('dv').innerText = '<font face="全新硬笔行书简" color="red">这是层</font>';
                } else {
                    document.getElementById('dv').textContent = '<a href="http://www.baidu.com">百度</a>';
                }
            };
        };
    
    </script>
</head>
<body>
    <input type="button" name="name" value="设置innerText" id="btn1" />
    <input type="button" name="name" value="设置innerHTML" id="btn2" />
    <input type="button" name="name" value="显示innerText" id="btn3" />
    <input type="button" name="name" value="显示innerHTML" id="btn4" />

    <input type="button" name="name" value="设置textContent(火狐)" id="btn5" />

    <div id="dv" style=" width:350px; height:250px; border:1px solid red;">
    </div>
</body>
</html>

innerText和innerHTML

练习

 window.onload = function () {
            document.getElementById('btnCreat').onclick = function () {
                var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" };
                //动态创建表格
                var tableObj = document.createElement('table');
                tableObj.border = '1';
                //创建表格中的行根据dic
                //创建表格的行
                for (var key in dic) {
                    var trObj = document.createElement('tr');
                    var tdObj1 = document.createElement('td');
                    tdObj1.innerText = key;
                    var tdObj2 = document.createElement('td');
                    tdObj2.innerHTML = '<a href="' + dic[key] + '">' + key + '</a>';
                    //把td加到tr中
                    trObj.appendChild(tdObj1);
                    trObj.appendChild(tdObj2);
                    //把行加到table中
                    tableObj.appendChild(trObj);
                }
                //把表格加到body中
                document.body.appendChild(tableObj);
            };
        };
======================第一个练习
window.onload = function () {

            document.getElementById('btn1').onclick = function () {
                //得到昵称和内容
                var userName = document.getElementById('txt').value;
                var tContent = document.getElementById('textContent').value;
                //创建行
                var trObj = document.createElement('tr');
                //创建列
                var tdObj1 = document.createElement('td');
                //把名字给这个列
                tdObj1.innerText = userName;
                //把行加到tr中
                trObj.appendChild(tdObj1);
                //=== 再创建列
                var tdObj2 = document.createElement('td');
                //把内容给这个列
                tdObj2.innerText = tContent;
                //把行加到tr中
                trObj.appendChild(tdObj2);
                //行加到tb中
                tb.appendChild(trObj);
            };
        };
============================


浏览器兼容性问题：
<table id="tableLinks">
<tbody></tbody>
</table>，然后tableLinks.childNodes[0].appendChild(tr);

浏览器兼容性问题

tb.tBodies[0].appendChild(trObj);
=========搞定ie6
 document.getElementById('btn').onclick = function () {
                var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" };
                var tb = document.createElement('table');
                tb.border = '1';
                for (var key in dic) {
                    var trObj = tb.insertRow(-1); //-1表示追加到后面,3表示追加到第三行,写上,不写可能有的浏览器不行
                    var tdObj1 = trObj.insertCell(-1);
                    tdObj1.innerHTML = key;
                    var tdObj2 = trObj.insertCell(-1);
                    tdObj2.innerHTML = '<a href="' + dic[key] + '">' + key + '</a>';
                }
                document.body.appendChild(tb);
            };
        };
    </script>
================================兼容写法







<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript">
        function AddComment() {
            var txtContent = document.getElementById('txtArea1').value; //获得评论文字
            var txtNickname = document.getElementById('txtNickname').value; ; //获得昵称


            var tableObj = document.getElementById('tabComment');
            var trTag = tableObj.insertRow(-1);
            var tdTag1 = trTag.insertCell(-1);
            tdTag1.innerHTML = txtNickname;
            var tdTag2 = trTag.insertCell(-1);
            tdTag2.innerHTML = txtContent;
            
        }
    </script>

</head>
<body>
    <div>
        简单来说解放路口的书法家第三方 fds放到书中的代码少了几行，不明白书中为何非要使用for/in循环，难道只是为了讲解for/in循环需要？ 对于上面这两个函数，我个人认为不够通用，因为将一个定义列表创建到文档的末尾可能会影响原有的布局，因此，我将abbr的title属性堤崛〕隼床迦氲剿趼杂锏暮竺妫⒂靡欢岳ê虐А４肴缦拢
    </div>
    <br />
    <table id="tabComment" border="1" width="500">
        <tr>
            <td>
                昵称
            </td>
            <td>
                品论内容
            </td>
        </tr>
    </table>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    输入您的评论：<textarea cols="10" rows="6" id="txtArea1"></textarea>
    <br />
    昵称：<input id="txtNickname" />
    <input type="button" value="提交评论" onclick="AddComment();" />
</body>
</html>

innerHTML还是操作Dom节点

代码是否需要放置到onload中

Js操作页面样式，其他

========================备注1==========================
if (typeof (dvObj.style.styleFloat) == 'string') {
                dvObj.style.styleFloat = 'right'; //ie的
            } else {
                dvObj.style.cssFloat = 'right';
            }

========================================================



 <style type="text/css">
        .emptyfield
        {
            background-color:Red;
        }
        .normal
        {
            background-color:inherit;
        }
    </style>
    <script type="text/javascript">
        function check(txt) {
            var s = txt.value;
            if (s.length <= 0) {
                txt.className = "emptyfield";
                alert('这个字段必填！');                
            }
            else {
                txt.className = "normal";
            }
        }
    </script>
<input type="text" onblur="check(this)" />
<input type="text" onblur="check(this)" />
<input type="text" onblur="check(this)" />

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .cls
    {
        width:300px;
        height:200px;
        background-color:Red;
        }
    
    </style>
    <script type="text/javascript">

        onload = function () {

            document.getElementById('btn').onclick = function () {
                //为层添加类样式,不是class
                document.getElementById('dv').className = 'cls';
            };
        };
    
    </script>
</head>
<body>
    <input type="button" name="name" value="添加样式" id="btn" />
    <div id="dv">

    </div>
</body>
</html>

为层添加类样式

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    div
    {
        width:300px;
        height:200px;
        background-color:Yellow;
        }
    
    </style>
    <script type="text/javascript">

        onload = function () {

            document.getElementById('btn').onclick = function () {
                var dvObj = document.getElementById('dv');
                if (typeof (dvObj.style.styleFloat) == 'string') {
                    dvObj.style.styleFloat = 'right';
                } else {
                    dvObj.style.cssFloat = 'right';
                }

            };
        };
    </script>
</head>
<body>
    <input type="button" name="name" value="浮动" id="btn" />
    <div id="dv">
    </div>
</body>
</html>

浮动div

案例练习

<head>
    <title></title>
    <script type="text/javascript">
        //案例1：创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。

        onload = function () {

            //获取所有的文本框
            var inputs = document.getElementsByTagName('input');
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type == 'text') {//是不是文本框
                    //为每个文本框注册一个光标离开的事件
                    inputs[i].onblur = function () {
                        if (this.value.length == 0) {
                            this.style.backgroundColor = 'red';
                        } else {
                            this.style.backgroundColor = '';//恢复为默认颜色
                        }
                    };
                }
            }
        };
    </script>
</head>
<body>
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="button" name="name" value="按钮" />
</body>
</html>

案例1：创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        onload = function () {

            document.getElementById('btn').onclick = function () {

                //这个是获取这个页面中所有的tr
                // var trs= document.getElementsByTagName('tr');
                //获取指定的表中的tr
                var trs = document.getElementById('tb').getElementsByTagName('tr');
                for (var i = 0; i < trs.length; i++) {
                    if (i % 2 == 0) {
                        trs[i].style.backgroundColor = '';
                    } else {
                        trs[i].style.backgroundColor = 'yellow';
                    }
                }
            };
        };
    
    </script>
</head>
<body>
    <input type="button" name="name" value="表格隔行变色" id="btn" />
    <table border="1" id="tb">
        <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
    </table>
</body>
</html>

案例2：点击按钮，表格隔行变色：偶数行为黄色背景，奇数行为默认颜色。通过table的getElementsByTagName取得所有的tr，依次遍历，如果是偶数就…………

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //鼠标移动到表格行，被点击的行高亮显示（背景是红色），其他行白色背景。监听每个tr的onclick事件，将点击的背景设置为黄色，其他的设置为白色背景。//对于table、div、span这类型元素没有onfocus（获取焦点的事件（无法触发这些事件。））
        onload = function () {

            //获取行

            var trs = document.getElementById('tb').getElementsByTagName('tr');
            for (var i = 0; i < trs.length; i++) {
                trs[i].onclick = function () {

                    for (var j = 0; j < trs.length; j++) {
                        trs[j].style.backgroundColor = '';
                    }
                    this.style.backgroundColor = 'red';

                };
            }
        };
    </script>
</head>
<body>
   <table border="1" id="tb" style=" cursor:pointer;">
        <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
    </table>
</body>
</html>

案例3：鼠标移动到表格行，被点击的行高亮显示（背景是红色），其他行白色背景。监听每个tr的onclick事件，将点击的背景设置为黄色，其他的设置为白色背景。//对于table、div、span这类型元素没有onfocus（获取焦点的事件（无法触发这些事件。））

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>评分控件好看版</title>
    <script type="text/javascript">

        function getCurrentIndex(curTd) {
            var tdArr = document.getElementById('tblVote').getElementsByTagName('td');
            for (var i = 0; i < tdArr.length; i++) {
                if (curTd == tdArr[i]) {
                    return i;
                }
            }
            return -1;
        }

        function initialEvent() {

            var tdArr = document.getElementById('tblVote').getElementsByTagName('td');

            for (var i = 0; i < tdArr.length; i++) {
                //为每个td设置分数
                tdArr[i].setAttribute("curScore", 10 * (i + 1));

                //绑定onmouseover事件
                tdArr[i].onmouseover = function () {
                    //设置鼠标指针为:手形
                    this.style.cursor = 'hand';
                    var tdArr = document.getElementById('tblVote').getElementsByTagName('td');
                    var curIndex = getCurrentIndex(this); //这里只能传this参数，不能传tdArr[i]

                    //将curIndex之前的五角星设置为：★
                    for (var j = 0; j <= curIndex; j++) {
                        tdArr[j].innerHTML = '★';
                    }
                    //将curIndex之后的五角星设置为：☆
                    for (var j = curIndex + 1; j < tdArr.length; j++) {
                        tdArr[j].innerHTML = '☆';
                    }

                }

                //绑定onclick事件
                tdArr[i].onclick = function () {
                    alert('您当前的评分为：' + this.getAttribute('curScore'));
                }
            }
        }
    </script>
</head>
<body onload="initialEvent();">
    <table id="tblVote" border="0" cellpadding="0" cellspacing="0" style="font-size: 40px;
        color: Blue">
        <tr>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
        </tr>
    </table>
</body>
</html>

补充：评分控件

onblur 鼠标失去焦点事件
onclick 单击事件
ondbclick双击事件
onfocus 得到焦点事件
onkeydown 键按下事件
onkeypress 键按下参数不一样
onkeyup 键按下抬起事件
onmousedown鼠标按下事件
onmousemove鼠标悬浮事件
onmouseover进来
onmouseout 出去
onmouseup 鼠标按下抬起

控制层的显示

        window.onload = function () {

            document.getElementById('xsc').onclick = function () {
                document.getElementById('dv').style.display = 'block';
            };
            document.getElementById('ycc').onclick = function () {
                document.getElementById('dv').style.display = 'none';
            };
            document.getElementById('xyc').onclick = function () {
                var dvObj = document.getElementById('dv');
                dvObj.style.display = (dvObj.style.display.length == 0) ? 'none' : '';
                //this.value = '显示';
            };
        };
-------------------
<body>
    <input type="button" name="name" value="显示层"  id="xsc"/>
    <input type="button" name="name" value="隐藏层" id="ycc"/>
    <input type="button" name="name" value="控制显示隐藏层" id="xyc" />
<div id="dv" >
    <input type="text" name="name" value=" " />
    <input type="button" name="name" value="呵呵" />
</div>
</body>
=====================================
 window.onload = function () {
            document.getElementById('linkLn').onmouseover = function () {

                //每次鼠标移上来的时候我先判断这里有没有这个元素,没有就创建,有就什么也不做
                //                if (!document.getElementById('dv1')) {
                //                    //创建一个层
                //                    var divObj = document.createElement('div');
                //                    divObj.style.width = '200px';
                //                    divObj.style.height = '200px';
                //                    divObj.style.border = '1px solid red';
                //                    divObj.id = 'dv1';
                //                    //把层添加到body中
                //                    document.body.appendChild(divObj);
                //}
                var divObj = document.createElement('div');
                divObj.style.width = '200px';
                divObj.style.height = '200px';
                divObj.style.border = '1px solid red';
                divObj.id = 'dv1';
                divObj.style.position = 'absolute';
                divObj.style.left = this.offsetLeft + 'px';
                divObj.style.top = this.offsetTop + this.offsetHeight + 'px';
                //把层添加到body中
                document.body.appendChild(divObj);
            };
            document.getElementById('linkLn').onmouseout = function () {
                if (document.getElementById('dv1')) {
                    document.body.removeChild(document.getElementById('dv1'));
                }
            };
        };
老牛网站:www.bpbike.com
====================================案例3

对于div、table、font、p这类型的标签时没有name属性的。
对于没有name属性的元素，如果仍要加个name属性。那么通过document.getElementsByName（）也无法获取到。
一般只有表单元素才有name属性。s

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    
    div
    {
        display:block;
        }
    </style>

    <script type="text/javascript">

        onload = function () {
            //隐藏
            document.getElementById('btnHidde').onclick = function () {

                document.getElementById('dv').style.display = 'none';
            };
            //显示
            document.getElementById('btnShow').onclick = function () {

                document.getElementById('dv').style.display = 'block';
            };
            //切换
            document.getElementById('btn').onclick = function () {
                var dvObj = document.getElementById('dv');
                alert(dvObj.style.display);
               
                if (dvObj.style.display == 'none') {
                    dvObj.style.display = 'block';
                } else {
                    dvObj.style.display = 'none';
                }
            };
        };
    </script>
</head>
<body>
    <input type="button" name="name" value="显示" id="btnShow" />
    <input type="button" name="name" value="隐藏" id="btnHidde" />
    <input type="button" name="name" value="显示/隐藏" id="btn" />
    <div id="dv" style=" width:300px; height:200px; background-color:Green;">
    </div>
</body>
</html>

层的显示与隐藏

动态设置元素的位置、大小

window.onload = function () {
            document.getElementById('btn').onclick = function () {
                document.getElementById('dv').style.overflow = 'hidden';
                var setintervalId = setInterval(function () {
                    var divObj = document.getElementById('dv');

                    //alert(divObj.offsetHeight);
                    var h = (divObj.offsetHeight - 5);
                    if (h <= 0) {
                        h = 0;
                        divObj.style.display = 'none';
                        clearInterval(setintervalId);
                    }
                    divObj.style.height = h + 'px';
                }, 100);
            };
        };




=============================层自动缩小，隐藏内容==================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {

            var tbObj = document.getElementById('tb');
            var trObj = tbObj.insertRow(1);
            var td1 = trObj.insertCell(-1);
            td1.innerHTML = 'T1';
            var td2 = trObj.insertCell(0);
            td2.innerHTML = 't2';

            document.getElementById('btn1').onclick = function () {

                var iid = setInterval(function () {
                    var h = document.getElementById('dv1').style.height;
                    h = parseInt(h) - 2;
                    if (h < 0) {
                        clearInterval(iid);
                        document.getElementById('dv1').style.display = 'none';
                    } else {
                        document.getElementById('dv1').style.height = h + 'px';
                        document.getElementById('dv1').style.overflow = 'hidden';
                    }
                }, 10);

               
            };

        };


    </script>
</head>
<body>
    <input type="button" name="name" value="close" id="btn1" />
    <div id="dv1" style="height: 300px; width: 200px; background-color: #00FF00">
        <input type="button" name="name" value="bbbbbbbbbbbbbbbbbbbbb" />
        <br />
        <input type="text" name="name" value=" " />
        <table id="tb" border="1" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    AA
                </td>
                <td>
                    BB
                </td>
            </tr>
            <tr>
                <td>
                    CC
                </td>
                <td>
                    DD
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript">

        onload = function () {

            //动态创建的

            document.getElementById('al').onmouseover = function () {

                //层只能创建一次
                if (!document.getElementById('dv')) {
                    //document.body.removeChild(document.getElementById('dv'));
                    //创建层
                    var dvObj = document.createElement('div');
                    dvObj.id = "dv";
                    //创建图片标签
                    var imObj = document.createElement('img');
                    imObj.src = '小赵.jpg';
                    //图片加到div中
                    dvObj.appendChild(imObj);

                    //脱离文档流

                    dvObj.style.position = 'absolute';
                    dvObj.style.left = this.offsetLeft + 'px'; //左侧距离
                    //上面距离
                    dvObj.style.top = this.offsetTop + this.offsetHeight + 'px';

                    //层加到body中
                    document.body.appendChild(dvObj);
                }

            };
            document.getElementById('al').onmouseout = function () {

                if (document.getElementById('dv')) {
                    document.body.removeChild(document.getElementById('dv'));
                }
            };
        };
    
    </script>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
曾经有个人在传智播客讲课,<a id="al" href="http://www.itcast.cn">小黑</a>这个人很猥琐是谁？
</body>
</html>

超链接显示图片

IE中body的事件范围

 window.onload = function () {
            //document.body.onclick = function () {
            //alert('呵呵');
            //};
            document.onclick = function () {
                alert('呵呵');
            };
        };
====================
document.onmousemove = function () {
                var imgObj = document.getElementById('im');

                imgObj.style.position = 'absolute';
                //                imgObj.style.left = window.event.clientX + 'px';
                //                imgObj.style.top = window.event.clientY + 'px';
                imgObj.style.left = window.event.clientX - imgObj.offsetWidth + 'px';
                imgObj.style.top = window.event.clientY - imgObj.offsetHeight + 'px';
            };
====================鼠标移动显示图片


<html>
 <head>
  <title> new document </title>
  <script type="text/javascript">
  function f1(){
  /*
      document.body.onmousedown=function(){
      alert('click');
        }
        */
        document.onmousedown=function(){
      alert('click');
        }
  }
    
  </script>
 </head>

 <body>
  <input type="button" value="set click" onclick="f1();"/>
  aaa<br/>aaa<br/>
 </body>
</html>

层的操作

 width:300px;
        border:1px solid red;
        overflow:hidden;
        word-break:break-all;


Td单元格中如果什么都不写，则设置边框不会有显示效果，设置高度、宽度+背景色可以显示。

1、点击按钮层变大：
<div id="testDiv" style="position:absolute;width:0px;height:0px;top:100px;height:100px">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈爱好哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈爱好哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
<input type="button" value="show" onclick="document.getElementById('testDiv').style.width=200;document.getElementById('testDiv').style.height=20;" />
2、点击按钮层动态变大。
 <script type="text/javascript">
        var slideShowIntervalId;
        
        function slideShow() {
            var testDiv = document.getElementById('testDiv');
            var hasChange = false;
            var oldWidth = parseInt(testDiv.style.width, 10);
            var oldHeight = parseInt(testDiv.style.height, 10);
            if (oldWidth <= 200) {
                testDiv.style.width =( oldWidth+10)+"px";
                hasChange = true;
            }
            if (oldHeight <= 20) {
                testDiv.style.height = (oldHeight+1)+"px";
                hasChange = true;
            }
            if (!hasChange) {
                clearInterval(slideShowIntervalId);
            }
        }
    </script>
<div id="testDiv" style="position:absolute;width:0px;height:0px;top:100px;height:100px;border-color:Green;border-style:dotted;border-width:1px;">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈爱好哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
<input type="button" value="缓慢显示" onclick="slideShowIntervalId=setInterval('slideShow()',100)" />


===============图片跟着鼠标走=======================
<img id="img1" src="1.gif" />
function picMove(){
    var x=window.event.clientX;
    var y=window.event.clientY;
    
            document.getElementById('img1').style.position='absolute';
            document.getElementById('img1').style.left=x;
        document.getElementById('img1').style.top=y;
        document.title=x+','+y;
    }

问题

Alert(window.navigator.userAgent);//检测浏览器

==============
window.onload = function () {
            var tds = document.getElementById('tb').getElementsByTagName('td');
            for (var i = 0; i < tds.length; i++) {
                tds[i].setAttribute('score',(i+1)*10);
                tds[i].onclick = function () {
                    alert(this.getAttribute('score'));
                };
            }
        };

===========================备注1===================================
try {
                var rd1 = document.createElement('<input type="radio" name="gender"/>');
                var rd2 = document.createElement('<input type="radio" name="gender"/>');
                document.body.appendChild(rd1);
                document.body.appendChild(rd2);
            } catch (err) {
                var rd1 = document.createElement('input');
                rd1.type = 'radio';
                rd1.name = 'gender';

                document.body.appendChild(rd1);

                var rd2 = document.createElement('input');
                rd2.type = 'radio';
                rd2.name = 'gender';

                document.body.appendChild(rd2);
            }

<head>
    <title></title>

    <script type="text/javascript">

        onload = function () {
            alert(window.navigator.userAgent); //检测浏览器

            //页面加载后每个单元格会自动的添加一个属性还有值
            var tds = document.getElementById('tb').getElementsByTagName('td');
            for (var i = 0; i < tds.length; i++) {
                tds[i].setAttribute('score', (i + 1) * 10);
                tds[i].onclick = function () {
                    alert(this.getAttribute('score'));//获取每个单元格的属性的值
                };
            }

        };
    
    </script>
</head>
<body>
    <input type="button" name="name" value="显示效果" id="btn" />
    <table border="1" id="tb">
        <tr>
            <td>
                第1个
            </td>
            <td>
                第2个
            </td>
            <td>
                第3个
            </td>
            <td>
                第4个
            </td>
            <td>
                第5个
            </td>
        </tr>
    </table>
</body>
</html>

添加自定义属性

案例练习

 <script type="text/javascript">

        var datas = {
            "mv/1-1.jpg": ["mv/1.jpg", "老牛", "163cm"],
            "mv/2-1.jpg": ["mv/2.jpg", "老马", "165cm"],
            "mv/3-1.jpg": ["mv/3.jpg", "老蒋", "150cm"]
        };

        window.onload = function () {
            var dv1Obj = document.getElementById('dvSmall');
            for (var key in datas) {
                var imgSmall = document.createElement('img');
                imgSmall.src = key;
                imgSmall.setAttribute('urlKey',key);
                imgSmall.style.marginRight = '10px';
                dv1Obj.appendChild(imgSmall);

                imgSmall.onmouseover = function () {
                    var dv2Obj = document.getElementById('dvBig');
                    dv2Obj.style.position = 'absolute';
                    dv2Obj.style.left = this.offsetLeft + 'px';
                    dv2Obj.style.top = this.offsetTop + this.offsetHeight + 'px';
                    dv2Obj.style.display = 'block';


                    var vals = datas[this.getAttribute('urlKey')];

                    document.getElementById('imBig').src = vals[0];
                    document.getElementById('spName').innerHTML = vals[1];
                    document.getElementById('spHeight').innerHTML = vals[2];
                };
                imgSmall.onmouseout = function () {
                    var dv2Obj = document.getElementById('dvBig');
                    dv2Obj.style.display = 'none';
                };
            }
        };
    
    </script>

=============================练习点小图看大图
 <div id="dvSmall">
    </div>
    <div id="dvBig" style=" background-color:Orange; border:1px solid green; width:630px; display:none;">
    大头像:<br />
        <img id="imBig" src="#" alt="Alternate Text" />
        姓名:<span id="spName"></span><br />
        身高:<span id="spHeight"></span>

    </div>
======================
======================
Js操作样式
 <style type="text/css">
    .cls1
    {
        width:300px;
        height:200px;
        background-color:Green;
        border:1px solid red;
        }
    .cls2
    {
        color:Orange;
        font-size:50px;
        font-family:全新硬笔行书简;
        }
    </style>
    <script type="text/javascript">

        window.onload = function () {
            document.getElementById('btn1').onclick = function () {
                document.getElementById('dv').className = 'cls1';
            };
            document.getElementById('btn2').onclick = function () {
                document.getElementById('dv').className += ' cls2';
            };
        };
    </script>




=============关于练习1中层内容的一些布局========================================
<div id="loginDiv" style="display:block;background-color:green;width:250px;height:150px;">

    用户名：<input type="text" size="20" /><br/>
    密码：<input type="password"/>

    <span style="color:red;position:relative;right:0px;top:100px;" onclick="document.getElementById('loginDiv').style.display='none';">关闭</span>
  </div>
======================================================
<div id="loginDiv" style="display:block;background-color:green;width:250px;height:150px;">
<img src="1.gif" width="15" height="15" style="float:right;"/>
<table style="clear:both;">
<tr><td>

用户名：<input type="text" size="20" /><br/>
    密码：<input type="password"/>

    <span style="color:red;position:relative;right:0px;top:100px;" onclick="document.getElementById('loginDiv').style.display='none';">关闭</span>
</td></tr>
    
    </table>
  </div>
var datas = {
            "images/1-1.jpg": ["images/1.jpg", "张三", "178cm"],
            "iamges/2-1.jpg": ["images/2.jpg", "李四", "180cm"],
            "iamges/3-1.jpg": ["images/3.jpg", "王五", "170cm"]
        };


==================备注3====================
document.getElementById('tab1').getElementsByTagName('td')[0].getElementsByTagName('img')[0].src='1.gif‘
===========================练习2的数据格式=======================
var datas={"小图":["大图","姓名",""身高],"":["","",""]}

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript">


        onload = function () {

            document.getElementById('btnLogin').onclick = function () {

                //判断层是否存在
                if (!document.getElementById('dv')) {
                    var dvObj = document.createElement('div');
                    dvObj.id = "dv";
                    dvObj.style.width = "307px";
                    dvObj.style.height = '150px';
                    dvObj.style.border = '1px solid red';
                    dvObj.style.position = 'absolute'; //脱离文档流
                    dvObj.style.left = '250px';
                    dvObj.style.top = '200px';
                    //创建个span标签
                    var spObj = document.createElement('span');
                    spObj.innerText = '关闭';
                    //样式
                    spObj.style.cursor = 'pointer';
                    spObj.onclick = function () {
                        document.body.removeChild(dvObj); //删除层
                    };
                    spObj.style.styleFloat = 'right';
                    dvObj.appendChild(spObj);
                    //创建2个p标签
                    var pObj1 = document.createElement('p');
                    pObj1.innerText = '帐号:';
                    var txtName = document.createElement('input'); //文本框
                    txtName.type = 'text';
                    pObj1.appendChild(txtName);
                    pObj1.style.marginLeft = '10px';
                    //p标签添加到div中
                    dvObj.appendChild(pObj1);
                    //======================================
                    //创建2个p标签
                    var pObj2 = document.createElement('p');
                    pObj2.innerText = '密码:';
                    var txtPwd = document.createElement('input'); //文本框
                    txtPwd.type = 'text';
                    pObj2.appendChild(txtPwd);
                    pObj2.style.marginLeft = '10px';
                    //p标签添加到div中
                    dvObj.appendChild(pObj2);

                    //添加到body中
                    document.body.appendChild(dvObj);
                }

            };
        };
    </script>
</head>
<body>
    <input type="button" name="name" value="登录" id="btnLogin" />
</body>
</html>

练习1：点击【登录】按钮，弹出一个显示用户名、密码等的层。将用户名、密码等写到一个层中，层默认是隐藏的，点击【登录】超链接以后将层显示出来，如果点击层中的关闭按钮，则隐藏层。绝对定位，显示到中间位置。document.body.clientWidth(获取页面的width)//高度，注意body的默认范围。（去掉

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript">

        var datas = {
            "mv/1-1.jpg": ["mv/1.jpg", "老牛", "163cm"],
            "mv/2-1.jpg": ["mv/2.jpg", "老马", "165cm"],
            "mv/3-1.jpg": ["mv/3.jpg", "老蒋", "150cm"]
        };

        onload = function () {

            //加载所有的小图
            //创建图片标签
            for (var key in datas) {
                var imgSmall = document.createElement('img');
                imgSmall.src = key;
                //坑
                imgSmall.setAttribute('key', key);
                imgSmall.style.marginLeft = '10px';

                imgSmall.style.cursor = 'pointer';
                //把小图添加到层中
                document.getElementById('dvSmall').appendChild(imgSmall);
                //鼠标进入
                imgSmall.onmouseover = function () {
                    var dvObj = document.getElementById('dvBig');
                    dvObj.style.display = 'block';
                    dvObj.style.position = 'absolute';
                    dvObj.style.left = this.offsetLeft + 'px';
                    dvObj.style.top=this.offsetTop + this.offsetHeight + 'px';
                   // for (var i = 0; i < datas[this.getAttribute('key')].length; i++) {
                        document.getElementById('imBig').src = datas[this.getAttribute('key')][0];
                        document.getElementById('spName').innerText = datas[this.getAttribute('key')][1];
                        document.getElementById('spHeight').innerText = datas[this.getAttribute('key')][2];
                  //  }

                };

            }


        };
    
    </script>
</head>
<body>
 <div id="dvSmall">
    </div>
    <div id="dvBig" style="background-color: Orange; border: 1px solid green; width: 630px;
        display: none;">
        大头像:<br />
        <img id="imBig" src="#" alt="Alternate Text" />
        姓名:<span id="spName"></span><br />
        身高:<span id="spHeight"></span>
    </div>

</body>
</html>

练习2：一幅图片。点击小图，弹出一个层在点击的位置显示小图对应的大图，并且显示姓名、身高等信息，点击层中的关闭按钮关闭层。进阶：元素的额外属性。动画效果的显示出来。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        onload = function () {
            //全选
            document.getElementById('btnAll').onclick = function () {

                var cks = document.getElementsByName('ck1');
                for (var i = 0; i < cks.length; i++) {
                    cks[i].checked = true;
                }
            };

            //全不选
            document.getElementById('btnNoAll').onclick = function () {

                var cks = document.getElementsByName('ck1');
                for (var i = 0; i < cks.length; i++) {
                    cks[i].checked = false;
                }
            };
            //反选
            document.getElementById('btnFanXuan').onclick = function () {

                var cks = document.getElementsByName('ck1');
                for (var i = 0; i < cks.length; i++) {
                    cks[i].checked = !cks[i].checked;
                }
            };
        };
    
    </script>
</head>
<body>
    <input type="button" name="name" value="全选" id="btnAll" />
    <input type="button" name="name" value="全不选" id="btnNoAll" />
    <input type="button" name="name" value="反选" id="btnFanXuan" />
    <br />
    <input type="checkbox" name="ck1" value="1" />吃饭
    <input type="checkbox" name="ck1" value="2" />睡觉
    <input type="checkbox" name="ck1" value="3" />打豆豆
    <input type="checkbox" name="ck1" value="4" />打足球
    <input type="checkbox" name="ck1" value="5" />打铅球
</body>
</html>

全选和全不选

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        onload = function () {

            var lis = document.getElementById('uu1').getElementsByTagName('li');
            for (var i = 0; i < lis.length; i++) {
                lis[i].onmouseover = function () {//鼠标进入

                    this.style.backgroundColor = 'red';
                };
                lis[i].onmouseout = function () {//鼠标离开
                    this.style.backgroundColor = '';
                };
            }
        };
    
    </script>
</head>
<body>
    <ul id="uu1" style=" cursor:pointer;">
        <li>热火</li>
        <li>湖人</li>
        <li>火箭</li>
        <li>骑士</li>
        <li>马刺</li>
        <li>凯尔特人</li>
        <li>灰熊</li>
    </ul>
</body>
</html>

练习：界面上有几个球队名字的列表，将鼠标放到球队名字上就变为红色背景，其他球队背景颜色为白色，点击一个球队的时候就将点击的球队变为fontSize=30字体(fontSize=‘’回到默认)。Ul→li

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        onload = function () {

            //获取文本框注册获得焦点的事件
            document.getElementById('txt').onfocus = function () {

                if (this.value == '请输入搜索关键词' && this.style.color == 'gray') {
                    this.value = '';
                    //改变字体颜色
                    this.style.color = 'black';
                }
            };
            //失去焦点
            document.getElementById('txt').onblur = function () {

                if (this.value == '') {
                    this.style.color = 'gray';
                    this.value = '请输入搜索关键词';
                }
            };
        };
    
    </script>
</head>
<body>
    <input type="text" name="name" value="请输入搜索关键词" style=" color:Gray;" id="txt" />
</body>
</html>

有一个搜索文本框，焦点不在文本框中的时候，如果文本框没有值，则文本框中显示灰色文本（Gray）的“输入搜索关键词”，否则显示用户输入的值；焦点在文本框中时如果之前显示“输入搜索关键词”则清空文本框的值，并且将文本修改为黑色

 window.onload = function () {
            var lis = document.getElementById('uGame').getElementsByTagName('li');

            for (var i = 0; i < lis.length; i++) {
                lis[i].onmouseover = function () {
                    for (var j = 0; j < lis.length; j++) {
                        lis[j].style.backgroundColor = '';
                    }
                    this.style.backgroundColor = 'red';
                };

                lis[i].onclick = function () {
                    for (var j = 0; j < lis.length; j++) {
                        lis[j].style.fontSize = '';
                    }
                    this.style.fontSize = '50px';
                };
            }
        };
==========================练习题1
<script type="text/javascript">
        window.onload = function () {
            f1();
            setInterval(f1, 1000);
        };
        function f1() {
            var nowTime = new Date();

            document.getElementById('dv').innerHTML = nowTime.toLocaleTimeString();
        }
    </script>
==============================练习题2
window.onload = function () {
            cssText();
            document.getElementById('search').onfocus = function () {
                if (this.value == '输入搜索关键'&&this.style.color=='gray') {
                    this.value = '';
                    this.style.color = 'black';
                }
            };
            document.getElementById('search').onblur = function () {
                if (this.value.length == 0) {
                    this.value = '输入搜索关键';
                    this.style.color = 'gray';
                }
            };
        };
        function cssText() {
            var txt = document.getElementById('search');
            txt.style.color = 'gray';
        }
====================


var datas={
"images/1-1.jpg":["images/1.jpg","张三","178cm"],
"images/2-1.jpg":["images/2.jpg","李四","177cm"],
"images/3-1.jpg":["images/3.jpg","王五","179cm"]
};

================javascript去掉字符串两端空格===============================
<script language="javascript">　　 String.prototype.trim=function(){　　    return this.replace(/(^\s*)|(\s*$)/g, "");　　 }　　 String.prototype.ltrim=function(){　　    return this.replace(/(^\s*)/g,"");　　 }　　 String.prototype.rtrim=function(){　　    return this.replace(/(\s*$)/g,"");　　 }　　</script>　　写成函数可以这样：(trim(str))　　<script type="text/javascript">　　 function trim(str){ //删除左右两端的空格　　     return str.replace(/(^\s*)|(\s*$)/g, "");　　 }　　 function ltrim(str){ //删除左边的空格　　     return str.replace(/(^\s*)/g,"");　　 }　　 function rtrim(str){ //删除右边的空格　　     return str.replace(/(\s*$)/g,"");　　 }　　</script>

form对象

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        onload = function () {


            document.getElementById('fm').onsubmit = function () {

                if (document.getElementById('txt').value == '') {
                    return false;
                }
            };

            document.getElementById('dv').onclick = function () {
                //调用提交按钮的单击
                 document.getElementById('sm').click();
                //第二种方式
               // document.getElementById('fm').submit(); //表单的提交方法
            };
        };
    
    </script>
</head>
<body>
    <form action="http://www.baidu.com/?" method="get" id="fm">

     <input style=" width:300px" type="text" name="name" value="" id="txt" />
    <input type="submit" name="name" value="百度一下" id="sm" />
    <div id="dv" style=" width:300px; height:200px; background-color:Green;">
    </div>
    </form>
   
</body>
</html>

关于提交

 window.onload = function () {

            document.getElementById('fm').onsubmit = function () {
                var tt= document.getElementById('txt').value;
                if (tt.length == 0) {
                    return false;
                }
            };

            document.getElementById('dv').onclick = function () {
                //手动触发click
                //document.getElementById('subm').click();
                //调表单的submit 
                
                document.getElementById('fm').submit();
            };
        };
=========================不点提交按钮如何提交

autopost
 <form name="form1" action="a.aspx" method="get">
        <input type="text" onblur="form1.submit()" />
        <input type="text" />        
    </form>


autopost
 <form name="form1" action="a.aspx" method="get">
        <input type="text" onblur="form1.submit()" />
        <input type="text" />        
    </form>

不同浏览器的差异（*）

============================================
window.addEventListener('load', function () {
            alert('listener1');
        }, false);

        //第三个参数false，表示是在事件冒泡阶段触发，true表示在事件捕获阶段触发。
        window.addEventListener('load', function () {
            alert('listener2');
        }, false);
=============IE下的写法===========================
 window.attachEvent('onload', function () {
        alert('qqq');
        });
        window.attachEvent('onload', function () {
        alert('cccc');
        });

============删除事件=====================
window.detachEvent('onload', 方法名);
window.removeEventListener('load',方法名,false);

JS中的正则表达式

 var postcode = '123456sda';
        //创建正则表达式的对象
//        var reg = new RegExp('^[0-9]{6}$');
        //        var reg = new RegExp('^\\d{6}$');
        var reg = /\d{6}/;
        var isOk = reg.test(postcode);

        alert(isOk);
=========================例子
 var msg = '中国移动:10086,中国联通:10010,中国电信:10000';
        //创建对象
        //var reg = /\d+/;
        //var reg = /\d(\d)\d+/; //提取里面的第二个,
        //var reg=/(\d)(\d)(\d+)/;//提取多个组
        var reg = /\d+/g; //后面加个g的时候表示的是全局模式,
        //var vals = reg.exec(msg); //始终提取的是匹配的第一个结果
        //alert(vals);
        //alert(reg.exec(msg));
        //alert(reg.exec(msg));
        //alert(reg.exec(msg)); //最后一个为null
        var result;
        while (result = reg.exec(msg)) {
            alert(result);
        }
 var reg = /(\d)(\d)+/g;
提取组是一样的
=======================例子调用exec
RegExp 对象
RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
直接量语法
/pattern/attributes 创建 RegExp 对象的语法：
new RegExp(pattern, attributes); 参数
参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串，包含属性 “g”、“i” 和 “m”，分别用于指定全局匹配、忽略大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。
返回值
一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。
如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern 是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。

exec() 方法的功能非常强大，它是一个通用的方法，而且使用起来也比 test() 方法以及支持正则表达式的 String 对象的方法更为复杂。
如果 exec() 找到了匹配的文本，则返回一个结果数组。否则，返回 null。此数组的第 0 个元素是与正则表达式相匹配的文本，第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本（如果有的话），第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本（如果有的话），以此类推。除了数组元素和 length 属性之外，exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。我们可以看得出，在调用非全局的 RegExp 对象的 exec() 方法时，返回的数组与调用方法 String.match() 返回的数组是相同的。
但是，当 RegExpObject 是一个全局正则表达式时，exec() 的行为就稍微复杂一些。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时，在匹配后，它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说，您可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时，它将返回 null，并把 lastIndex 属性重置为 0。

string的正则表达式方法

 window.onload = function () {
            document.getElementById('txt').onblur = function () {
                //正则表达式
                var regObj = /^\w+@\w+\.+\w+$/;

                if (regObj.test(this.value)) {
                    this.style.backgroundColor = 'red';
                } else {
                    this.style.backgroundColor = 'green';
                }
            };
        };
====================例子
 var msg = '杨忠科:13888888888苏坤:13999999999小虎:13111111111';
        msg = msg.replace(/(\d{3})(\d{4})(\d{4})/g, '$1****$3');
        alert(msg);
=========================replace


replace:
<script type="text/javascript">

var str="Welcome to Microsoft! ";
str=str + "We are proud to announce that Microsoft has ";
str=str + "one of the largest Web Developers sites in the world.";
document.write(str.replace(/Microsoft/g, "W3School"));

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        var msg = '     我是字符串           ';
        // var reg = /^\s+/;

//        function trim(name) {
//       return name.replace(/^\s+/, '').replace(/\s+$/,'');
//        }
        msg = msg.replace(/^\s+/, '').replace(/\s+$/,'');
        alert('============='+msg+'===============');
    </script>
</head>
<body>

</body>
</html>

切空格

模拟Trim()方法

案例：评估密码强度

 <style type="text/css">
        td
        {
            width: 100px;
            height: 25px;
            background-color: #E6E6E6;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById('txt').onkeyup = function () {

                //获取td
                var tds = document.getElementById('tb').getElementsByTagName('td');
                for (var i = 0; i < tds.length; i++) {
                    tds[i].style.backgroundColor = '#E6E6E6';
                }

                //获取密码
                var pwd = this.value;
                if (pwd.length > 0) {
                    //根据密码验证强度
                    var result = getPassWord(pwd);
                    //强度设置颜色

                    if (result <= 1) {
                        //弱
                        tds[0].style.backgroundColor = 'red';

                    } else if (result == 2) {
                        //中
                        tds[0].style.backgroundColor = 'orange';
                        tds[1].style.backgroundColor = 'orange';
                    } else if (result == 3) {
                        //强
                        tds[0].style.backgroundColor = 'green';
                        tds[1].style.backgroundColor = 'green';
                        tds[2].style.backgroundColor = 'green';
                    }
                }

            };
        };
        function getPassWord(pwdMsg) {
            var lvl = 0;
            //这么写麻烦
            //var reg = /\d/;
            //if (reg.test(pwdMsg)) {
            //lvl++;
            //}
            //密码中有数字lvl+1
            if (pwdMsg.match(/\d/)) {
                lvl++; //这么写简单
            }
            //密码中有字母lvl+1
            if (pwdMsg.match(/[a-zA-Z]/)) {
                lvl++;
            }
            //密码中有其他符号lvl+1
            if (pwdMsg.match(/[^0-9a-zA-Z]/)) {
                lvl++;
            }
            //密码小于6位lvl-1
            if (pwdMsg.length <= 6) {
                lvl--;
            }
            return lvl;
        }
    </script>
============================
<body>
    <input type="text" name="name" value="" id="txt" />
    <table border="1" id="tb">
        <tr>
            <td>
                弱
            </td>
            <td>
                中
            </td>
            <td>
                强
            </td>
        </tr>
    </table>
</body>

评估密码强度案例

HTML、JS的压缩
HTML、JavaScript的压缩和混淆。去掉空格、缩短变量名，让js、html尺寸更小，提高下载速度。
HTML、JS压缩、混淆有动态和静态两种方案。HTML压缩器，比如HTML Compress，JavaScript压缩工具：Google Closure Compiler、YUI Compressor 、 JsPacker等。
很多js库都提供了.min.js、compress.js的压缩版本。gzip
1.安装jdk
2.配置环境变量(path)
3.开始压缩。
http://www.36ria.com/3948
Cd \ cd cp dir cl
//使用Google Closeure Compiler(先安装jdk配置好环境变量(path))
java -jar compiler.jar --js hello.js --js_output_file helloc.js

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        onload = function () {

            var txts = document.getElementsByTagName('input'); //获取所有的input标签
            for (var i = 0; i < txts.length; i++) {
                if (txts[i].type == 'text') {//文本框
                    //按下
                    txts[i].onkeydown = function () {

                        if (window.event.keyCode == 13) {
                            window.event.keyCode = 9;
                        }
                    };
                }
            }
        };
    </script>
</head>
<body>
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
</body>
</html>

回车实现tal跳转

 window.onload = function () {
            var vals = document.getElementsByTagName('input');
            for (var i = 0; i < vals.length; i++) {
                if (vals[i].type == 'text') {
                    vals[i].onkeydown = function () {
                        //document.title = window.event.keyCode;
                        if (window.event.keyCode == 13) {
                            window.event.keyCode = 9;
                        }
                    };
                }
            }
        };
===========================================案例一

keyCode
ascii码说明：
8：退格键
46：delete
37-40： 方向键
48-57：小键盘区的数字
96-105：主键盘区的数字
110、190：小键盘区和主键盘区的小数点
189、109：小键盘区和主键盘区的负号

13：回车
9： Tab 就是那个把焦点移到下一个文本框的东东。

练习1：超链接的单选效果：
    <script type="text/javascript">
        function btn_Click(btn) {
            var links = document.getElementsByTagName("a");
            for (var i = 0; i < links.length; i++) {
                var link = links[i];
                if (link == btn) {
                    link.style.background = "red";
                }
                else {
                    link.style.background = "white";
                }
            }
        }      
    </script>
    <a href="javascript:void(0)" onclick="btn_Click(this)">点我</a><br />
    <a href="javascript:void(0)" onclick="btn_Click(this)">点我</a><br />
    <a href="javascript:void(0)" onclick="btn_Click(this)">点我</a><br />

练习2：表格隔行变色
        function changeColor() {
            var table = document.getElementById("table1");
            var trs = table.getElementsByTagName("tr");
            for (var i = 0; i < trs.length; i++) {
                if (i % 2 == 0) {
                    var td = trs[i];
                    td.style.background = "yellow";
                }
            }
        }
<table id="table1">
    <tr><td>tom</td><td>30</td></tr>
    <tr><td>jim</td><td>20</td></tr>
    <tr><td>lily</td><td>22</td></tr>
    <tr><td>lucy</td><td>23</td></tr>
    <tr><td>mike</td><td>25</td></tr>
</table>
练习3：回车键跳转：
<script language="javascript" for="document" event="onkeydown">
  if(event.keyCode==13)
     event.keyCode=9;
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        var keyWords = {
            "传智播客": ["传智播客java视频", "传智播客.net视频", "传智播客php视频"],
            "杨忠科": ["杨忠科的视频", "杨忠科的微博", "杨忠科的邮箱"],
            "杨": ["杨利伟", "杨振宇", "杨过"],
            "杨忠": ["杨忠科", "杨忠学", "杨忠爱国"]
        };

        setInterval(function () {

            document.getElementById('txt').onchange();
        }, 500);

        onload = function () {

            document.getElementById('txt').onchange = function () {

            //判断body中有没有层,如果有删除
                if (document.getElementById('dv')) {
                    document.body.removeChild(document.getElementById('dv'));
                }
                //文本框的值在键值对中存在
                if (keyWords[this.value]) {
                    //创建层
                    var dvObj = document.createElement('div');
                    dvObj.id = 'dv';
                    //层的样式
                    dvObj.style.width = '300px';
                    dvObj.style.height = '200px'; //一会要干掉的
                    dvObj.style.border = '1px solid green';
                    dvObj.style.position = 'absolute';
                    dvObj.style.left = this.offsetLeft + 'px';
                    dvObj.style.top = this.offsetHeight + this.offsetTop + 'px';
                    //创建无序列表
                    var ulObj = document.createElement('ul');
                    ulObj.style.listStyleType = 'none';
                    ulObj.style.margin = '0';
                    ulObj.style.padding = '0';
                    //循环
                    for (var i = 0; i < keyWords[this.value].length; i++) {
                        //创建Li
                        var liObj = document.createElement('li');
                        liObj.innerText = keyWords[this.value][i]; //显示每一项内容
                        liObj.style.marginTop = '8px';
                        liObj.style.cursor = 'pointer';
                        //高亮显示
                        liObj.onmouseover = function () {

                            this.style.backgroundColor = 'yellow';
                        };
                        liObj.onmouseout = function () {
                            this.style.backgroundColor = '';
                        };
                        //添加到ul中
                        ulObj.appendChild(liObj);
                    }
                    //ulobj添加到层中
                    dvObj.appendChild(ulObj);
                    //层添加到body中
                    document.body.appendChild(dvObj);
                }

            };
        };
    
    </script>
</head>
<body>
    请输入搜索内容
    <input type="text" name="name" value="" id="txt" style="width: 300px; height: 30px;
        border: 1px solid green;" />
    <input type="button" name="name" value="百度一下" style="width: 100px; height: 30px;" />
</body>
</html>

百度搜索自动完成功能

Js中的一些习惯与性能问题

倒着写for循环,否则耗性能
=====================
 document.getElementById('btn').onclick = function () {
                var doc = document.createDocumentFragment();
                var tdObj = document.getElementById('td1');
                for (var i = 0; i < 100; i++) {
                    var ulObj = document.createElement('ul');
                    for (var j = 0; j < 10; j++) {
                        var liObj = document.createElement('li');
                        liObj.innerHTML = j;
                        ulObj.appendChild(liObj);
                    }
                    doc.appendChild(ulObj);
                    //tdObj.appendChild(ulObj);
                }
                tdObj.appendChild(doc);
            };

posted @ 2018-04-14 15:35 ParanoiaApe 阅读(253) 评论(0) 收藏举报

刷新页面返回顶部

温故而知新

勤奋的人永远不会被淘汰，记住，别担心太多，先做好自己能做到的事情！

DOM

为什么要学习JavaScript操作DOM

DOM模型和获取页面元素

事件

动态设置事件

window对象(Dom中的一个顶级对象）

window对象的方法

body、document对象的事件

其他事件

window对象的属性

事件冒泡

事件中的this

动态创建DOM

innerText和innerHTML

浏览器兼容性问题

innerHTML还是操作Dom节点

代码是否需要放置到onload中

Js操作页面样式，其他

IE中body的事件范围

层的操作

form对象

不同浏览器的差异（*）

JS中的正则表达式

Js中的一些习惯与性能问题

公告