JavaScript 基础

事件

事件是指输入设备与页面之间进行交互的响应。

常用的事件：

  • onload 加载完成事件：页面加载完成之后，常用于页面 js 代码初始化操作；
  • onclick 单击事件：常用于按钮的点击响应操作；
  • onblur 失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法；
  • onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作；
  • onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。

事件的注册（绑定）：告诉浏览器，当事件响应后需要执行哪些操作代码。分为两种类型：

  • 静态注册事件：通过 html 标签的事件属性直接赋予事件响应后的代码；
  • 动态注册事件：先通过 js 代码得到标签的 DOM 对象，然后再通过 对象.事件名 = funciton() {} 这种形式赋予事件响应后的代码。基本步骤：
    • 获取标签 DOM 对象
    • 对象.事件名 = funciton() {}

onload

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>onload 加载完成事件</title>

    <script type="text/javascript">

        // 静态注册

        function onLoadFun() {

            alert("静态注册 onload 事件");

        }

        // 动态注册

        window.onload = function () {

            alert("动态注册 onload 事件");

        }

    </script>

</head>

<!--onload 事件是浏览器解析完页面之后就会自动触发的事件-->

<body onload="onLoadFun()">

</body>

</html>

onclick

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>onclick 单击事件</title>

    <script type="text/javascript">

        function onClickFun() {

            alert("静态注册 onclick 事件");

        }

        window.onload = function () {

            // 1.

            let btnObj = document.getElementById("btn02");

            // 2.

            btnObj.onclick = function () {

                alert("动态注册 onclick 事件");

            }

        }

    </script>

</head>

<body>

    <button onclick="onClickFun()">按钮1</button>

    <button id="btn02">按钮2</button>

</body>

</html>

onblur

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>onblur 失去焦点事件</title>

    <script type="text/javascript">

        // console 是控制台对象，是由 JavaScript 语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用

        function onBlurFun() {

            console.log("静态注册 onblur 事件");

        }

        window.onload = function () {

            let element = document.getElementById("password");

            element.onblur = function () {

                console.log("动态注册 onblur 事件");

            }

        }

    </script>

</head>

<body>

    <table>

        <tr>

            <th>用户名</th>

            <th><input type="text" onblur="onBlurFun()"></th>

        </tr>

        <tr>

            <th>密码</th>

            <th><input type="password" id="password"></th>

        </tr>

    </table>

</body>

</html>

onchange

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>onchange 内容发生改变事件</title>

    <script type="text/javascript">

        function onChangeFun() {

            alert("最喜欢的编程语言已变化！")

        }

        window.onload = function () {

            let tools = document.getElementById("tools");

            tools.onchange = function () {

                alert("最喜欢的开发工具已变化！")

            }

        }

    </script>

</head>

<body>

    <label>

        请选择你最喜欢的编程语言：

        <select onchange="onChangeFun()">

            <option>Java</option>

            <option selected="selected">Python</option>

            <option>JavaScript</option>

            <option>C++</option>

        </select>

    </label>

    <br>

    <label for="tools">请选择你最喜欢的开发工具：</label><select id="tools">

        <option>IDEA</option>

        <option>VSCode</option>

        <option>Vim</option>

        <option>GitHub</option>

    </select>

</body>

</html>

onsubmit

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>onsubmit 表单提交事件</title>

    <script type="text/javascript">

        function onSubmitFun() {

            // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交

            alert("静态注册表单提交事件 - 发现不合法");

            return false;

        }

        window.onload = function () {

            let form1 = document.getElementById("form1");

            form1.onsubmit = function () {

                alert("静态注册表单提交事件 - 发现合法");

                return true;

            }

        }

    </script>

</head>

<body>

    <!--return false 可以阻止 表单提交 -->

    <form action="http://localhost:8080" method="get" onsubmit="return onSubmitFun()">

        <input type="submit" name="submit" value="静态注册">

    </form>

    <form action="http://localhost:8080" method="post" id="form1">

        <input type="submit" name="submit" value="动态注册">

    </form>

</body>

</html>

DOM

DOM（Document Object Model），即文档对象模型。它把 HTML 文档中的标签，属性，文本等转换成对象来管理。

Document 对象：

对 Document 对象的理解：

  • Document 它管理了所有的 HTML 文档内容；
  • Document 是一种树结构的文档，有层级关系；
  • Document 把所有的标签都对象化。
<body>

    <div id="div01">div01</div>

</body>

