JavaScript进阶

布满荆棘的人生 2023-05-28 14:13 3阅读 0赞

### 目录 ###

*  一、初见DOM
 *  二、初见事件
 *   *  案例1：电灯开关
 *  三、BOM
 *   *  1、概念
     *  2、组成：
     *  3、Window 窗口对象
     *   *  1. 方法
         *  案例2：轮播图
         *  2. 属性
     *  3、Location 地址栏对象
     *   *  案例3：自动跳转
     *  4、History 历史记录对象
 *  四、DOM
 *   *  1、核心DOM模型
     *   *  Document：文档对象
         *  Element：元素对象
         *  Node：节点对象，其他5个的父对象
         *  案例4：动态表格
     *  2、HTML DOM
     *   *  标签体的设置和获取：innerHTML
         *  使用html元素对象的属性
         *  控制元素样式
 *  五、事件监听机制
 *   *  概念
     *  常用事件
     *  案例5：表格全选
     *  案例6：表单校验

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70]  
[JavaScript基础][JavaScript]中提到，JavaScript可分为两部分学习：ECMAScript + JavaScript特有内容(BOM+DOM)。本文将学习后半部分BOM+DOM，在深入探讨前，为了能实现简单的案例，先粗略地学习一下DOM和事件，然后再学习BOM+DOM的细节。

# 一、初见DOM #

功能：通过js控制html文档的内容。  
通用步骤：  
1.获取页面标签(元素)对象：Element  
document.getElementById(“id值”):通过元素的id获取元素对象

2.操作Element对象：  
具体的对象和有哪些属性可操作，可以参考：[js参考书][js]。  
获取到对象之后，一般可以进行两种修改，标签的属性值或标签体：

*  修改属性值  
    改变该元素的属性：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][20200322223529443.png]  
效果：弹窗之后图片完成了切换——  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 2]

*  修改标签体内容：
    
    使用innerHTML属性修改标签体内容  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 3]  
    效果就是文本会实现替换。![在这里插入图片描述][20200322223730255.png]  
    以上就是一些基本但是又很常用的DOM操作。

# 二、初见事件 #

功能： 某些组件被执行了某些操作后，触发某些代码的执行。  
比如队友触发了送一血，触发了其他队友开喷，这里的送一血就是一个事件。

如何绑定事件：

*  法1：直接在html标签上，指定事件的属性(操作)，属性值就是js代码  
    最常见的事件：onclick — 单击事件  
    例如：

点击图片后将触发onclick事件，进而执行alert代码。  
优化后可以这么写:

<img id="light" src="img/off.gif" onclick="fun();">
    
    <script> function fun(){ alert('我被点了'); alert('我又被点了'); } </script>

*  法2：通过js获取元素对象，指定其事件属性，设置一个函数，当事件发生时调用该函数。相比法1实现了元素和事件在编码上的解耦。

<img id="light2" src="img/off.gif">
    
    <script> function fun2(){ alert('咋老点我？'); } //1.获取light2对象 var light2 = document.getElementById("light2"); //2.绑定事件 light2.onclick = fun2; </script>

## 案例1：电灯开关 ##

现在页面上有一张电灯图片，我们需要达到这样的效果——通过单击它来控制灯的开关。

分析：  
1.获取图片对象  
2.绑定单击事件  
3.每次点击切换图片，如果灯是开的 on，切换图片为 off，如果灯是关的 off,切换图片为 on，使用标记flag来表示其状态。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>电灯开关</title>
    
    </head>
    <body>
    
    <img id="light" src="img/off.gif">
    
    <script> //1.获取图片对象 var light = document.getElementById("light"); var flag = false;//代表灯是灭的。 off图片 //2.绑定单击事件 light.onclick = function () { if (flag) { //判断如果灯是开的，则灭掉 light.src = "img/off.gif"; flag = false; } else { //如果灯是灭的，则打开 light.src = "img/on.gif"; flag = true; } } </script>
    </body>
    </html>

