DOM 基础(一)

//HTMLPageDOM.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
    <title>这是DOM基础学习!</title>
    <script type="text/javascript">
        function bodymousedown() {
            alert("别点我");
        }
        function f1() {
            alert("我是1");
        }
        function f2() {
            alert("我是2");
        }
        function confirmdemo() {
            if (confirm("是否继续?")) {
                alert("确定");
            }
            else {
                alert("取消");
            }
        }
        var intervalID;
        function startInterval() {
            intervalID = setInterval("alert('烦死你 ^_^ !')", 5000);
        }
        function stopInterval() {
            clearInterval(intervalID);
        }

        var timeoutId;
        function startTimeout() {
            timeoutId = setTimeout("alert('这是Timeout')", 2000);
        }
        function stopTimeout() {
            clearTimeout(timeoutId);
        }

        function scroll() {
            var title = document.title;
            var firstchar = title.charAt(0);
            var leftstr = title.substring(1, title.length);
            document.title = leftstr + firstchar;
        }
        var scrollTitleID;
        function startScrollTitle() {
            scrollTitleID = setInterval(scroll, 500);
        }
        function stopScrollTitle() {
            clearInterval(scrollTitleID);
        }

        function startShowModalDialog() {
            var obj = new Object();
            obj.name = "LYH";
            ReturnValue = window.showModalDialog(
                "HTMLPage1.htm", //弹出页面地址
                obj, //参数
                "dialogWidth=200px;dialogHeight=100px;dialogLeft=200px;dialogTop=200px"
            );
            alert("从弹出窗口返回的值为:" + ReturnValue);
        }

        function startOnload() {
            onloadText.value = "这里是body加载完的onload文本框(Love)";
        }
    </script>
    <style type="text/css">
        #TextArea1
        {
            height: 55px;
            width: 205px;
        }
    </style>
</head>
<!--
    οnmοusedοwn="bodymousedown()"
    button,发生事件时鼠标按键,1为左键,2为右键,3为左右键同时按。
-->
<!--
<script type="text/javascript">
    function mouseleft() {alert('禁止左键点击!');return false;};
    function mouseright() { if (event.button == 2) {alert('禁止右键点击!');return false;} };
    function CtrlKeyDown() { if (event.ctrlKey) {alert('禁止CTRL键点击!');return false;} };
    document.onkeydown = CtrlKeyDown;
    document.onselectstart = mouseleft;
    document.onmousedown = mouseright;
  </script>
  -->
<script type="text/javascript">
    var clickmessage = "本站图片禁用右键!"
    function disableclick(e) {
        if (document.all) {
            if (event.button == 2 || event.button == 3) {
                if (event.srcElement.tagName == "IMG") {
                    alert(clickmessage);
                    return false;
                }
            }
        }
        if (document.layers) {
            if (e.which == 2) {
                alert(clickmessage);
                return false;
            }
        }
    }
    function associateimages() {
        for (i = 0; i < document.images.length; i++)
            document.images[i].onmousedown = disableclick;
    }
    if (document.all)
        document.onmousedown = disableclick
    else if (document.layers)
        associateimages()
</script>
<!--
    οnunlοad="alert('页面关闭或离开时触发')"
    οnbefοreunlοad="window.event.returnValue='确定离开吗?'"
    //禁用右键:放到body中
    οncοntextmenu="window.event.returnValue=false"
     -->
<body οnlοad="startOnload()" οncοpy="setTimeout('modifyClipboard()',100)">
    <img src="images/girl.gif" value="这里是图片" />
    <br />
    <!--注意f1 不要加括号。如果加上括号就变成了执行f1函数,并且将函数的返回值复制给document.ondblclick-->
    <input type="button" οnclick="f1()" value="关联事件1-单击" />
    <br />
    <input type="button" οnclick="document.οndblclick=f1" value="关联事件1-双击" />
    <br />
    <input type="button" οnclick="document.οndblclick=f2" value="关联事件2-双击" />
    <!--
    window对象1 :
    window对象代表当前浏览器窗口,使用window对象的属性、方法的时候可以省略window,比如window.alert('a')可以省略成
    alert('aa')。
 (1)alert方法,弹出消息对话框
 (2)confirm 方法,显示确定、取消对话框,如果按了【确定】按钮,就返回   true,否则就 false
 -->
    <br />
    <input type="button" οnclick="confirmdemo()" value="confirmButton-单击" />
    <br />
    <!--
    (3)重新导航到指定的地址:navigate("http://www.xtu.edu.cn");
