zoukankan      html  css  js  c++  java
  • JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)

    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


    DOM模型和获取页面元素

    window.id

    document.getElementById()


    整个页面或者说窗口就是一个window对象---------------window是顶级对象
    Document相当于window下面的大将,是整个页面
    window.txt1.value = ‘哈哈’;这种情况放在表单中就有问题了
    window.document.getElementById('txt1').value = '哈哈看我';

    使用window对象的属性、方法的时候可以省略window
    比如:
    window.alert(‘hello');可以省略成alert(‘hello');
    window.document可以直接写document
    l能不写window就不要写,这样可以减少js文件的字节数。


    事件
    在DOM中有很多事件。演示:
    1.<body onmousedown=“alert(‘别点我!’);”>//注意body的范围。
    2.有时事件的响应代码比较多,就要放到一个函数中:
    <script type="text/javascript">
            function UserMouseDown() {
                alert('网页被你点坏了>_<~~,赔吧!');
                alert('逗你玩呢~~');
            }
     </script>
    <input type="button" value="按钮" onmousedown="UserMouseDown();" />
    onmousedown=“UserMouseDown();”中,UserMouseDown后的括号不能丢(不能写成onmousedown=“UserMouseDown” ),带()表示调用函数,直接写函数名表示设置事件的处理函数为UserMouseDown


    window对象的方法1
    window.alert(‘大家好!’);//弹出警告对话框
    window.confirm(‘确定要删除吗?’);//确定、取消对话框,返回true或false;



    window对象的方法2

    window.setInterval(code,delay)//每隔一段时间执行指定的代码(类似于winForm中的Timer控件。)
    第一个参数:指定的代码字符串
    第二个参数:时间间隔(毫秒数)

    var intervalId=setInterval(“alert(‘hello’);”,1000);
    window.clearInterval(intervalId);//停止计时器
    clearInterval()取消setInterval的定时执行,相当于Timer中的Enabled=False。因为setInterval可以设定多个定时,所以clearInterval要指定清除那个定时器的标识,即setInterval的返回值。



    window对象的方法3
    setTimeout也是定时执行,但是不像setInterval那样是重复的定时执行,只执行一次,clearTimeout也是清除定时。很好区分:Interval:间隔;timeout:超时。
    var timeoutId = setTimeout("alert('hello')", 2000);


    body、document对象的事件
    onload(页面加载后触发)
    window.控件Id(不建议使用)
    document.getElementById(“控件Id”);(推荐)
    onunload(页面卸载后触发)
    网页关闭(或者离开)后触发。//刷新页面的时候、关闭选项卡的时候(多个选项卡)
    onbeforeunload(页面卸载前触发)
    在网页准备关闭(或者离开)前触发。//注意浏览器缓存


    其他事件
    除了属性之外,当然还有通用的HTML元素的事件:onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeypress(点击按键)、onkeyup(按键释放)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)、oncontextmenu(在浏览器中单击鼠标右键显示”右键菜单”时触发)等。



  • 相关阅读:
    ARRAYLIST使用方法
    学习如何把数据库数据提取为XML(转)
    jquery常用技巧及常用方法列表
    邮件发送
    DataSet/XMl相互操作
    jquery Tab效果和动态加载
    Ajax 显示XML
    dropdownlist动态数据绑定
    sql 拼接
    javascriptxmlxslt操作
  • 原文地址:https://www.cnblogs.com/CSharpLover/p/5193663.html
Copyright © 2011-2022 走看看