![在这里插入图片描述][20200322225828968.png]单击->![在这里插入图片描述][20200322225839498.png]

# 三、BOM #

## 1、概念 ##

Browser Object Model 浏览器对象模型

## 2、组成： ##

Window ：窗口对象  
Navigator：浏览器对象  
Screen：显示器屏幕对象  
History ：历史记录对象  
Location ：地址栏对象

## 3、Window 窗口对象 ##

> Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document。

### 1. 方法 ###

1） **与弹出框有关的方法**：

*  **alert**() 显示带有一段消息和一个确认按钮的警告框。
 *  **confirm**() 显示带有一段消息以及确认按钮和取消按钮的对话框。  
    如果用户点击确定按钮，则方法返回true  
    如果用户点击取消按钮，则方法返回false

var flag = confirm("您确定要退出吗？");
    
             if(flag){ 
                 //退出操作
    
                 alert("欢迎再次光临！");
             }else{ 
                 //提示：手别抖...
                 alert("手别抖...");
             }

![在这里插入图片描述][20200323002058536.png]

*  **prompt**() 显示可提示用户输入的对话框。  
    返回值：获取用户输入的值

2）**与打开关闭有关的方法**：

*  close() 关闭浏览器窗口。  
    “谁调用我 ，我关谁”
 *  open() 打开一个新的浏览器窗口  
    返回新的Window对象

//打开新窗口
            var openBtn = document.getElementById("openBtn");
            var newWindow;
            openBtn.onclick = function(){ 
                //打开新窗口
                newWindow = open("https://www.baidu.com");
            }
    
            //关闭新窗口
            var closeBtn = document.getElementById("closeBtn");
            closeBtn.onclick = function(){ 
               // 关闭新窗口
                newWindow.close();
            }

3） **与定时器有关的方法：**

*  setTimeout() 在指定的毫秒数后调用函数或计算表达式。  
    参数：  
    1. js代码或者方法对象  
    2. 毫秒值  
    返回值：唯一标识，用于取消定时器
 *  clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

// 一次性定时器
            //setTimeout("fun();",2000);
            var id = setTimeout(fun,2000);
            clearTimeout(id);
            function fun(){ 
                alert('boom~~');
            }

*  setInterval() 按照指定的周期（以毫秒计）来循环调用函数或计算表达式。
 *  clearInterval() 取消由 setInterval() 设置的 timeout。

function fun(){ 
                alert('boom~~');
            }
    
            //循环定时器
            var id = setInterval(fun,2000);
            clearInterval(id);

### 案例2：轮播图 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
    
    
    
    </head>
    <body>
    
        <img id="img" src="img/banner_1.jpg" width="100%">
    
        <script> /* 分析： 1.在页面上使用img标签展示图片 2.定义一个方法，修改图片对象的src属性 3.定义一个定时器，每隔3秒调用方法一次。 */ //修改图片src属性 var number = 1; function fun(){ number ++ ; //判断number是否大于3 if(number > 3){ number = 1; } //获取img对象 var img = document.getElementById("img"); img.src = "img/banner_"+number+".jpg"; } //2.定义定时器 setInterval(fun,3000); </script>
    </body>
    </html>

![在这里插入图片描述][20200324102028217.png]  
最终页面效果是每隔三秒图片会切换，并且这个过程将循环往复，

### 2. 属性 ###

1.  获取其他BOM对象：

*  history

var his = window.history;

*  location
 *  Navigator
 *  Screen

1.  获取DOM对象  
    document

## 3、Location 地址栏对象 ##

1.  创建(获取)：
    
    1.  window.location
    2.  location
2.  方法：

*  reload() 重新加载当前文档。刷新

1.  属性

*  href 可设置或返回当前完整的 URL，若设置新的URL相当于跳转