-->
    <input type="button" οnclick="navigate('HTMLPage1.htm')" value="navigate(重新导航)" />
    <!--
    4)setInterval每隔一段时间执行指定的代码,第一个参数为代码
    的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时
    器的标识
          setInterval("alert('hello')", 1000);
    (5)clearInterval取消setInterval的定时执行,相当于Timer中的
    Enabled=False。因为setInterval可以设定多个定时,所以
    clearInterval要指定清除那个定时器的标识,即setInterval的返回值。
          var intervalId = setInterval("alert('hello')", 1000);
          clearInterval(intervalId);
-->
    <br />
    <input type="button" οnclick="startInterval()" value="startInterval(开始)" />
    <br />
    <input type="button" οnclick="stopInterval()" value="stopInterval(停止)" />
    <br />
    走马灯效果:<input type="button" οnclick="startScrollTitle()" value="标题滚动(开始)" />
    <br />
    走马灯效果:<input type="button" οnclick="stopScrollTitle()" value="标题滚动(停止)" />
    <!--
    (6)setTimeout也是定时执行,但是不像setInterval那样是重复的
    定时执行,只执行一次,clearTimeout也是清除定时。很好区分:Interval:间隔;timeout:超时。
     var timeoutId = setTimeout("alert('hello')", 2000);

     clearTimeout:清除定时。
-->
    <br />
    <input type="button" οnclick="startTimeout()" value="这是Timeout(开始)" />
    <br />
    <input type="button" οnclick="stopTimeout()" value="这是Timeout(停止)" />
    <br />
    <!--
    (7)showModalDialog弹出模态对话框,注意showModalDialog必
    须在onClick等用户手动触发的事件中才会执行,否则可能会被
    最新版本的浏览器当成广告弹窗而拦截。
      第一个参数为弹出模态窗口的页面地址。     
       在弹出的页面中调用window.close()(不能省略window.close()中的
        window.)关闭窗口,只有在对话框中调用window.close()才会自动
        关闭窗口,否则浏览器会提示用户进行确认。

   (8)showModelessDialog弹出非模态窗口,参数等和
    showModalDialog一样。
   如何在弹出窗口和主窗口之间进行参数传递、如何控制弹出窗口
    的大小等后面再讲。

    使用方法:
          vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
          vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
    参数说明:
         sURL          --  必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
         vArguments    -- 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过 

                          window.dialogArguments来取得传递进来的参数。
         sFeatures     -- 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
        ----------------------------------------------------------------------------------------------------------------
        1.    dialogHeight:    对话框高度,不小于100px
        2.    dialogWidth:    对话框宽度。
        3.    dialogLeft:     离屏幕左的距离。
        4.    dialogTop:     离屏幕上的距离。
        5.    center:          { yes | no | 1 | 0 } :              是否居中,默认yes,但仍可以指定高度和宽度。
        6.    help:             {yes | no | 1 | 0 }:                是否显示帮助按钮,默认yes。
        7.    resizable:       {yes | no | 1 | 0 } [IE5+]:     是否可被改变大小。默认no。
        8.    status:          {yes | no | 1 | 0 } [IE5+]:      是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
        9.    scroll:            { yes | no | 1 | 0 | on | off }:是否显示滚动条。默认为yes。

        下面几个属性是用在HTA中的,在一般的网页中一般不使用。
        10.    dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
        11.    edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
        12.    unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。
    参数传递:
    1. 要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:
    -------------------------------
    parent.htm
    <script>
              var obj = new Object();
              obj.name="51js";
              window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
    </script>
    modal.htm
    <script>
              var obj = window.dialogArguments
              alert("您传递的参数为:" + obj.name)
    </script>
    -------------------------------
    2.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:
    ------------------------------
    parent.htm
    <script>
              str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
              alert(str);
    </script>
    modal.htm
    <script>
              window.returnValue="http://www.xtu.edu.cn";
    </script>
