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. 串口数据监视 Serial Port Monitor

    串口数据监视工具 Serial Port Monitor可以在其它应用读写串口时监视串口数据, 很好用,但只有15天试用期.

  2. 【题解】Generator(UVA1358)

    感觉我字符串和期望都不好-- 题目链接 题意 有 \(n\) 种字符,给定一个模式串 \(S\) ,一开始字符串为空,现在每次随机生成一个 1~n 的字符添加到字符串末尾,直到出现 \(S\) 停止, ...

  3. Java并发编程的艺术（四）——JMM、重排序、happens-before

    什么是JMM JMM就是Java内存模型.目的是为了屏蔽系统和硬件的差异,让同一代码在不同平台下能够达到相同的访问结果.规定了线程和内存之间的关系. 内存划分 JMM规定了内存主要划分为主内存和工作内 ...

  4. Vulnhub实战靶场：ME AND MY GIRLFRIEND: 1

    一.环境搭建 1.官网下载连接:https://www.vulnhub.com/entry/me-and-my-girlfriend-1,409/ 2.下载之后,使用Oracle VM Virtual ...

  5. VS2015配置海康威视工业相机SDK二次开发

    1.概述:工业相机SDK是用于控制相机的一个独立组件,支持获取实时图像数据.配置参数.对图像进行后续处理等功能.工业相机SDK兼容GigE Vision协议.USB3 Vision协议.Camera ...

  6. Linux下yum下载依赖包

    先安装依赖包yum-plugin-downloadonly [root@node1 ~]# yum install yum-plugin-downloadonly 方法一: [root@node1 ~ ...

  7. php代码审计小技巧

    1.file_put_contents()函数:众所周知此函数是将一个字符串写入至文件中. 看到此函数说明当传入数据为数组时,会被PHP强制转换为字符串,因此会绕过正则达到getshell的目的. & ...

  8. Mysql技术内幕之InnoDB锁探究

    自7月份换工作以来,期间一直在学习MySQL的相关知识,听了一些视频课,但是一直好奇那些讲师的知识是从哪里学习的.于是想着从书籍中找答案.毕竟一直 看视频也不是办法,不能形成自己的知识.于是想着看书汲 ...

  9. Tensorflow Windows安装

    操作系统: Windows 7 安装步骤 Step 1: 安装Tensorflow支持的Python版本,配置环境变量 目前,Tensorflow支持: Python 3.5.x 64-bit fro ...

  10. day021|python之面向对象进阶1

    面向对象进阶 目录 面向对象进阶 1 继承 1.1 继承入门 1.1.1 继承基础 1.1.2 类的基本使用 1.2 多继承 1.2.1 多继承的基本使用 1.2.2 多继承以后的重复性 1.3 类的 ...