<body>
        <input type="button" id="btn" value="刷新">
    
        <input type="button" id="goWhere" value="去哪儿">
        <script> //reload方法，定义一个按钮，点击按钮，刷新当前页面 //1.获取按钮 var btn = document.getElementById("btn"); //2.绑定单击事件 btn.onclick = function(){ //3.刷新页面 location.reload(); } //获取href var href = location.href ; //alert(href); //点击按钮，去访问www.itcast.cn官网 //1.获取按钮 var goItcast = document.getElementById("goItcast"); //2.绑定单击事件 goItcast.onclick = function(){ //3.去访问www.baidu.com location.href = "https://www.baidu.com"; } </script>
    </body>

### 案例3：自动跳转 ###

实现这样的效果，倒计时后自动跳转到某个页面。  
![在这里插入图片描述][20200324103537641.png]  
分析：  
1.显示页面效果

2.倒计时读秒效果实现  
定义一个方法，获取span标签，修改span标签体内容，时间–  
定义一个定时器，1秒执行一次该方法

3.在方法中判断时间如果<= 0 ，则跳转到首页

实现：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>自动跳转</title>
        <style> p{ text-align: center; } span{ color:red; } </style>
    
    
    </head>
    <body>
        <p>
            <span id="time">5</span>秒之后，自动跳转到首页...
        </p>
    
    
        <script> // 倒计时读秒效果实现 var second = 5; var time = document.getElementById("time"); //定义一个方法，获取span标签，修改span标签体内容，时间-- function showTime(){ second -- ; //判断时间如果<= 0 ，则跳转到首页 if(second <= 0){ //跳转到首页 location.href = "https://www.baidu.com"; } time.innerHTML = second +""; } //设置定时器，1秒执行一次该方法 setInterval(showTime,1000); </script>
    </body>
    </html>

## 4、History 历史记录对象 ##

> History 对象包含用户（在浏览器窗口中）访问过的 URL。注意：只是单个窗口，而不是整个浏览器的记录。

1.  创建(获取)：
    
    1.  window.history
    2.  history
2.  方法：

*  back() 加载 history 列表中的前一个 URL。
 *  forward() 加载 history 列表中的下一个 URL。
 *  go(参数) 加载 history 列表中的某个具体页面。  
    参数——  
    正数：前进几个历史记录  
    负数：后退几个历史记录

1.  属性：

*  length 返回当前窗口历史列表中的 URL 数量。

# 四、DOM #

Document Object Model 文档对象模型  
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 4]  
W3C DOM 标准被分为 3 个不同的部分：

核心 DOM \- 针对任何结构化文档的标准模型

*  **Document**：文档对象
 *  **Element**：元素对象
 *  Attribute：属性对象
 *  Text：文本对象
 *  Comment:注释对象
 *  **Node**：节点对象，以上对象的父对象

XML DOM \- 针对 XML 文档的标准模型  
 HTML DOM \- 针对 HTML 文档的标准模型

## 1、核心DOM模型 ##

### Document：文档对象 ###

1.  创建(获取)：在html dom模型中可以使用window对象来获取  
    window.document 或 document
2.  方法：

*  获取Element对象：  
    getElementById() ： 根据 id属性值获取元素对象。id属性值一般唯一  
    getElementsByTagName()：根据元素名称 获取元素对象们。返回值是一个数组  
    getElementsByClassName():根据 Class属性值获取元素对象们。返回值是一个数组  
    getElementsByName(): 根据name属性值 获取元素对象们。返回值是一个数组
 *  创建其他DOM对象：  
    createAttribute(name)  
    createComment()  
    createElement()  
    createTextNode()

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document对象</title>
        
    </head>
    <body>
    
    
        <div id="div1">div1</div>
        <div id="div2">div2</div>
    
        <div id="div3">div3</div>
    
        <div class="cls1">div4</div>
        <div class="cls1">div5</div>
    
        <input type="text" name="username">
    
    <script> //根据元素名称获取元素对象们。返回值是一个数组 var divs = document.getElementsByTagName("div"); //alert(divs.length); //根据Class属性值获取元素对象们。返回值是一个数组 var div_cls = document.getElementsByClassName("cls1"); // alert(div_cls.length); //根据name属性值获取元素对象们。返回值是一个数组 var ele_username = document.getElementsByName("username"); //alert(ele_username.length); var table = document.createElement("table"); alert(table); </script>
    </body>
    </html>