-->
    <input type="button" οnclick="startShowModalDialog()" value="这里是弹出窗口" />
    <br />
    <!--
    body、document对象的事件
   (1)onload:网页加载完毕时触发,浏览器是一边下载文档、一边解析执行,可能会出现JavaScript执行时需要操作某个元素
    ,这个元素还没有加载,如果这样就要把操作的代码放到body的onload事件中,或者可以把JavaScript放到元素之后。元素的
    onload事件是元素自己加载完毕时触发,body onload才是全部 加载完成
   (2)onunload:网页关闭(或者离开)后触发。           
   (3 )onbeforeunload:在网页准备关闭(或者离开)后触发。
    在事件中为"window.event.returnValue赋值(要显示的警告消息),这样窗口离开(比如前进、后退、关闭)就会弹出确认消息
       <body οnbefοreunlοad="window.event.returnValue=' 真的要放弃发帖退出吗?'">。显示的文字随浏览器版本而有差异。
--->
    <input type="text" value="这里是body没有加载完的onload测试文本框" id="onloadText" />
    <!--
    其他事件 :
   除了有特有的属性之外,当然还有通用的HTML元素的事件:
    onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeypress(点击按键)、onkeyup(按键释放)、
    onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、onmouseover(鼠标移动
    到元素范围)、onmouseup(鼠标按键释放)等。
--->
    <br />
    <!---
    window对象的属性1 :
   window.location.href='http://www.itcast.cn',重新导向新的地址,和navigate方法效果一样。
    window.location.reload() 刷新页面。
   window.event是非常重要的属性,用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过event属性取到相关信息。类似
    于winForm中的e(EventArg).
       altKey属性,bool类型,表示发生事件时alt键是否被按下,类似的还有ctrlKey、shiftKey属性,例子 <input type="button" value="点击" 
        οnclick="if(event.altKey){alert('Alt点击')}else{alert('普通点击')}" /> ;
       clientX、clientY 发生事件时鼠标在客户区的坐标;
        screenX、screenY 发生 事件时鼠标在屏幕上的坐标;
        offsetX、offsetY 发生事件时鼠标相对于事件源(比如点击按钮时触发onclick)的坐标。
       returnValue属性,如果将returnValue设置为false,就会取消默认事件的处理。
        在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器,
        防止错误数据提交给服务器、防止页面刷新。
       srcElement,获得事件源对象。几个事件共享一个事件响应函数用。
       keyCode,发生事件时的按键值。
        button,发生事件时鼠标按键,1为左键,2为右键,3为左右键同时按。
        <body  οnmοusedοwn="if(event.button==2){alert('禁止复制');}">
-->
    <input type="button" value="href" οnclick="alert(location.href)" />
    <input type="button" value="重定向" οnclick="location.href='HTMLPage1.htm'" />
    <input type="button" value="刷新到页面" οnclick="window.location.reload('HTMLPage1.htm')" />
    <input type="button" value="ctrl+点击测试" οnclick="if(window.event.ctrlKey){alert('按下了ctrl键')}else alert('普通点击');" />
    <br />
    <a href="http://www.xtu.edu.cn" οnclick="alert('禁止访问');window.event.returnValue=false">
        湘潭大学</a>
    <form action="HTMLPage1.htm">
    <input type="submit" value="提交" οnclick="alert('数据有问题');window.event.returnValue=false" />
    </form>
    <!---
    window对象的属性2 :
  (*)screen对象,屏幕的信息    
    粘贴板的操作:
  clipboardData对象
    clearData("Text")清空粘贴板;
    getData("Text")读取粘贴板的值,返回值为粘贴板中的内容;
    setData("Text",val),设置粘贴板中的值。
       案例:复制地址给友好。见备注。
       当复制的时候body的oncopy方法被触发,直接return false就是禁止复制。
     <body οncοpy="alert('禁止复制!');return false;"
       很多元素也有oncopy、onpaste事件:
       案例:禁止粘贴帐号。见备注。
-->
    <script type="text/javascript">
        //alert("分辨率:" + screen.width + "*" + screen.height);
        if (screen.width < 1024 || screen.height < 768) {
            //alert("分辨率太低!");
        }
    </script>
    <br />
    <input type="button" value="分享本页信息给好友" οnclick="clipboardData.setData('Text','我发现很好的东西:'+location.href);alert('已经放到粘贴板中!');" />
    <br />
    手机号码:<input type="text" />
    <br />
    确认号码:<input type="text" οnpaste="alert('为确保安全,禁止粘贴!');return false;" />
    <!---
    window对象的属性3 :
 在网站中复制文章的时候,为了防止那些拷贝党不添加文章来源,自动在复制的内容后添加版权声明。

 用户复制动作发生
    0.1秒以后再去改粘贴板中的内容。100ms只是一个经常取值,
    写1000、10、50、200……都行。不能直接在oncopy里修改粘
    贴板。
 不能直接在oncopy中执行对粘贴板的操作,因此设定定时器,0.1
    秒以后执行,这样就不再oncopy的执行调用栈上了。
