zoukankan      html  css  js  c++  java
  • DOM学习笔记一

    1. onmousedown="" //鼠标点按事件

    2. onclick=""  //鼠标点击事件

    3. window对象代表当前浏览器窗口。使用window对象的属性和方法的时候,可以省略window。

      3.1 alert方法,弹出消息对话框

      3.2 confirm方法,显示“确定”、"取消"对话框,如果按了【确定】就返回true,反之则返回false

      3.3 navigate(http://www.baidu.com) 重新导航到指定地址

      3.4 setInterval方法,每隔多久执行指定代码。第一个参数为代码的字符串,第二个参数为时间间隔(毫秒),返回定时器标识

      3.5 clearInterval 取消setInterval定时执行,通过定时器标识指定。

    1 var intervalid = setinterval("alert('hello')",5000);
    2 clearinterval(intervalid);

      例:标题走马灯效果:标题向左滚动

     1 <title>welcome to our school</title>
    2 <script type="text/javascript">
    3 function scroll(){
    4 var title = document.title;
    5 var firstch = title.charAt(0);
    6 var leftstr = title.substring(1,title.length);
    7 document.title = leftstr + firstch;
    8 }
    9 setInterval("scroll()",1000);
    10 </script>

      3.6 setTimeout也是定时执行,不过只执行一次,像闹钟那样的。

    4. body 、document对象

      4.1 onload 页面加载完成后才会调用。防止调用的时候对象还没加载

      <body onload="btn.value='OK';"> //onload 也可以写在控件里面。表示当前控件加载完成后触发。

      4.2 onunload 网页关闭(或者离开)后触发 (可能做不完页面就关了)

      4.3 onbeforeunload 在关闭之前弹出提示。给window.event.returnValue赋值。

      <body onbeforeunload="window.event.returnValue='真的要离开吗?'">

      returnValue=false,则不处理。这个可以加在控件里面比如<a               href=http://www.baidu.com onclick="alert('unavailable!');window.event.returnValue=false;">baidu</a>

    5.其他事件

    onclick ondblclick ondeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup等

    6.window对象属性

      6.1 window.location.href='http://www.baidu.com' 相当于navigate

        window.location.reload() 刷新页面

      6.2 window.event 能取到跟点击对象相关的所有属性。相当于winform里的EventArg e。

            window.event.value 见4.3  禁止事件的进一步处理

      6.3 screen对象 获得屏幕信息。screen.width  screen.height

      6.4 clipboardData对象,对粘贴板的操作。

        clearData("Text")清空粘贴版

        getData('Text')

        setData('Text',val)

    <input type="button" value="分享本页给好友" onclick="clipboardData.setData('Text','我发现一个好玩的网页'+location.href);)"/>

        <body oncopy="alert('禁止复制!');return false;"> //禁止复制网页内容。

        <input type="text" onpaste=('禁止粘贴!');return false;"> //禁止粘贴内容。

        给网站复制添加小尾巴的方法:

    1 function modifyClipboard(){
    2 clipboardData.setData('Text',clipboardData.getData('Text')
    3 +'本文来自哪儿哪儿哪儿。转载请注明'+locaiton.href);
    4 }
    5
    6 oncopy="setTimeout('modifyClipboard()',100)" //用户复制动作发生0.1秒后执行

    不能直接在oncopy中执行对粘贴板的操作,因此设定定时器。

      6.5 history

        window.history.back(); window.history.forward()

    7.document的属性

      document是window的对象。window可以省略。所以直接写document

      7.1 document.write

        document.write("<a href='http://www.baidu.com'>百度</a>");

        只有在页面加载的过程中,write才会与原有内容融合在一起。

      7.2 document.getElementById 非常常用

        document.getElementByName  //常用来寻找radiobutton神马的

        document.getElementByTagName //常用来寻找一类控件。

     1 <head>
    2 <title></title>
    3 <script type="text/javascript">
    4 function initEvent(){
    5 var inputs = document.getElementByTagName("input");
    6 for(var i = 0; i < inputs.length; i++){
    7 var input = inputs[i];
    8 //window.event.scrElement,取得引发事件的控件
    9 if(input == window.event.srcElement){
    10 input.value = "哈哈" //也可以修改背景色,达到点击修改背景色的效果
    11 }
    12 }
    13 }
    14 </script>
    15 </head>
    16 <body onload="initEvent()"> 是的页面加载完成后执行
    17 <input type="button" value="嘻嘻" />
    18 <input type="button" value="嘻嘻" />
    19 <input type="button" value="嘻嘻" />
    20 <input type="button" value="嘻嘻" />
    21 </body>

       7.3 document.createElement 可以在页面加载完成后添加元素(与document.write的区别)

     1 <head>
    2 <script type="text/javascript">
    3 function btnClick(){
    4 var divMain = document.getElementById("divMain");//获得层
    5 var input = document.createElement("input");
    6 input.type = "button"l;
    7 input.value = "我就动态按钮";
    8 divMain.appendChild(input); //将动态按钮元素添加到divMain层
    9 }
    10 </script>
    11 </head>
    12 <body>
    13 <div id="divMain"></div> //占位用于添加动态按钮
    14 <input type="button" value="点击" onclick="btnClick()" />
    15 </body>

      顺便说下getElementById("linkbtn").innerText 和getElementById("linkbtn").innerHTML的区别。前者只取<linkbutton>和</linkbutton>之间的文字,

    后者包括<linkbutton>和</linkbutton>之间的所有代码,比如<font>想</font>什么的。

    所以可以用getElementById("divMain").innerHTML="<input type="button" value="按钮">"代替上面的document.createElement.

       动态创建表格的例子:

     1 function LoadData(){
    2 var data = {"百度":"http://www.baidu.com", "新浪":"http://www.sina.com", "QQ":"http://www.qq.com", };
    3 var tableLink = document.getElementById("tableLink");
    4 for (var key in data){
    5 var value = data[key];
    6 var tr = tableLink.insertRow(-1); //firefox里面需要-1这个参数 插入一行并返回插入的对象
    7
    8 var td1 = tr.insertCell(-1);
    9 td1.innerText = key; //firefox下不支持innerText
    10
    11 var td2 = tr.insertCell(-1);
    12 td2.innerHTML = "<a href='"+value+"'>"+value+"</a>"; //也可以使用createElement
    13 }
    14 }
    15
    16 <body>
    17 <table id="tableLink"></table>
    18 <input type="button" value="创建链接" onclick="LoadData()" />
    19 </body>

       无刷新评论的例子:

     1 <head>
    2 <script type="text/javascript">
    3 function AddComment(){
    4 var nickname = document.getElementById("nickname").value;
    5 var comment = document.getElementById("comment").value;
    6
    7 var tableComment = document.getElementById("tableComment");
    8 var tr = document.createElement("tr");
    9
    10 var tdNickName = document.createElement("td");
    11 tdNickName.innerText = nickname;
    12 tr.appendChild(tdNickName);
    13
    14 var tdComment = document.createElement("td");
    15 tdComment.innerText = comment;
    16 tr.appendChild(tdComment);
    17
    18 tableComment.tBodies[0].appendChild(tr); //tBody是考虑兼容性问题
    19 }
    20 </script>
    21 <head>
    22 <body>
    23 <table id="tableComment">
    24 <tbody>
    25 </tbody>
    26 </table>
    27 昵称:<input id="nickname" type="text" /><br />
    28 <textarea id="comment"></textarea><br />
    29 <input type="button" value="评论" onclick="AddComment()" />
    30 </body>
  • 相关阅读:
    在windows桌面显示IP等信息的小工具分享
    oracle,根据查询结果结构创建新表
    Oracle多表关联如何更新多个字段
    我想实现一个通用的配置读写类
    【转】Android程序右上角不显示3个点的菜单
    python发送 IBM lotus Notes 邮件
    当超过端口MTU时
    为什么telnet可以用来检查TCP端口是否正常?
    55+手绘网站设计 – 构建极具创新效果的网站
    炫酷动态静图40例——多图杀猫
  • 原文地址:https://www.cnblogs.com/tangzhengyue/p/2291033.html
Copyright © 2011-2022 走看看