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. 自定义3D地图

    基于echarts的3D地图进行,直接将这代码粘贴到echarts的demo中即可呈现效果 var mygeo = { // 标准的geojson格式 "type": " ...

  2. java实现TCP通信（带界面）

    服务端: package NetWork; import java.io.*;import java.net.*;import java.awt.event.*;import java.awt.*;i ...

  3. 终于不再对transition和animation,傻傻分不清楚了 --vue中使用transition和animation

    以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition ...

  4. 横向无文件移动--SCshell使用

    1.简介 SCShell是无文件横向移动工具,它依赖ChangeServiceConfigA来运行命令.该工具的优点在于它不会针对SMB执行身份验证.一切都通过DCERPC执行.无需创建服务,而只需通 ...

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

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

  6. Java IO流 FileOutputStream、FileInputStream的用法

    FileOutputStream.FileInputStream的使用 FileOutputStream是OutputStream的继承类,它的主要功能就是向磁盘上写文件.FileOutputStre ...

  7. [日常摸鱼]JSOI2008最大数

    校运会的时候随手抽的题- 一句话题意 维护一个序列,初始为空,要求滋兹: 1.查询这个序列末尾$x$个数的最大值 2.设上一次查询的答案为$t$(如果还没查询$t=0$),在末尾插入一个数$(x+t) ...

  8. 安装nodejs 版本控制器

    安装下载地址: https://pan.baidu.com/s/1Ed_IPDTOHxR9NShUEau-ZA 下载好后,放在安装nodejs的文件夹下 然后敲cmd,进入安装nodejs的文件夹下. ...

  9. 你只用do-while来实现循环？太浪费了！

    这是道哥的第010篇原创 目录 前言 在宏定义中的妙用 错误的宏定义 比较好的宏定义 另一个也不错的宏定义 在函数体中的妙用 函数功能:返回错误代码对应的错误字符串 函数功能:通过TCP Socket ...

  10. 【java学习笔记2】访问控制修饰符 public、protected、默认、private

    先写了一个User()类: package chapter01; public class User { // 私有的 private int id; // 受保护的 protected int ag ...