以上的 html 标签对象化，相当于：

class DOM {

    private String id;  // id 属性

    private String tagNmae; // 标签名

    private DOM parentNode; // 父节点

    private List<DOM> childrens;    // 孩子节点

    private String innerHTML;   // 起始标签和结束标签中间的内容

}

Document 对象的常用方法：

  • document.getElementById(elementId) 通过标签的 id 属性查找标签的 DOM 对象引用，elementId 是标签的 id 属性值；
  • document.getElementsByname(elementName) 通过标签的 name 属性查找标签的 DOM 对象集合，elementName 是标签的 name 属性值；
  • document.getElementsByTagName(tagName) 通过标签名查找标签 DOM 对象集合，tagName 是标签名；
  • document.createElement(tagName) 通过给定的标签名，创建一个标签对象，tagName 是要创建的标签名。

注意：Document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询。如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询。如果 id 属性和 name 属性都没有最后再按标签名来进行查询 getElementsByTagName。而且，一定要在页面加载完成之后执行，才能查询到标签对象。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>getElementById 方法示例</title>

    <style type="text/css">

        img {

            width: 18px;

            height: 18px;

        }

    </style>

    <script type="text/javascript">

        // 当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。

        // 验证的规则是：必须由字母，数字。下划线组成。并且长度是 5 到 12 位。

        function onClickFun() {

            let username = document.getElementById("username");

            let usernameText = username.value;

            // 正则表达式

            let pattern = /^\w{5,12}$/;

            let usernameSpan = document.getElementById("usernameSpan");

            usernameSpan.innerHTML = "Hello World!";

            if (pattern.test(usernameText)) {

                // usernameSpan.innerHTML = "用户名合法！";

                usernameSpan.innerHTML = "<img src=\"../img/right.png\" alt=\"资源不存在\">";

            } else {

                // usernameSpan.innerHTML = "用户名不合法！";

                usernameSpan.innerHTML = "<img src=\"../img/wrong.png\" alt=\"资源不存在\">";

            }

        }

    </script>

</head>

<body>

    <label for="username">用户名：</label><input type="text" id="username" value="xxx"/>

    <button onclick="onClickFun()">校验</button>

    <span id="usernameSpan" style="color: red">

    </span>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>getElementsByName 方法示例</title>

    <script type="text/javascript">

        // 实现 全选 全不选 反选

        // document.getElementsByName() 是根据 指定的 name 属性查询返回多个标签对象集合

        // 这个集合的操作跟数组一样，集合中每个元素都是 dom 对象

        let lang = document.getElementsByName("lang");

        function checkAll() {

            for (let i = 0; i < lang.length; i++) {

                lang[i].checked = true;

            }

        }

        function checkNo() {

            for (let i = 0; i < lang.length; i++) {

                lang[i].checked = false;

            }

        }

        function checkReverse() {

            for (let i = 0; i < lang.length; i++) {

                lang[i].checked = !lang[i].checked;

            }

        }

    </script>

</head>

<body>

    喜欢的编程语言：

    <label>

        <input type="checkbox" name="lang" value="java" checked="checked">

    </label>Java

    <label>

        <input type="checkbox" name="lang" value="cpp">

    </label>C++

    <label>

        <input type="checkbox" name="lang" value="python">

        Python

    </label>

    <label>

        <input type="checkbox" name="lang" value="js">

        JavaScript

    </label>

    <br>

    <button onclick="checkAll()">全选</button>

    <button onclick="checkNo()">全不选</button>

    <button onclick="checkReverse()">反选</button>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>getElementsByTagName 方法示例</title>

    <script type="text/javascript">

        let lang = document.getElementsByTagName("input");

        function checkAll() {

            for (let i = 0; i < lang.length; i++) {

                lang[i].checked = true;

            }

        }

        function checkNo() {

            for (let i = 0; i < lang.length; i++) {

                lang[i].checked = false;

            }

        }

        function checkReverse() {

            for (let i = 0; i < lang.length; i++) {

                lang[i].checked = !lang[i].checked;

            }

        }

    </script>

</head>

<body>

喜欢的编程语言：

<label>

    <input type="checkbox" name="lang" value="java" checked="checked">

</label>Java

<label>

    <input type="checkbox" name="lang" value="cpp">

</label>C++

<label>

    <input type="checkbox" name="lang" value="python">

    Python

</label>

<label>

    <input type="checkbox" name="lang" value="js">

    JavaScript

