1.1 Event 对象

<body>

    <a id="myAnchor" href="http://www.microsoft.com">访问 Microsoft</a>

    <input type="button" onclick="changeLink()" value="改变链接">

    <script type="text/javascript">

        function changeLink() {

        document.getElementById('myAnchor').innerHTML="访问 W3School"

        document.getElementById('myAnchor').href="http://www.w3school.com.cn"

        document.getElementById('myAnchor').target="_blank"

        }

    </script>

</body>

更改一个链接的文本、URL 以及 target

<body onmousedown="whichButton(event)">

    <p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>

    <script type="text/javascript">

        function whichButton(event) {

            var btnNum = event.button;

            if (btnNum==2) {

              alert("您点击了鼠标右键！")

              }

            else if(btnNum==0) {

              alert("您点击了鼠标左键！")

              }

            else if(btnNum==1) {

              alert("您点击了鼠标中键！");

              }

            else {

              alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");

              }

        }

    </script>

</body>

哪个鼠标按钮被点击？

<body onmousedown="show_coords(event)">

    <p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>

    <script type="text/javascript">

        function show_coords(event) {

            x=event.clientX;

            y=event.clientY;

            alert("X 坐标: " + x + ", Y 坐标: " + y)

        }

    </script>

</body>

光标的坐标是？

<body onkeyup="whichButton(event)">

    <p><b>注释：</b>在测试这个例子时，要确保右侧的框架获得了焦点。</p>

    <p>在键盘上按一个键。消息框会提示出该按键的 unicode。</p>

    <script type="text/javascript">

        function whichButton(event) {

            alert(event.keyCode)

        }

    </script>

</body>

被按的按键的 unicode 是？

<body onmousedown="isKeyPressed(event)">

    <p>在文档中点击某个位置。消息框会告诉你是否按下了 shift 键。</p>

    <script type="text/javascript">

        function isKeyPressed(event) {

          if (event.shiftKey==1) {

              alert("The shift key was pressed!")

            } else {

            alert("The shift key was NOT pressed!")

            }

          }

    </script>

</body>

shift 键被按了吗？

<body onmousedown="getEventType(event)">

    <p>在文档中点击某个位置。消息框会提示出被触发的事件的类型。</p>

    <script type="text/javascript">

        function getEventType(event) {

          alert(event.type);

        }

    </script>

</body>

哪个事件类型发生了？

<body>

    <div>

        <textarea placeholder="输入咨询内容" class="my_msg" onkeydown="isEnter(event)" autofocus></textarea>

    </div>

    <script>

        // 在textarea里按下ctrl+回车，立即调用发送函数

        function isEnter(event) {

            if(event.keyCode==13 && event.ctrlKey){

                console.log("enter");

                // send_msg();

            }

        }

    </script>

</body>

ctrl+回车，立即调用发送函数

1.2 Form 和 Input 对象

<body>

    <form id="myForm" action="/old_path/">

    名称：<input type="text" value="米老鼠" />

    <input type="button" onclick="changeAction()" value="改变 action 属性并提交表单" />

    </form>

    <script type="text/javascript">

        function changeAction() {

            var x=document.getElementById("myForm");

            alert("Original action: " + x.action);

            x.action="/newpath/";

            alert("New action: " + x.action);

            x.submit()

        }

    </script>

</body>

更改表单的 action 属性

<body>

    <form id="myForm" method="post">

        名称：<input type="text" value="米老鼠" />

        <input type="button" onclick="showMethod()" value="显示 method" />

    </form>

    <script type="text/javascript">

        function showMethod() {

            var x=document.getElementById("myForm")

            alert(x.method)

        }

    </script>

</body>

获取提交数据方式：post、get等

<body>

    <form>

        <input type="checkbox" id="myCheck" />

        <input type="button" onclick="check()" value="选定复选框" />

        <input type="button" onclick="uncheck()" value="取消选定复选框" />

    </form>

    <script type="text/javascript">

        function check() {

            document.getElementById("myCheck").checked=true

        }

        function uncheck() {

            document.getElementById("myCheck").checked=false

        }

    </script>

</body>

选定以及不选定 checkbox

<body>

    <form id="myForm">

        姓名：<input type="text" size="20"><br />

        年龄：<input type="text" size="20"><br />

        <br />

        <input type="button" onclick="formReset()" value="重置">

    </form>

    <script type="text/javascript">

        function formReset() {

            document.getElementById("myForm").reset()

        }

    </script>

</body>

重置表单

<body>

    <form id="myForm" action="/login/" method="get">

        名：<input type="text" name="firstname" size="20"><br />

        姓：<input type="text" name="lastname" size="20"><br />

        <br />

        <input type="button" onclick="formSubmit()" value="提交">

    </form>

    <script type="text/javascript">

        function formSubmit(){

            document.getElementById("myForm").submit()

        }

    </script>

</body>

提交表单

<body>

    <form action="/login/" onsubmit="return validate()">

        名字（最多 10 个字符）：<input type="text" id="fname" size="20"><br />

        年龄（从 1 到 100）：<input type="text" id="age" size="20"><br />

        电子邮件：<input type="text" id="email" size="20"><br />

        <br />

        <input type="submit" value="提交">

    </form>

    <script type="text/javascript">

        function validate() {

            var at=document.getElementById("email").value.indexOf("@");

            var age=document.getElementById("age").value;

            var fname=document.getElementById("fname").value;

            submitOK="true";

            if (fname.length>10) {

                 alert("名字必须小于 10 个字符。");

                 submitOK="false"

             }

            if (isNaN(age)||age<1||age>100) {

                 alert("年龄必须是 1 与 100 之间的数字。");

                 submitOK="false"

             }

            if (at==-1) {

                 alert("不是有效的电子邮件地址。");

                 submitOK="false"

             }

            if (submitOK=="false") {

                return false

             }

        }

    </script>