### Element：元素对象 ###

1.  获取/创建：通过document来获取和创建
2.  方法：
    
    1.  removeAttribute()：删除属性
    2.  setAttribute()：设置属性

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Element对象</title>
    </head>
    <body>
        <a>点我试一试</a>
        <input type="button" id="btn_set" value="设置属性">
        <input type="button" id="btn_remove" value="删除属性">
    
    <script> //获取btn var btn_set =document.getElementById("btn_set"); btn_set.onclick = function(){ //1.获取a标签 var element_a = document.getElementsByTagName("a")[0]; element_a.setAttribute("href","https://www.baidu.com"); } //获取btn var btn_remove =document.getElementById("btn_remove"); btn_remove.onclick = function(){ //1.获取a标签 var element_a = document.getElementsByTagName("a")[0]; element_a.removeAttribute("href"); } </script>
    </body>
    </html>

### Node：节点对象，其他5个的父对象 ###

特点：所有dom对象都可以被认为是一个节点  
方法：  
CRUD dom树：

*  appendChild()：向节点的子节点**列表**的结尾添加新的子节点。
 *  removeChild() ：删除（并返回）当前节点的指定子节点。
 *  replaceChild()：用新节点替换一个子节点。

属性：

*  parentNode 返回节点的父节点。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Node对象</title>
        <style> div{ border: 1px solid red; } #div1{ width: 200px; height: 200px; } #div2{ width: 100px; height: 100px; } #div3{ width: 100px; height: 100px; } </style>
    
    </head>
    <body>
        <div id="div1">
            <div id="div2">div2</div>
            div1
        </div>
        <a href="javascript:void(0);" id="del">删除子节点</a>
        <a href="javascript:void(0);" id="add">添加子节点</a>
        
    <script> //1.获取超链接 var element_a = document.getElementById("del"); //2.绑定单击事件 element_a.onclick = function(){ var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div1.removeChild(div2); } //1.获取超链接 var element_add = document.getElementById("add"); //2.绑定单击事件 element_add.onclick = function(){ var div1 = document.getElementById("div1"); //给div1添加子节点 //创建div节点 var div3 = document.createElement("div"); div3.setAttribute("id","div3"); div1.appendChild(div3); } /* 超链接功能： 1.可以被点击：样式 2.点击后跳转到href指定的url 需求：保留1功能，去掉2功能 实现：href="javascript:void(0);" */ var div2 = document.getElementById("div2"); var div1 = div2.parentNode; alert(div1); </script>
    </body>
    </html>

### 案例4：动态表格 ###

效果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 5]  
分析：  
1.添加：

1. 给添加按钮绑定单击事件
    2. 获取文本框的内容
    3. 创建td，设置td的文本为文本框的内容。
    4. 创建tr
    5. 将td添加到tr中
    6. 获取table，将tr添加到table中

2.删除：

1.确定点击的是哪一个超链接
               <a href="javascript:void(0);" onclick="delTr(this);" >删除</a>
           2.如何删除？
               removeChild():通过父节点删除子节点