</label>

<br>

<button onclick="checkAll()">全选</button>

<button onclick="checkNo()">全不选</button>

<button onclick="checkReverse()">反选</button>

</body>

</html>


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>createElement 方法示例</title>

    <script type="text/javascript">

        window.onload = function () {

            // 使用 js 创建 html 标签，并显示在页面上

            // 标签内容为 <div> Hello World </div>

            let divObj = document.createElement("div");

            let textNodeObj = document.createTextNode("Hello World");

            divObj.appendChild(textNodeObj);

            document.body.appendChild(divObj);

        }

    </script>

</head>

<body>

</body>

</html>

节点的常用属性和方法：

  • 节点就是标签对象；
  • getElementsByTagName() 获取当前节点的指定标签名孩子节点
  • appendChild( oChildNode) 可以添加一个子节点，oChildNode 是要添加的孩子节点
  • childNodes 获取当前节点的所有子节点
  • firstChild 获取当前节点的第一个子节点
  • lastChild 获取当前节点的最后一个子节点
  • parentNode 获取当前节点的父节点
  • nextSibling 获取当前节点的下一个节点
  • previousSibling 获取当前节点的上一个节点
  • className 用于获取或设置标签的 class 属性值
  • innerHTML 表示获取/设置起始标签和结束标签中的内容
  • innerText 表示获取/设置起始标签和结束标签中的文本

练习和总结

【JavaWeb】JavaScript 基础的更多相关文章

  1. JavaScript基础

    JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...

  2. 一步步学习javascript基础篇（0）:开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  3. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  4. 一步步学习javascript基础篇（3）：Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  5. Javascript基础回顾 之(三) 面向对象

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  6. Javascript基础回顾 之(二) 作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  7. Javascript基础回顾 之(一) 类型

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  8. JavaScript 基础回顾——对象

    JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...

  9. javascript基础01

    javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...

随机推荐

  1. 【题解】「AT4266」[ABC113B] Palace

    AT4266 [ABC113B] Palace 水题解*n translation 有 \(n\) 个地方,第 \(i\) 个地方的海拔为 \(H_i\),该地方的温度为 \(T-H_i \times ...

  2. Zabbix自定义模板监控多个url接口

    一.脚本配置 1.监控脚本 /etc/zabbix/zabbix_agent2.d/scripts/web_site_code_status.sh #!/bin/bash url_discovery( ...

  3. mysql 迁移数据库到 oracle （sql注意问题）

    http://ykdn2010.iteye.com/blog/1511349 一． 项目已用到 oracle 函数的转换 1．  Oracle 中的 TO_DATE (),TO_CHAR () 示例: ...

  4. Element-ui 实现table的合计功能

    Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,其功能较为完善,根据其文档与demo学习,非常容易上手,但是我在使用其tabel组件时,发现我的功能 需求并不 ...

  5. STL——容器（List）list 的反序排列

    list.reverse(); //反转链表,比如list包含1, 2, 3, 4, 5五个元素,运行此方法后,list就包含5, 4, 3, 2, 1元素. 1 #include <iostr ...

  6. 20201203-5 批量发送 email【】

    1-1 批量发送 email 1 from openpyxl import load_workbook 2 import smtplib 3 from email.mime.text import M ...

  7. G1 收集器

    基础知识 性能指标 在调优Java应用程序时,重点通常放在两个主要目标上:响应性 或 吞吐量. 响应性Responsiveness 是指应用程序对请求的数据做出响应的速度: 桌面用户界面对事件的响应速 ...

  8. 多个HDFS集群的fs.defaultFS配置一样，造成应用一直连接同一个集群的问题分析

    背景 应用需要对两个集群中的同一目录下的HDFS文件个数和文件总大小进行比对,在测试环境中发现,即使两边HDFS目录下的数据不一样,应用日志显示两边始终比对一致,分下下来发现,应用连的一直是同一个集群 ...

  9. VMware虚拟机安装Win7填坑

    今天本想赶紧安装Win7虚拟机做个实验,结果鼓捣了一天,写个文章填下坑. 一.Win7镜像文件下载 下载ISO镜像地址:http://msdn.itellyou.cn/ 二.安装tools VMwar ...

  10. vue API 知识点（3） --- 实例 总结

    一.实例 property 1.vm.$data Vue 实例观察的数据对象,Vue 实例代理了对其 data 对象 property 的的访问 2.vm.$props 当前组件接收到的 props ...