</body>

验证表单

1.3 Image 对象

<body>

    <img id="compman" src="/static/aa.png" />

    <br /><br />

    <input type="button" onclick="changeSize()" value="改变图像的高度和宽度">

    <script type="text/javascript">

        function changeSize() {

            document.getElementById("compman").height="270";

            document.getElementById("compman").width="164"

        }

    </script>

</body>

更改图像的高度和宽度

<body>

    <img id="myImage" src="/static/aa.png" />

    <br /><br />

    <input type="button" onclick="changeSrc()" value="改变图像">

    <script type="text/javascript">

        function changeSrc() {

            document.getElementById("myImage").src="/i/eg_smile.gif"

        }

    </script>

</body>

更改图像的 src

02: DOM 实例的更多相关文章

  1. Java-Runoob-高级教程-实例-方法：02. Java 实例 – 输出数组元素

    ylbtech-Java-Runoob-高级教程-实例-方法:02. Java 实例 – 输出数组元素 1.返回顶部 1. Java 实例 - 输出数组元素  Java 实例 以下实例演示了如何通过重 ...

  2. Java-Runoob-高级教程-实例-时间处理：02. Java 实例 - 获取当前时间

    ylbtech-Java-Runoob-高级教程-实例-时间处理:02. Java 实例 - 获取当前时间 1.返回顶部 1. Java 实例 - 获取当前时间  Java 实例 以下实例演示了如何使 ...

  3. Java-Runoob-高级教程-实例-字符串：02. Java 实例 - 查找字符串最后一次出现的位置

    ylbtech-Java-Runoob-高级教程-实例-字符串:02. Java 实例 - 查找字符串最后一次出现的位置 1.返回顶部 1. Java 实例 - 查找字符串最后一次出现的位置  Jav ...

  4. Java-Runoob-高级教程-实例-数组：02. Java 实例 – 数组添加元素

    ylbtech-Java-Runoob-高级教程-实例-数组:02. Java 实例 – 数组添加元素 1.返回顶部 1. Java 实例 - 数组添加元素  Java 实例 以下实例演示了如何使用s ...

  5. no-jquery 02 DOM

    DOM Manipulation Creating Elements // IE 5.5+ document.createElement('div'); Inserting Elements Befo ...

  6. HTML DOM 实例-Document 对象

    使用 document.write() 向输出流写文本 <html><body><script type="text/javascript">d ...

  7. DOM实例

    同一种功能两种方法: <script type='text/javascript'> <!-- var tag = document.creatElement("a&quo ...

  8. JS DOM 实例（5大常用实例）

    第1个实例:循环单击变色 <html lang="en"> <head> <meta charset="UTF-8"> &l ...

  9. TERSUS无代码开发(笔记02)-简单实例加法

    简单实例加法 1.用户端元件(显示元件)(40个) 图标 英文名称 元件名称 使用说明 服务器端 客户端 Pane 显示块 是一个显示块,是HTML的div标签   √ Row 行 行元件中的显示元件 ...

随机推荐

  1. IntelliJ IDEA学习记录

    一.下载 地址:官网下载地址 二.安装 运行安装程序,一路下一步.注意选择安装路径. 三.基本概念 project:相当于donet中的解决方案(solution),eclipse中的工作空间(wor ...

  2. UVA 11168 - Airport - [凸包基础题]

    题目链接:https://cn.vjudge.net/problem/UVA-11168 题意: 给出平面上的n个点,求一条直线,使得所有的点在该直线的同一侧(可以在该直线上),并且所有点到该直线的距 ...

  3. Mergeable Stack 直接list内置函数。(152 - The 18th Zhejiang University Programming Contest Sponsored by TuSimple)

    题意:模拟栈,正常pop,push,多一个merge A B 形象地说就是就是将栈B堆到栈A上. 题解:直接用list 的pop_back,push_back,splice 模拟, 坑:用splice ...

  4. linux：查找搜索文件

    学习内容来源: 实验楼链接: https://www.shiyanlou.com/ 与搜索相关的命令常用的有 whereis,which,find 和 locate . whereis 简单快速 $w ...

  5. 记录一下自己的.tmux.conf，.vimrc

    ~/.tmux.conf set -g default-terminal "screen-256color" set -g prefix C-a bind C-a send-pre ...

  6. JS "trycatch工厂模式"

    大家都用过Ajax的异步交互,下面的代码中使用  "trycatch工厂模式"  来进行针对Ajax请求对象的变化点进行封装 <script type="text/ ...

  7. swap file "*.swp" already exists!

    ll -a rm .*.swp

  8. 对nodejs的理解（一）

    1.介绍一下事件驱动编程---快餐店点餐. 在基于线程的方式中(thread-based way)你到了柜台前,把你的点餐单给收银员或者给收银员直接点餐,然后等在那直到你要的食物准备好给你.收银员不能 ...

  9. mysql 数据备份与恢复

    1.mysql的备份 命令:"mysqldump -u root -p 数据库名 [表名] > 备份文件名" 不写表名默认备份所有整个数据库. 注意:备份的文件中没有创建数据 ...

  10. 【Mysql优化三章】第一章

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/Bv5f4b8Peex/article/details/78130845 如今网上的好多mysql优化 ...