实现：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动态表格</title>
    
        <style> table{ border: 1px solid; margin: auto; width: 500px; } td,th{ text-align: center; border: 1px solid; } div{ text-align: center; margin: 50px; } </style>
    
    </head>
    <body>
    
    <div>
        <input type="text" id="id" placeholder="请输入编号">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="gender" placeholder="请输入性别">
        <input type="button" value="添加" id="btn_add">
    
    </div>
    
    
    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
    
        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>
    
        <tr>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>
    
        <tr>
            <td>3</td>
            <td>岳不群</td>
            <td>?</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
        </tr>
    
    
    </table>
    <script> //1.获取按钮 document.getElementById("btn_add").onclick = function(){ //2.获取文本框的内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; //3.创建td，赋值td的标签体 //id 的 td var td_id = document.createElement("td"); var text_id = document.createTextNode(id); td_id.appendChild(text_id); //name 的 td var td_name = document.createElement("td"); var text_name = document.createTextNode(name); td_name.appendChild(text_name); //gender 的 td var td_gender = document.createElement("td"); var text_gender = document.createTextNode(gender); td_gender.appendChild(text_gender); //a标签的td var td_a = document.createElement("td"); var ele_a = document.createElement("a"); ele_a.setAttribute("href","javascript:void(0);"); ele_a.setAttribute("onclick","delTr(this);"); var text_a = document.createTextNode("删除"); ele_a.appendChild(text_a); td_a.appendChild(ele_a); //4.创建tr var tr = document.createElement("tr"); //5.添加td到tr中 tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_a); //6.获取table var table = document.getElementsByTagName("table")[0]; table.appendChild(tr); } //删除方法 function delTr(obj){ var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script>
    
    </body>
    </html>

ps：在下文中有对本案例的改造。

## 2、HTML DOM ##

### 标签体的设置和获取：innerHTML ###

<body>
        <div id="div1">
            div
        </div>
    
    
        <script > var div = document.getElementById("div1"); var innerHTML = div.innerHTML; //alert(innerHTML); //div标签中替换一个文本输入框 div.innerHTML = "<input type='text'>"; //div标签中追加一个文本输入框 div.innerHTML += "<input type='text'>"; </script>
    </body>

现在使用innerHTML来改造一下*案例4：动态表格*——

//使用innerHTML添加
        document.getElementById("btn_add").onclick = function() { 
            //2.获取文本框的内容
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var gender = document.getElementById("gender").value;
    
            //获取table
            var table = document.getElementsByTagName("table")[0];
    
            //追加一行
            table.innerHTML += "<tr>\n" +
                " <td>"+id+"</td>\n" +
                " <td>"+name+"</td>\n" +
                " <td>"+gender+"</td>\n" +
                " <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\" >删除</a></td>\n" +
                " </tr>";
        }

可以看出，虽然方法不再是面向对象的，但是非常简洁。

### 使用html元素对象的属性 ###

需要用时查参考书文档即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 6]

### 控制元素样式 ###

两种方法：

*  使用元素的style属性来设置  
    如：

//修改样式方式1
    		        div1.style.border = "1px solid red";
    		        div1.style.width = "200px";
    		        //font-size--> fontSize
    		        div1.style.fontSize = "20px";

*  提前定义好类选择器的样式，通过元素的**className**属性来设置其class属性值。

<head>
        <meta charset="UTF-8">
        <title>控制样式</title>
    
    
        <style> .d1{ border: 1px solid red; width: 100px; height: 100px; } </style>
    </head>
    <body>
    
        <div id="div2">
            div2
        </div>
    
    <script> var div2 = document.getElementById("div2"); div2.onclick = function(){ div2.className = "d1"; } </script>
    
    </body>

# 五、事件监听机制 #

## 概念 ##

某些组件被执行了某些操作后，触发某些代码的执行。

*  事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了…
 *  事件源：组件。如： 按钮，文本输入框…
 *  监听器：代码。
 *  注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。JS绑定事件的方法在 二、初见事件中已经介绍。

## 常用事件 ##

1.  **点击**事件：

*  onclick：单击事件
 *  ondblclick：双击事件

1.  **焦点**事件

*  onblur：失去焦点 ——一般用于表单验证

document.getElementById("username").onblur = function(){ 
                    alert("失去焦点了...");
                }

*  onfocus:元素获得焦点。

1.  **加载**事件：

*  onload：一张页面或一幅图像完成加载。

window.onload = function(){ 
    		...
    }

这么写可以不必限制于脚本代码的位置，即使放在页面元素之前，也可以在页面加载完后才执行代码。

1.  **鼠标**事件：

*  onmousedown 鼠标按钮被按下。