-->
    <script type="text/javascript">
        function modifyClipboard() {
            var txt = clipboardData.getData('Text');
            txt = txt
            + '本文来自传XXXX,转载请注明来源。'
            + location.href;
            clipboardData.setData('Text', txt);
            //把这行代码放到body中:
            //oncopy = "setTimeout('modifyClipboard()',100)";
        }
    </script>
    <br />
    <!--
    window对象的属性4:

   history操作历史记录
       window.history.back()后退;
        window.history.forward()前进。
        也可以用window.history.go(-1)、window.history.go(1)前进

   document属性。是最复杂的属性之一。后面讲解详细使用。
-->
    <a href="HTMLPage1.htm">window.history.back()测试(这是第一页)</a>
    <br />
    <!--
    document属性1:

   document是window对象的一个属性,因为使用window对象成员的时候可以省略window.,所以一般直接写document
   document的方法:
     1  write:向文档中写入内容。writeln和write差不多,只不过最后添加一个回车
       在onclick等事件中写的代码会冲掉页面中的内容,只有在页面加载 过程中write才会与原有内容融合在一起
       write经常在广告代码、整合资源代码中被使用。
     内容联盟、广告代码、cnzz,不需要被主页面的站长去维护内容,只要被嵌入的js内容提供商修改内容,显示的内容就变了。
-->
    <input type="button" value="" οnclick="document.write('<fontcolor=red>你好:LYH</font>')" />
    <script type="text/javascript">
        document.writeln("<fontcolor=red>你好:LYH</font>");
        document.write("<fontcolor=red>你好:LYH</font>");
    </script>
    <br />
    <!--
    document方法 :
    getElementById方法(非常常用),根据元素的Id获得对象,网页中id不能重复。
    也可以直接通过元素的 来引用元素,但是有有效范围、form1.textbox1之类的问题,
    因此不建议直接通过id操作元素,而是通过getElementById
   (*)getElementsByName,根据元素的name获得对象,由于页面中元素
    的name可以重复,比如多个RadioButton的name一样,因此
    getElementsByName返回值是对象数组。
   (*)getElementsByTagName,获得指定标签名称的元素数组,比如
    getElementsByTagName("p")可以获得所有的<p>标签。
   案例:点击一个按钮,被点击的按钮显示“呜呜”,其他按钮显示“哈哈”。
   案例:十秒钟后协议文本框下的注册按钮才能点击,时钟倒数。
    (btn.disabled = true )
                                                        =
   练习:加法计算器。两个文本框中输入数字,点击【 】按钮将相加的结果
    放到第三个文本框中。
   练习:美女时钟。
