• DOM编程(整理自相关ppt)


    DOM就是HTML页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象,就可以读取文本框中的值、设置文本框中的值。JavaScript→Dom就是C#→.NetFramwork。没有.netC#只能forwhile,连WriteLineMessageBox都不行。Dom就是一些让JavaScript能操作HTML页面控件的类、函数。
    DOM也像WinForm一样,通过事件、属性、方法进行编程。
    CSS+JavaScript+DOM=DHTML

    1,事件

    事件:<body onmousedown="alert('哈哈')">当点击鼠标的时候执行onmousedown中的代码。有时间事件响应的代码太多,就放到单独的函数中:

        <script type="text/javascript">

            function bodymousedown() {

                alert("网页被点坏了,赔吧!");

                alert("逗你玩的!");

            }

        </script>

    <body onmousedown="bodymousedown()">

    bodymousedown后的括号不能丢( onmousedown="bodymousedown",因为表示onmousedown事件发生时调用bodymousedown函数,而不是onmousedown事件的响应函数是bodymousedown

    2,动态设置事件

    可以在代码中动态设置事件响应函数,就像.Netbtn.Click+=一样

            function f1() {

                alert("1");

            }

            function f2(){

                alert("2");

            }

    <inputtype="button" onclick="document.ondblclick=f1" value="关联事件1"/>//注意f1不要加括号。如果加上括号就变成了执行f1函数,并且将函数的返回值复制给document.ondblclick

    <inputtype="button" onclick="document.ondblclick=f2" value="关联事件2"/>

    3.window事件

    window对象代表当前浏览器窗口,使用window对象的属性、方法的时候可以省略window,比如window.alert('a')可以省略成alert('aa')

    (1)alert方法,弹出消息对话框

    (2)confirm方法,显示“确定”、“取消”对话框,如果按了确定按钮,就返回true,否则就false

            if (confirm("是否继续?")) {

                alert("确定");

            }

            else {

                alert("取消");

            }

    (3)重新导航到指定的地址:navigate(http://www.baidu.com);
    (4)setInterval每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识

      setInterval("alert('hello')", 5000);

    (5)clearInterval取消setInterval的定时执行,相当于Timer中的Enabled=False。因为setInterval可以设定多个定时,所以clearInterval要指定清除那个定时器的标识,即setInterval的返回值。

    varintervalId =setInterval("alert('hello')", 5000);

    clearInterval(intervalId);

    (6)setTimeout也是定时执行,但是不像setInterval那样是重复的定时执行,只执行一次clearTimeout也是清除定时。很好区分:Interval:间隔;timeout:超时。

    vartimeoutId =setTimeout("alert('hello')", 2000);

    (7)showModalDialog弹出模态对话框,注意showModalDialog必须onClick等用户手动触发的事件中才会执行,否则可能会被最新版本的浏览器当成广告弹窗而拦截。
    第一个参数为弹出模态窗口的页面地址。
    在弹出的页面中调用window.close()(不能省略window.close()中的window.)关闭窗口,只有在对话框中调用window.close()才会自动关闭窗口,否则浏览器会提示用户进行确认。
    (8)showModelessDialog弹出非模态窗口,参数等和showModalDialog一样。
     
    4,bodydocument对象的事件
    1onload:网页加载完毕时触发,浏览器是一边下载文档、一边解析执行,可能会出现JavaScript执行时需要操作某个元素,这个元素还没有加载,如果这样就要把操作的代码放到bodyonload事件中,或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发,bodyonload才是全部加载完成
    2onunload:网页关闭(或者离开)后触发。
    3onbeforeunload:在网页准备关闭(或者离开)后触发。在事件中为"window.event.returnValue赋值(要显示的警告消息),这样窗口离开(比如前进、后退、关闭)就会弹出确认消息

    <bodyonbeforeunload="window.event.returnValue='真的要放弃发帖退出吗?'">。显示的文字随浏览器版本而有差异。

    5,其他事件

    除了有特有的属性之外,当然还有通用的HTML元素的事件:onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeypress(点击按键)、onkeyup(按键释放)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)等 

    6,window对象的属性

    •     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="点击" onclick="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  onmousedown="if(event.button==2){alert('禁止复制');}">

    –    (*)screen对象,屏幕的信息

    –    alert("分辨率:" + screen.width + "*" +screen.height);

    –            if (screen.width < 1024 ||screen.height < 768) {

    –                alert("分辨率太低!");

    –            }

    –    clipboardData对象,对粘贴板的操作。clearData("Text")清空粘贴板;getData("Text")读取粘贴板的值,返回值为粘贴板中的内容;setData("Text",val),设置粘贴板中的值。

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

    –     

    –    当复制的时候body的oncopy方法被触发,直接return false就是禁止复制。<body oncopy="alert('禁止复制!');returnfalse;"

    –    很多元素也有oncopy、onpaste事件:

          案例:禁止粘贴帐号。帐号:<inputtype="text" /><br />

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

    在网站中复制文章的时候,为了防止那些拷贝党不添加文章来源,自动在复制的内容后添加版权声明。

    function modifyClipboard() {

                clipboardData.setData('Text',clipboardData.getData('Text') + '本文来自专区,转载请注明来源。' + location.href);

            }

    oncopy="setTimeout('modifyClipboard()',100)"。用户复制动作发生0.1秒以后再去改粘贴板中的内容。100ms只是一个经常取值,写1000、10、50、200……都行。不能直接在oncopy里修改粘贴板。

    不能直接在oncopy中执行对粘贴板的操作,因此设定定时器,0.1秒以后执行,这样就不再oncopy的执行调用栈上了。
     

     

  • 相关阅读:
    java, listmap2json, fastjson
    java, mybatis, 调用mysql存储过程
    解析json串,利用正则表达式,split
    alibaba fastjson List<Map<String, String>>2Str
    getParameterMap()的返回值为Map<String, String[]>,从其中取得请求参数转为Map<String, String>的方法如下:
    message from server: "Host 'XXX' is not allowed to connect to this MySQL server
    Java之工厂方法
    oracle 的分析函数
    在js中怎样获得checkbox里选中的多个值?(jQuery)
    获得select被选中option的value和text
  • 原文地址:https://www.cnblogs.com/rookiebob/p/3749405.html
Copyright © 2020-2023  润新知