> 定义方法时，定义一个形参，接受event对象。event对象的button属性可以获取哪个鼠标按键被点击。

*  onmouseup 鼠标按键被松开。
 *  onmousemove 鼠标被移动。
 *  onmouseover 鼠标移到某元素之上。
 *  onmouseout 鼠标从某元素移开。

//3.绑定鼠标点击事件
     document.getElementById("username").onmousedown = function(event){ 
        // alert("鼠标点击了....");
         alert(event.button);// 可以显示哪个键被按下
     }

1.  **键盘**事件：

*  onkeydown 某个键盘按键被按下。
 *  onkeyup 某个键盘按键被松开。
 *  onkeypress 某个键盘按键被按下并松开。

document.getElementById("username").onkeydown = function(event){ 
          if(event.keyCode == 13){  //回车
              alert("提交表单");
          }
    }

1.  **选择**和改变

*  onchange 域的内容被改变。
 *  onselect 文本被选中。

document.getElementById("username").onchange = function(event){ 
    
         alert("改变了...")
    
     }
    
    document.getElementById("city").onchange = function(event){ 
    
         alert("改变了...")
    
     }

1.  **表单**事件：

*  onsubmit 确认按钮被点击。

> 可以阻止表单的提交，方法返回false则表单被阻止提交。

document.getElementById("form").onsubmit = function(){ 
        //校验用户名格式是否正确
        var flag = false;
        return flag;
    }

*  onreset 重置按钮被点击。

## 案例5：表格全选 ##

效果：  
![在这里插入图片描述][20200324235114398.png]  
![在这里插入图片描述][20200324235750254.png]  
这个表格需要实现5个功能：三个按键，第一行勾选决定所有单选框的状态，以及鼠标移到每一行时背景色会改变。具体分析已经体现在代码中了。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格全选</title>
        <style> table{ border: 1px solid; width: 500px; margin-left: 30%; } td,th{ text-align: center; border: 1px solid; } div{ margin-top: 10px; margin-left: 30%; } .out{ background-color: white; } .over{ background-color: pink; } </style>
    
      <script> /* 分析： 全选： * 获取所有的checkbox * 遍历cb，设置每一个cb的状态为选中 checked 其他功能也类似。 */ //1.在页面加载完后绑定事件 window.onload = function(){ //2.给全选按钮绑定单击事件 document.getElementById("selectAll").onclick = function(){ //全选 //1.获取所有的checkbox var cbs = document.getElementsByName("cb"); //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态为选中 checked cbs[i].checked = true; } } document.getElementById("unSelectAll").onclick = function(){ //全不选 //1.获取所有的checkbox var cbs = document.getElementsByName("cb"); //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态为未选中 checked cbs[i].checked = false; } } document.getElementById("selectRev").onclick = function(){ //反选 //1.获取所有的checkbox var cbs = document.getElementsByName("cb"); //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态为相反 cbs[i].checked = !cbs[i].checked; } } document.getElementById("firstCb").onclick = function(){ //第一个cb点击 //1.获取所有的checkbox var cbs = document.getElementsByName("cb"); //获取第一个cb //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态和第一个cb的状态一样 cbs[i].checked = this.checked; } } //给所有tr绑定鼠标移到元素之上和移出元素事件 var trs = document.getElementsByTagName("tr"); //2.遍历 for (var i = 0; i < trs.length; i++) { //移到元素之上 trs[i].onmouseover = function(){ this.className = "over"; } //移出元素 trs[i].onmouseout = function(){ this.className = "out"; } } } </script>
    
    </head>
    <body>
    
    <table>
        <caption>学生信息表</caption>
        <tr>
            <th><input type="checkbox" name="cb" id="firstCb"></th>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
    
        <tr>
            <td><input type="checkbox" name="cb" ></td>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
    
        <tr>
            <td><input type="checkbox" name="cb" ></td>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
    
        <tr>
            <td><input type="checkbox" name="cb" ></td>
            <td>3</td>
            <td>岳不群</td>
            <td>?</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
    
    </table>
    <div>
        <input type="button" id="selectAll" value="全选">
        <input type="button" id="unSelectAll" value="全不选">
        <input type="button" id="selectRev" value="反选">
    </div>
    </body>
    </html>