-->
    <script type="text/javascript">
        function btnClickId() {
            var txt = document.getElementById("textBox1");
            alert(txt.value);
        }
        function btnClickValue() {
            alert(form1.textBox1.value);
        }
        function btnClickName() {
            var radios = document.getElementsByName("gender");
            var txt = "";
            for (var radio in radios)
                txt = radio.value + "|";
            alert(txt);
        }           
    </script>
    <form action="ok.aspx" id="form1">
    <input type="button" value="getElementsById测试" οnclick="btnClickId()" />
    <input type="button" value="控件.value测试" οnclick="btnClickValue()" />
    <input type="text" id="textBox1" name="textBox1" value="我是中国人!" />
    </form>
    <script type="text/javascript">
        function btnClickName() {
            var radios = document.getElementsByName("gender");
            var txt = "";
            //for (var radio in radios) txt = radio.value + "|";
            for (var i = 0; i < radios.length; i++)
                txt+= radios[i].value + "|";
            alert(txt);
        }           
    </script>
    <input type="radio" name="gender" value="男" />男
    <input type="radio" name="gender" value="女" />女
    <input type="radio" name="gender" value="保密" />保密
    <input type="button" value="getElementsByName测试" οnclick="btnClickName()" />
    <br />
    <script type="text/javascript">
        function btnClickTagName() {
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                input.value = "I Love You !"; 
                  //window.event.srcEllment;  取得引发事件的控件       
            };
        }       
    </script>
    <input type="text" />
    <input type="button" value="getElementsByTagName测试" οnclick="btnClickTagName()"/>
    <br />
    <!--
        十秒钟后协议文本框下的注册按钮才能点击,时钟倒数。(btn.disabled = true )
    -->
    <script type="text/javascript">
        function btnTimeCount() {
            timeC = 10;
            var btnTimeCount = document.getElementById("btnTimeCount");
            btnTimeCount.value = "请仔细阅读协议。还剩 " + timeC + " 秒";
            btnTimeCount.disabled = true;
            intervalTimeCount=setInterval("countMethod()",1000);    
         }
         function countMethod() {
             var btnTimeCount = document.getElementById("btnTimeCount");
             if (timeC > 0)
                 btnTimeCount.value = "请仔细阅读协议。还剩 " + (--timeC) + " 秒";
             else {
                 btnTimeCount.value = "你同意协议,嘿嘿!";
                 btnTimeCount.disabled = false;
                 clearInterval(intervalTimeCount);
             }
         }
    </script>
    <textarea id="TextArea1" cols="20" name="S1" rows="3">
    1、你是我的。
    2、你的钱是我的。
    3、你的老婆是我的。
    4、我的不是你的。
    </textarea><br />
    <input type="button" id="btnTimeCount" οnclick="btnTimeCount()" value="请仔细阅读协议。(10 秒)"/><br />
    <!--
        DOM的动态创建 :
   document.write只能在页面加载过程中才能动态创建。
   可以调用document的createElement方法来创建具有指定标签的
    DOM对象,然后通过调用某个元素的appendChild方法将新创建
    元素添加到相应的元素下
    -->
    <script type="text/javascript">
        function showit() {
            var divMain = document.getElementById("divMain");

            var inputFile = document.createElement("input");
            inputFile.type = "file";
            inputFile.value = "";
            divMain.appendChild(inputFile);
           
            var inputBtn = document.createElement("input");
            inputBtn.type = "button";
            inputBtn.value = "我是动态的!";
            divMain.appendChild(inputBtn);           
            //addbr();//??怎样添加换行??
        }
        function addbr() {
            var divMain = document.getElementById("divMain");
            //divMain.innerHTML = "<br />";
            divMain.innerHTML = "<input name='File1' type='file' /><br />";
           // divMain.innerText = "<br />";
        }       
    </script>
    <input type="button" value="我是动态创建按钮" οnclick="showit()" />    
    <div id="divMain"></div> <br />
    <input id="File1" type="file" name="File1" /><br />
    <!--
        innerText、innerHTML :
 �  几乎所有DOM元素都有innerText、innerHTML属性(注意大小写),分别是元
    素标签内内容的文本表示形式和HTML源代码,这两个属性是可读可写的。
 �  用innerHTML也可以替代createElement,属于简单、粗放型、后果自负的创建
     •  <span/>的innerHTML和<span></span>的innerHTML不一样。
    -->
    <a href="http://www.itcast.cn" id="link1">湘<font color="Red">潭</font>大学</a>
    <input type="button" value="inner*" οnclick="alert(document.getElementById('link1').innerText);alert(document.getElementById('link1').innerHTML);" />
    <input type="button" value="动态修改innerText" οnclick="document.getElementById('link1').innerText='湘大'" />
    <input type="button" value="动态修改innerHTML" οnclick="document.getElementById('link1').innerHTML='湘<font color=Green>潭</font>大学'" /><br />
   
    <script type="text/javascript">
        function createLink() {
            var divLink = document.getElementById("divLink");
            var link = document.createElement("a");
            link.href = "www.xtu.edu.cn";
            link.innerText="湘潭大学\n"
            divLink.appendChild(link);
        }
    </script>
    <div id="divLink"></div>
    <input type="button" value="动态生成超链接" οnclick="createLink()" />

    <script type="text/javascript">
        function createTable() {
            var data = {"湘潭大学":"www.xtu.edu.cn","百度搜索":"www.baidu.com"};
            var divTable = document.getElementById("divTable");

            for (var key in data) {
                var value = data[key];

                var tr = document.createElement("tr");
                var td1 = document.createElement("td");
                td1.innerHTML = key + "&nbsp;&nbsp;";
                tr.appendChild(td1);

                var td2 = document.createElement("td");
                td2.innerHTML = "<a href='" + value + "'>" + value+"</a>";
                tr.appendChild(td2);
                divTable.appendChild(tr);
            }
        }

        function createTable2() {
            var data = { "湘潭大学": "www.xtu.edu.cn", "百度搜索": "www.baidu.com" };
            var divTable = document.getElementById("divTable2");

            for (var key in data) {
                var value = data[key];
                var tr = divTable.insertRow(-1);//-1 表示最后
                var td1 = tr.insertCell(-1);
                td1.innerHTML = key; //firefox不支持innerText
                var td2 = tr.insertCell(-1);
                td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
            }
        }

        function createTable3() {
            var data = { "湘潭大学": "www.xtu.edu.cn", "百度搜索": "www.baidu.com" };
            var tableLinks = document.getElementById("tableLinks");

            for (var key in data) {
                var value = data[key];

                var tr = document.createElement("tr");
                var td1 = document.createElement("td");
                td1.innerHTML = key + "&nbsp;&nbsp;";
                tr.appendChild(td1);

                var td2 = document.createElement("td");
                td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
                tr.appendChild(td2);
                tableLinks.tBodies[0].appendChild(tr);
            }
        }
    </script>
    <table id="divTable"></table>
    <input type="button" value="动态生成表格(不兼容IE6)" οnclick="createTable()" />
    <table id="tableLinks"> <tbody></tbody></table>
    <input type="button" value="动态生成表格(兼容浏览器IE6后)" οnclick="createTable3()" />
    <table id="divTable2"></table>
    <input type="button" value="动态生成表格(兼容浏览器Firefox)" οnclick="createTable2()" /><br />
    <script type="text/javascript">
        function commentButton() {
            var tablePL = document.getElementById("tablePL");
            var nichengName = document.getElementById("nichengName").value;
            var commentContent = document.getElementById("commentContent").value;
            var tr = tablePL.insertRow(-1);

            var td1 = tr.insertCell(-1);
            td1.innerHTML = nichengName + ":";
            var td2 = tr.insertCell(-1);
            td2.innerHTML = commentContent;
        }
    </script>
    练习评论!练习评论!练习评论!练习评论!练习评论!练习评论!练习评论!练习评论!练习评论!
    练习评论!练习评论!练习评论!练习评论!练习评论!
    <p>评论区:</p>
    <table id="tablePL" >
        <tr><td>小玉:</td><td>沙发耶!</td></tr>
    </table><br />
    昵称:<input type="text" id="nichengName"/><br />
    <textarea id="commentContent" rows="5" cols="30"></textarea><br />
    <input type="button" value="评论" οnclick="commentButton()" />
    <!--
        事件冒泡:如果元素A嵌套在元素B中,那么A被点击不仅A的onclick 事件会被触发,B 的  onclick 也会被触发。触发的顺序是由内而外” 。
    -->
    <!--
        事件中的this。除了可以使用event.srcElement在事件响应函数中,this表示发生事件的控件。
        只有在事件响应函数才能使用this获得发生事件的控件,在事件响应函数调用的函数中不能使用,
        如果要使用则要将  this  传递给函数或者使用event.srcElement。
        (*)this和event.srcElement的语义是不一样的,this就是表示当前监听事件的这个对象,
        event.srcElement是引发事件的对象:事件冒泡。
    -->
    <br />
    <script type="text/javascript">
        function thisTest() {
            alert("方法中不能获取this值:"+this.value);//这里的this是错误的
        }
        function thisTest2(btn) {
            alert("方法中通过传递参数获取this值:" + btn.value); //这里的this是错误的
        }
    </script>
    <input type="button" value="this测试(this.value)" οnclick="alert(this.value);"/><br />
    <input type="button" value="this测试(event.srcElement.value)" οnclick="alert(event.srcElement.value);"/><br />
    <input type="button" value="this测试(方法中不能获取this值)" οnclick="thisTest()"/><br />
    <input type="button" value="this测试(方法中通过传递参数获取this值)" οnclick="thisTest2(this)"/><br />
    <br />
     <script type="text/javascript"" src="http://s22.cnzz.com/stat.php?id=3582644&web_id=3582644&show=pic" >
    </script>
</body>
</html>



//HTMLPage1.htm
<!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 obj = window.dialogArguments;
        if (obj != null)
                alert("您传递的参数为:" + obj.name);


        function goOut(){
            window.returnValue = "返回值为:!!!!!!";
            window.close();
        }
    </script>
</head>
<body>   
<input type="button" οnclick="goOut()" value="退出弹出窗口"/>
<br />
<a href="javascript:window.history.back()">(window.history.back()测试)</a>
<input type="button" value="后退" οnclick="javascript:window.history.back()" />
</body>
</html>

以下是图片:


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值