## 案例6：表单校验 ##

页面上的表单用的是[CSS快速入门][CSS]中的案例七：注册页面。  
效果：

*  提交表单前需要进行校验（本例中只校验用户名和密码），若校验不通过（本例中指长度不够）则表单无法提交。
 *  若键入的信息不符合要求，则鼠标离开后将显示红色的提示信息。
 *  若键入的信息符合要求，则鼠标离开后将显示绿色的勾。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 7]

![在这里插入图片描述][2020032500181298.png]  
分析：  
1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。  
如果都为true，则监听器方法返回true  
如果有一个为false，则监听器方法返回false

2.定义一些方法分别校验各个表单项。  
3.给各个表单项绑定onblur（离焦）事件。

实现：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <style> * { margin: 0px; padding: 0px; box-sizing: border-box; } body { background: url("image/register_bg.png") no-repeat center; padding-top: 25px; } .rg_layout { width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; /*让div水平居中*/ margin: auto; } .rg_left { /*border: 1px solid red;*/ float: left; margin: 15px; } .rg_left > p:first-child { color: #FFD026; font-size: 20px; } .rg_left > p:last-child { color: #A6A6A6; font-size: 20px; } .rg_center { float: left; /* border: 1px solid red;*/ } .rg_right { /*border: 1px solid red;*/ float: right; margin: 15px; } .rg_right > p:first-child { font-size: 15px; } .rg_right p a { color: pink; } .td_left { width: 100px; text-align: right; height: 45px; } .td_right { padding-left: 50px; } #username, #password, #email, #name, #tel, #birthday, #checkcode { width: 251px; height: 32px; border: 1px solid #A6A6A6; /*设置边框圆角*/ border-radius: 5px; padding-left: 10px; } #checkcode { width: 110px; } #img_check { height: 32px; vertical-align: middle; } #btn_sub { width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026; } .error { color: red; } #td_sub { padding-left: 150px; } </style>
        <script> window.onload = function () { //1.给表单绑定onsubmit事件 document.getElementById("form").onsubmit = function () { return checkUsername() && checkPassword(); } //给用户名和密码框分别绑定离焦事件 document.getElementById("username").onblur = checkUsername; document.getElementById("password").onblur = checkPassword; } //校验用户名 function checkUsername() { //1.获取用户名的值 var username = document.getElementById("username").value; //2.定义正则表达式 var reg_username = /^\w{6,12}$/; //3.判断值是否符合正则的规则 var flag = reg_username.test(username); //4.提示信息 var s_username = document.getElementById("s_username"); if (flag) { //提示绿色对勾 s_username.innerHTML = "<img width='35' height='25' src='image/gou.png'/>"; } else { //提示红色用户名有误 s_username.innerHTML = "用户名格式有误"; } return flag; } //校验密码 function checkPassword() { //1.获取用户名的值 var password = document.getElementById("password").value; //2.定义正则表达式 var reg_password = /^\w{6,12}$/; //3.判断值是否符合正则的规则 var flag = reg_password.test(password); //4.提示信息 var s_password = document.getElementById("s_password"); if (flag) { //提示绿色对勾 s_password.innerHTML = "<img width='35' height='25' src='image/gou.png'/>"; } else { //提示红色用户名有误 s_password.innerHTML = "密码格式有误"; } return flag; } </script>
    </head>
    <body>
    
    <div class="rg_layout">
        <div class="rg_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
    
        </div>
    
        <div class="rg_center">
            <div class="rg_form">
                
                <form action="#" id="form" method="get">
                    <table>
                        <tr>
                            <td class="td_left"><label for="username">用户名</label></td>
                            <td class="td_right">
                                <input type="text" name="username" id="username" placeholder="请输入用户名">
                                <span id="s_username" class="error"></span>
                            </td>
                        </tr>
    
                        <tr>
                            <td class="td_left"><label for="password">密码</label></td>
                            <td class="td_right">
                                <input type="password" name="password" id="password" placeholder="请输入密码">
                                <span id="s_password" class="error"></span>
                            </td>
                        </tr>
    
                        <tr>
                            <td class="td_left"><label for="email">Email</label></td>
                            <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                        </tr>
    
                        <tr>
                            <td class="td_left"><label for="name">姓名</label></td>
                            <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                        </tr>
    
                        <tr>
                            <td class="td_left"><label for="tel">手机号</label></td>
                            <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                        </tr>
    
                        <tr>
                            <td class="td_left"><label>性别</label></td>
                            <td class="td_right">
                                <input type="radio" name="gender" value="male" checked> 男
                                <input type="radio" name="gender" value="female"> 女
                            </td>
                        </tr>
    
                        <tr>
                            <td class="td_left"><label for="birthday">出生日期</label></td>
                            <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">
                            </td>
                        </tr>
    
                        <tr>
                            <td class="td_left"><label for="checkcode">验证码</label></td>
                            <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                                <img id="img_check" src="image/verify_code.jpg">
                            </td>
                        </tr>
    
    
                        <tr>
                            <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
                        </tr>
                    </table>
    
                </form>
    
    
            </div>
    
        </div>
    
        <div class="rg_right">
            <p>已有账号?<a href="#">立即登录</a></p>
        </div>
    
    
    </div>
    
    
    </body>
    </html>

ps：本文的案例源码：[https://github.com/MagicalPiggy/WebLearning/tree/master/HTML\_CSS\_JS\_learning][https_github.com_MagicalPiggy_WebLearning_tree_master_HTML_CSS_JS_learning]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70]: /images/20230528/7ae9767b7ab948019e538533ddb02ac2.png
[JavaScript]: https://blog.csdn.net/z714405489/article/details/105013228
[js]: https://www.w3school.com.cn/jsref/index.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 1]: /images/20230528/695ebb67e546464f90f15fa170142d0e.png
[20200322223529443.png]: /images/20230528/1473439b32e54776b725c696d94fa876.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 2]: /images/20230528/8c50100d1d44419bb47286573a4ce998.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 3]: /images/20230528/3321a6fd6a77406195250f0fa075e91b.png
[20200322223730255.png]: /images/20230528/ad63a1e396da4b50847d9d582bf5c170.png
[20200322225828968.png]: https://img-blog.csdnimg.cn/20200322225828968.png
[20200322225839498.png]: /images/20230528/5e36c1f1b0ae45fc9fd5225551786207.png
[20200323002058536.png]: /images/20230528/da506dc833c84fe299127021d5fd2d69.png
[20200324102028217.png]: /images/20230528/6bdbf14ddc554397a9b963deb1bb9f39.png
[20200324103537641.png]: /images/20230528/99ca012a145c4c5dadb40fe0547d0fac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 4]: /images/20230528/9871d1242ef444f0837df356f5dc2671.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 5]: /images/20230528/41bdc23e088e47e8bfdb63ae0e8ba942.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 6]: /images/20230528/921a6150c86e4225910a809849e3ca1f.png
[20200324235114398.png]: /images/20230528/c7a3ba0eaf2345f3a1a5c52d3608a4a8.png
[20200324235750254.png]: /images/20230528/6169f1e4cac345aa9a08217a0f86c23c.png
[CSS]: https://blog.csdn.net/z714405489/article/details/105001439
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o3MTQ0MDU0ODk_size_16_color_FFFFFF_t_70 7]: /images/20230528/243827e81b7541c0bc9159e4503add64.png
[2020032500181298.png]: /images/20230528/9a89d6f15e6740b182c5475cb39bcce6.png
[https_github.com_MagicalPiggy_WebLearning_tree_master_HTML_CSS_JS_learning]: https://github.com/MagicalPiggy/WebLearning/tree/master/HTML_CSS_JS_learning