课程目标

BOM
DOM（与xml的dom4j思想完全一样）可以实现对节点的增删改查
js中正则表达式：对表单内容进行校验
ajax
综合案例

复习回顾 :::warning
js的语法构成:
1. ECMAScrpit 基础语法 (es) es6/es5
2. BOM : browser object model (浏览器对象模型)
3. DOM : document object model(文档对象模型)
js 基于对象的语言 (面向对象)
1. 跟java类似, 用对象来描述事物的.
2. js中有些对象不需要创建,已经提前准备好了 :::

一 BOM对象

1.1 BOM简介

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话

作用：把浏览器抽象成为一个对象模型,我们可以使用js模拟浏览器的一些功能。

BOM 浏览器对象模型，中默认存在Window，Location，History，Navigator等对象。
我们今天学习其中 window对象，location对象的使用。

1.2 Window对象

我们学习下window对象中常见的方法，三种弹框方式和两种定时器

① 三种弹框方式

:::success 1）alert(msg) : 警告框，提示框
确定: 表示用户已看

2）boolean result = confirm(msg) : 确认框
I. 确定 : 返回true
II. 取消 : 返回false

3） string result = prompt(msg , defaultValue) : 提示框
I.参数
msg : 交互信息,问题
defaultValue : 是文本框中的默认值(可以不填)
II. 返回值
确定 : 返回文本框中的内容
取消 : null :::

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01-js三个弹框</title>
</head>
<body>
    <input type="button" value="警告框" onclick="funAlert()" />
    <input type="button" value="确认框" onclick="funConfirm()" />
    <input type="button" value="提示框" onclick="funPrompt()" />
</body>
<script>
 //1）警告框提示：要下雨啦,大家回家收衣服啦!!
    function funAlert() {
        //弹框是window调用的(弹框是浏览器的window提供的)
        window.alert("要下雨啦,大家回家收衣服啦!!")
        //window对象可以省略不写
        //alert("要下雨啦,大家回家收衣服啦2!!")
    }
// 2）确认框实现： 你满18岁了吗? 得到结果真假结果
    function funConfirm() {
        let result = confirm("你满18岁了吗?");
        console.log(result);
    }
// 3）提示框实现： 安全问题: 你女朋友是?  得到结果，默认值为王心凌
    function funPrompt() {
        let result = prompt("安全问题: 你女朋友是?","王心凌")
        console.log(result);
    }
</script>
</html>

② 二种定时器方式

:::success 1）**let timer = setInterval("method01()",1000)** 开启重复定时器
时间是毫秒
表示每过1000ms就会执行一次method01 (死循环)
并返回当前的计时器对象
**clearInterval(timer) **: 清除计时器

2）**let timer = setTimeout("method01()",3000)**开启倒计时定时器
过3000ms执行一次method01 (就一次)
**clearTimeout(timer) :** 清除计时器 :::

定时器演示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02-js二个定时器</title>
</head>
<body>
    <input type="button" value="开启重复定时器" onclick="funSetInterval()">
    <input type="button" value="取消重复定时器" onclick="funClearInterval()">
    <input type="button" value="开启倒计时定时器" onclick="funSetTimeOut()">
    <input type="button" value="清除倒计时定时器" onclick="funClearTimeOut()">
    <script>
        //准备一个函数
        function getUp() {
            console.log("起床啦！" + new Date())
        }
        //1）周期定时器：每隔一秒调用下getUp函数
        let interval
        function funSetInterval() {
            console.log("开启interval" + new Date())
            //开启重复定时器
            interval = setInterval("getUp()", 1000);
        }
        function funClearInterval() {
            console.log("清除Interval" + new Date())
            //清除周期定时器
            clearInterval(interval)
        }
        //2）倒计时定时器
        let timmer
        function funSetTimeOut() {
            console.log("开启timeOut" + new Date())
            //开启倒计时定时器
            timmer = setTimeout("getUp()", 1000);
        }
        function funClearTimeOut() {
            console.log("清除timeOut" + new Date())
            //清除倒计时定时器
            clearTimeout(timmer)
        }
    </script>
</body>
</html>

1.3 Location对象

:::success location是地址栏对象
1. href属性 : 表示当前浏览器浏览的url (网址)，可以控制浏览器访问地址。
2. reload() 函数 : 重新加载当前网址（刷新） :::

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03-location对象</title>
</head>
<body>
    <button onclick="addr()">获取当前浏览器地址</button>
    <button onclick="refresh()">刷新当前页面</button>
    <button onclick="jump()"> 跳转页面(重点)</button>
    <hr>
</body>
<script>
    function addr() {
        //1）获取当前浏览器地址
        let str = location.href;
        console.log(str);
    }
    function jump() {
        // 2）跳转页面(重点)
        location.href = "http://www.baidu.com"
    }
    function refresh() {
        //3）刷新当前网页
        location.reload()
    }
</script>
</html>

二 DOM对象【重点】

1.1 DOM简介

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
HTML DOM 模型被结构化为对象树：
对象的 HTML DOM 树
JavaScript高级 - 图4
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素和属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

1.2 DOM获取元素

元素 (element): 开标签到闭标签之间的所有内容

第一种：es6之前获取方式 1）获取一个【推荐使用】 document.getElementById(id属性值) 例如：1.获取id=”username”的标签对象 (id选择器) let username = document.getElementById(“username”); 2）获取多个（了解） document.getElementsByTagName(标签名) 根据标签名获取，返回数组对象 document.getElementsByClassName(class属性值) 根据class属性获取，返回数组对象 document.getElementsByName(name属性值) 根据name属性获取，返回数组对象 第二种：es6可根据CSS选择器获取 1）获取一个（了解） 非数组变量 = document.querySelector(id选择器)
例如：获取id=”username”的标签对象 (id选择器) let username2 = document.querySelector(“#username”);

2）获取多个【推荐使用】 数组变量 = document.querySelectorAll( css选择器 ) 标签选择器 例如：获取所有的option标签对象数组 (标签选择器) let optionArray = document.querySelectorAll(“option”); class选择器 例如：获取class=”radio”的标签对象数组 (类选择器) let radioArray = document.querySelectorAll(“.radio”); 属性选择器 标签名[属性名=’值’] 例如：获取name=”hobby”的input标签对象数组 (属性选择器) let hobbyArray = document.querySelectorAll(“input[name=’hobby’]”); 其他选择器

推荐的使用方式： 获取单个元素：使用 document.getElementById(id属性值) 获取多个元素：数组变量 = document.querySelectorAll( css选择器 )

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>04-dom获取元素</title>
    </head>
    <body>
        <form action="#" method="get">
            姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/>
            密码 <input type="password" name="password"> <br/>
            生日 <input type="date" name="birthday"><br/>
            性别
            <input type="radio" name="gender" value="male" class="radio">男&emsp;
            <input type="radio" name="gender" value="female" class="radio"/>女<br/>
            爱好
            <input type="checkbox" name="hobby" value="smoke">抽烟
            <input type="checkbox" name="hobby" value="drink">喝酒
            <input type="checkbox" name="hobby" value="perm">烫头<br/>
            头像 <input type="file" name="pic"><br/>
            学历
            <select name="edu">
                <option value="0">请选择</option>
                <option value="1">入门</option>
                <option value="2">精通</option>
                <option value="3">放弃</option>
            </select><br/>
            简介
            <textarea name="userIntro" cols="30" rows="10">默认值</textarea><br/>
            <input type="reset" value="清空按钮"/>
            <input type="submit" value="提交按钮"/><br/>
        </form>
    </body>  
    <script>
        // 1.获取id="username"的标签对象 (id选择器)
        //因为id值是唯一的,必然只会找到一个标签对象
        let username = document.getElementById("username");
        // console.log(username);
        let username2 = document.querySelector("#username");
        // console.log(username2);
        // 2.获取class="radio"的标签对象数组 (类选择器)
        let radioArray = document.querySelectorAll(".radio");
        // console.log(radioArray);
        for(let element of radioArray){
            // console.log(element);
        }
        // 3.获取所有的option标签对象数组 (标签选择器)
        let optionArray = document.querySelectorAll("option");
        console.log(optionArray);
        // 4.获取name="hobby"的input标签对象数组 (属性选择器)
        // 属性选择器 -> 标签名[属性名='值']
        let hobbyArray = document.querySelectorAll("input[name='hobby']");
        console.log(hobbyArray);
    </script>
</html>

1.3 DOM操作内容

:::warning

获取或者修改元素（标签）的纯文本内容
语法：js对象.innerText;
获取或者修改元素的html超文本内容
语法：js对象.innerHTML; :::

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>05-dom操作内容</title>
    <style>
        #myDiv {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="myDiv">
        程序猿最讨厌的四件事：<br>写注释、写文档……
    </div>
</body>
<script>
    let myDiv = document.getElementById('myDiv');
    //1 获取div标签内的文本，输出到控制台
    console.log(myDiv.innerText);
    //2 重新设置div标签内的文本：改bug,熬夜。
    myDiv.innerText = "改bug，熬夜。"
    //3 保留原来内容，追加新文本：佛祖保佑没bug
    myDiv.innerText += "佛祖保佑没bug"
    //4 innerText不认识 <br>标签,当纯文本
    myDiv.innerText += "<br>改bug,熬夜"
    //5 识别html标签 <br>
    myDiv.innerHTML += "<br>改bug,熬夜"
</script>
</html>

小贴士： :::success 改内容：
js对象.innerText = 内容
js对象.innerHTML = 内容
保留原有内容加新内容：
js对象.innerText += 内容
js对象.innerHTML += 内容 :::

1.4 DOM操作属性

:::warning 获取属性值：js对象.属性名
设置属性值：js对象.属性名=’新属性值’ ::: 代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>06-dom操作属性</title>
</head>
<body>
    <form action="#" method="get">
        姓名 <input type="text" name="username" id="username" value="德玛西亚" /> <br />
        爱好
        <input type="checkbox" name="hobby" value="smoke" checked>抽烟
        <input type="checkbox" name="hobby" value="drink" checked>喝酒
        <input type="checkbox" name="hobby" value="perm">烫头
        <input type="checkbox" name="hobby" value="shopping">逛街
        <input type="button" value="清空选项" id="btnClear">
        <br />
        <input type="reset" value="重置" />
        <input type="submit" value="提交按钮" /><br />
    </form>
    <script>
        /*
        *  js属性 -> js对象.属性名
        *       1. 文本属性的值是字符串
        *       2. 状态属性值是boolean类型: true/false
        *           1). 比如
        *               checked : 表示radio,checkbox的选中状态的
        *               selected : 表示select标签option选中状态的
        * */
        //1）id为username文本框，将值获取打印到控制台，
        let username = document.getElementById("username");
        //获取文本框中的值
        console.log(username.value); // 德玛西亚
        //2）username文本框设置新的值
        username.value = "马尔扎哈"
        //3）点击id为btnClear的按钮，实现获取所有兴趣复选框，并所有设置为未选状态
        //提示：document.querySelectorAll("input[name='hobby']"); 获取所有兴趣复选框
        let btnClear = document.getElementById("btnClear");
        btnClear.onclick = function () {
            //获取所有的checkbox
            let hobbyArray = document.querySelectorAll("input[name='hobby']");
            //设置为未选
            for (element of hobbyArray) {
                element.checked = false //checked=true选中,false为不选
            }
        }
    </script>
</body>
</html>

小贴士：

文本属性的值是字符串
状态属性值是boolean类型: true/false
 checked : 表示radio,checkbox的选中状态的
 selected : 表示select标签option选中状态的
例如，获取input标签的属性值抽烟 type，name，value，是文本属性获取的值就是字符串，checked是转态属性，值就是布尔值

1.5 DOM操作样式

就是使用JS代码控制HTML元素的CSS样式。
首先要使用JS代码获取HTML标签对象，然后再进行设置：
1）设置一个css样式【会用】行内样式

语法：js对象.style.样式名=’样式值’ 特点：样式名按照驼峰式命名 css格式：font-size js格式：fontSize 示例：p1.style.fontSize = “30px”

2）批量设置css样式（了解）行内样式

语法：js对象.style.cssText=’css样式字符串’ 缺点：让开发者痛苦，有耦合性 (css语法写在js中了) 示例：p1.style.cssText = “font-size: 30px;color:orange”

3）通过class设置样式【重点】内部样式,外部样式,优先级低

语法：js对象.className=’class选择器名’ 优点：解耦 示例： p1.className = “mp”

css优先级复习: 行内样式 > 内部 = 外部 id选择器 > class选择器 > 标签选择器

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>07-dom操作样式</title>
    <style>
        /* 类选择器 */
        .c1 {
            color: green;
            font-size: 40px;
        }
        .c2 {
            color: green;
            font-family: 楷体;
        }
    </style>
</head>
<body>
    <p id="p1">1. 设置一个css样式</p>
    <p id="p2">2. 批量设置css样式</p>
    <p id="p3">3. 通过class设置样式</p>
</body>
<script>
    //获取各个标签
    let p1 = document.getElementById("p1");//获取段落标签
    let p2 = document.getElementById("p2");//获取段落标签
    let p3 = document.getElementById("p3");//获取段落标签
    // 1. 设置一个css样式
    p1.style.color="red"
    // 2. 批量设置css样式
    p2.style.cssText="color:blue;font-size:40px"
    // 3. 通过class设置样式（可以叠加样式）
    p3.className="c1 c2 "
</script>
</html>

三正则表达式【了解】

正则表达式(regular expression) regex
作用：根据定义好的规则，过滤文本内容；这里我们用于校验表单

以前Java正则回顾：

package com.itheima.regex;
public class Demo {
    public static void main(String[] args) {
        //手机号的正则 : 
        //第一位必须是1,第二位可以是34578中任一一个,
        //第三位开始只要是0-9的任一数字即可(出现9次)
//      String regex = "1[34578][0-9]{9}";
        String regex = "1[34578]\\d{9}";
        String phone = "138001380001";
        //phone匹配regex,返回true,否则返回false
        boolean result = phone.matches(regex);
        System.out.println(result);
    }
}

今天我们学习如何在js中使用正则表达式

强调：我们只需要学会正则表达式的赋值和校验即可….

在js中使用正则表达式

创建方式

java中的正则以字符串形式存在，JS中的正则以对象的形式存在。 1）let regex = new RegExp(“正则表达式字符串”); 2）let regex = /正则表达式/; 例如： let regex = /abc/ // java中的规则精准匹配，js中的规则模糊匹配 let regex = /^abc/ // ^ 以…开头 let regex = /abc$/ // $ 以…结尾 let regex = /^abc$/ // 精准匹配
验证方法

正则对象.test(字符串)
 符合正则规则就返回true，否则false
在线正则表达式
[https://tool.oschina.net/regex/#](https://tool.oschina.net/regex/#)

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>08-正则表达式</title>
</head>
<body>
    <input type="text" id="text">
    <span id="status">匹配状态</span><br>
    <input type="button" id="btn1" value="模糊匹配 /abc/">
    <input type="button" id="btn2" value="开头匹配 /^abc/">
    <input type="button" id="btn3" value="结尾匹配 /abc$/">
    <input type="button" id="btn4" value="精准匹配 /^abc$/">
</body>
<script>
//控制台演示
    // let regex = new RegExp("abc");
    let regex = /abc/; // 模糊匹配abc
    // let regex = /^abc/; // ^ 以abc开头
    // let regex = /abc$/; // $ 以abc结尾
    // let regex = /^abc$/;  // 精准匹配abc
    // let regex = /^(abc){2}$/;  // 精准匹配
    let str = "abc";
    // str内容是否符合regex规则,如果符合返回true
    let result = regex.test(str);
    console.log(`正则匹配结果${result}`)
//页面演示
    //btn1按钮事件绑定：定义模糊匹配正则对象
    document.getElementById("btn1").onclick = function () {
        //模糊匹配 
        let regex = /abc/; //只要包含abc就行
        regexCheck(regex)
    }
    //btn2按钮事件绑定：定义开头匹配正则
    document.getElementById("btn2").onclick = function () {
        //^ 以什么开头
        let regex = /^abc/; //以abc开头
        regexCheck(regex)
    }
    //btn3按钮事件绑定：定义结尾匹配正则
    document.getElementById("btn3").onclick = function () {
        // $ 以什么结尾
        let regex = /abc$/; //以abc结尾
        regexCheck(regex)
    }
    //btn4按钮事件绑定：定义精准匹配正则
    document.getElementById("btn4").onclick = function () {
        // 精准匹配
        let regex = /^abc$/; //精准匹配abc
        regexCheck(regex)
    }
    //功能：传入一个正则对象对输入框的文字进行正则校验，控制span标签显示状态变化
    function regexCheck(regex) {
        //获取输入框的输入值
        let str = document.getElementById("text").value;
        //状态元素
        let elestatus = document.getElementById("status");
        //正则判断
        if (regex.test(str)) {
            elestatus.innerText = "匹配成功"
            elestatus.style.color = "green"
        } else {
            elestatus.innerText = "匹配失败"
            elestatus.style.color = "red"
        }
    }
</script>
</html>

四 ES6 新特性（1）

1 什么是ES6

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
摘自：百度百科

可以参考学习：http://es6.ruanyifeng.com/

2. 语法新特性

2.1 变量声明: let

基本用法

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
    var a=10    
    let b=20
}
console.log(a)//可以访问
console.log(b)//不能访问

不存在变量提升

var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。
为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

块级作用域

let n = 5;
if (true) {
    let n = 10;
}
console.log(n); // 5

上面的函数有两个代码块，都声明了变量n，运行后输出 5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出的值才是 10。

2.2 常量声明 const

const 用于声明常量，看以下代码

//定义常量
const username='Rose'
//会报错：常量不能更换引用
// username='Jack';
console.log(username)

js的常量类似，相当于static final 效果，只生成一个对象，不能改变引用。

2.3 模板字符串

es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。
将表达式嵌入字符串中进行拼接。用${}来界定。

//es5
let username='Rose'
//变量需要拼接
console.log('姓名是：'+username)
//es6
//使用反引号，可以直接打印变量的值，表达式类似于java的el表达式
console.log(`姓名是：${username}`)

2.4 函数的参数默认值(了解)

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

 function show(username='Jack'){
    console.log(username);
}
//传参后，使用传入的值
show('Rose');
//没有传参（undifined），自动使用默认值
show()

这样可以避免不传参时出现undefined

2.5 箭头函数

ES6的箭头函数类似于java中lambda表达式，也是对匿名函数的简写，语法格式也相似。
箭头函数语法

let 函数变量 = (参数列表) => {函数体}

特点：
  1. 不需要function关键字来创建函数
  2. 参数列表如果只有一个参数可以省略括号。 
  3. 函数体中只有一行代码，可以省略大括号，return关键字

例如：普通写法

let addFun1 = function (a, b) {
    return a + b
}
let result1 = addFun1(11, 11)
console.log(result1)

箭头函数写法

let addFun2 = (a, b) =>  a + b
let result2 = addFun2(11, 11)
console.log(result2)

五综合案例【作业】

html代码不用写，只要能写出JS逻辑就行，已经给出参考。

4.1 表单校验

图片素材：img.zip

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>案例-表单校验</title>
    <style type="text/css">
        /* 背景样式 */
        .regist_bg {
            width: 100%;
            height: 600px;
            padding-top: 40px;
            background-image: url(../img/bg.jpg);
        }

        /* 注册框样式 */
        .regist {
            border: 7px inset #ccc;
            width: 700px;
            padding: 40px 0;
            padding-left: 80px;
            background-color: #fff;
            margin-left: 25%;
            border-radius: 10px;
        }

        /* 注册按钮样式 */
        input[type="submit"] {
            background-color: aliceblue;
            width: 100px;
            height: 35px;
            color: red;
            cursor: pointer;
            border-radius: 5px;
        }

        /* 提示框样式 */
        .warn {
            color: red;
            font-size: 12px;
            display: none;
        }
    </style>
    <!--
    表单校验
        1. 两次密码输入一致
        2. 邮箱格式正确
        3. 手机号格式正确
        4. 提交表单时校验表单项是否合法.
    总结:form表单的 onsubmit 事件 表单提交之前触发
    -->
</head>

<body>
    <div class="regist_bg">
        <div class="regist">
            <form action="http://www.baidu.com" id="myForm">
                <table width="700px" height="350px">
                    <tr>
                        <td colspan="3">
                            <font color="#3164af">会员注册</font> USER REGISTER
                        </td>
                    </tr>
                    <tr>
                        <td align="right">用户名</td>
                        <td colspan="2"><input id="loginnameId" type="text" name="loginname" size="50" /><span
                                id="loginnamewarn" class="warn">用户名不能为空</span></td>
                    </tr>
                    <tr>
                        <td align="right">密码</td>
                        <td colspan="2"><input id="pwd1" type="password" name="pwd1" size="50" /></td>
                    </tr>
                    <tr>
                        <td align="right">确认密码</td>
                        <td colspan="2"><input id="pwd2" type="password" name="pwd2" size="50" />
                            <span id="pwdwarn" class="warn">密码不一致</span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">Email</td>
                        <td colspan="2"><input id="email" type="text" name="email" size="50" /> <span id="emailwarn"
                                class="warn">邮箱格式有误</span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">姓名</td>
                        <td colspan="2"><input name="text" name="username" size="50" /></td>
                    </tr>
                    <tr>
                        <td align="right">性别</td>
                        <td colspan="2">
                            <input type="radio" name="gender" value="男" checked="checked" />男
                            <input type="radio" name="gender" value="女" />女
                        </td>
                    </tr>
                    <tr>
                        <td align="right">电话号码</td>
                        <td colspan="2"><input id="phone" type="text" name="phone" size="50" /> <span id="phonewarn"
                                class="warn">手机格式有误</span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">所在地</td>
                        <td colspan="3">
                            <select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
                                <option value="">----请-选-择-省----</option>
                                <option value="0">北京</option>
                                <option value="1">辽宁</option>
                                <option value="2">江苏</option>
                            </select>
                            <select id="cityId" style="width:150px">
                                <option>----请-选-择-市----</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td width="80" align="right">验证码</td>
                        <td width="100"><input type="text" name="verifyCode" /></td>
                        <td><img src="../img/checkMa.png" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="2">
                            <input id="rebtn" type="submit" value="注册" />
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</body>

<script>
    /*
    * TODO 两个事件
    *       1. onblur : 失去焦点事件(鼠标的焦点离开之后触发)
    *       2. onsubmit : 表单提交事件
    *           1). form表单专属事件 : 当此表单提交的时候触发
    *           2). boolean返回值
    *               I. return true : 允许表单提交
    *               II. return false : 不允许表单提交
    * */
    /* let loginName = document.getElementById("loginnameId");
     loginName.onblur = function (){
         console.log("hello");
     }

     let myForm = document.getElementById("myForm");
     myForm.onsubmit = function (){
         console.log("hi");
         return true;
     }*/
</script>
<script>
    /*
        1. 两次密码输入一致
            1). 事件: 确定密码框的失去焦点事件
            2). 逻辑:
                I. 获取pwd1和pwd2的输入内容,进行比较
                II. 如果一致,提示密码正确, 如果不一致,提示密码有问题
     */
    let pwd2 = document.getElementById("pwd2");
    let checkPwd = function () {
        //显示效果
        let pwdSpan = document.getElementById("pwdwarn");
        if (pwd2.value == "") {
            pwdSpan.style.color = "red"
            pwdSpan.innerText = "密码不能为空"
            pwdSpan.style.display = "inline" //css : 不换行显示
            return false;
        }
        let pwd1 = document.getElementById("pwd1");

        if (pwd1.value == pwd2.value) {
            // console.log("两次密码一致");
            pwdSpan.style.color = "green"
            pwdSpan.innerText = "两次密码一致"
            pwdSpan.style.display = "inline" //css : 不换行显示
            return true;
        } else {
            // console.log("两次密码不一致");
            pwdSpan.style.color = "red"
            pwdSpan.innerText = "两次密码不一致"
            pwdSpan.style.display = "inline" //css : 不换行显示
            return false;
        }
    }
    pwd2.onblur = checkPwd;

    // 2. 邮箱格式正确
    let emailReg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
    let email = document.getElementById("email");
    let checkEmail = function () {
        let emailSpan = document.getElementById("emailwarn");
        if (emailReg.test(email.value)) {
            console.log("邮箱格式正确");
            emailSpan.style.color = "green"
            emailSpan.innerText = "邮箱格式正确"
            emailSpan.style.display = "inline" //css : 不换行显示
            return true;
        } else {
            console.log("邮箱格式不正确");
            emailSpan.style.color = "red"
            emailSpan.innerText = "邮箱格式不正确"
            emailSpan.style.display = "inline" //css : 不换行显示
            return false;
        }
    }
    email.onblur = checkEmail
    /*
        TODO 表单提交事件
        1. 在表单点击提交的时候,检查每一项选项是否符合规则
            如果都符合规则就允许提交,否则不允许
     */
    let myForm = document.getElementById("myForm");
    myForm.onsubmit = function () {
        // console.log("hi");
        let isPwdOk = checkPwd();
        let isEmailOk = checkEmail();
        console.log(`密码：${isPwdOk}, 邮箱${isEmailOk}`);
        // return isPwdOk && isEmailOk;
        return false;
    }

</script>


</html>

4.2 商品全选

商品全选

<!DOCTYPE html>
<html lang="zh">


<head>
    <meta charset="UTF-8">
    <title>案例-商品全选</title>
</head>

<body>
    <!--
商品全选
    1. 全选 点击全选按钮,所有复选框都被选中
    2. 反选 点击反选按钮,所有复选框状态取反
-->
    <button id="btn1">1. 全选</button>
    <button id="btn2">2. 反选</button>
    <br />
    <input type="checkbox">电脑
    <input type="checkbox">手机
    <input type="checkbox">汽车
    <input type="checkbox">别墅
    <input type="checkbox" checked="checked">笔记本
</body>

<script>
    /*
    * # 全选
    *     1. 事件驱动: btn1按钮被点击
    *     2. 触发:
    *         1). 找到所有的type=checkbox的input标签
    *         2). 遍历所有的标签,把checked=true (选中)
      * # 反选
    *     1. 事件驱动: btn1按钮被点击
    *     2. 触发:
    *         1). 找到所有的type=checkbox的input标签
    *         2). 遍历所有的标签,把checked=!checked (反选)
    * */
    let btn1 = document.getElementById("btn1");
    btn1.onclick = function () {
        //dom获取元素
        let cbArray = document.querySelectorAll("input[type='checkbox']");
        for (let cb of cbArray) {
            cb.checked = true
        }
    }

    let btn2 = document.getElementById("btn2");
    btn2.onclick = function () {
        //dom获取元素
        let cbArray = document.querySelectorAll("input[type='checkbox']");
        for (let cb of cbArray) {
            cb.checked = !cb.checked
        }
    }


</script>

</html>

4.3 隔行换色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>案例-隔行变色</title>

</head>

<body>
    <table id="tab1" border="1" width="800" align="center">
        <tr>
            <th width="100px"><input type="checkbox">全/<input type="checkbox">反选</th>
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>5</td>
            <td>牛奶制品</td>
            <td>牛奶制品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>6</td>
            <td>大豆制品</td>
            <td>大豆制品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>7</td>
            <td>海参制品</td>
            <td>海参制品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>8</td>
            <td>羊绒制品</td>
            <td>羊绒制品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>9</td>
            <td>海洋产品</td>
            <td>海洋产品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>10</td>
            <td>奢侈用品</td>
            <td>奢侈用品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>11</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
    </table>

</body>
<script>
    /*
    * todo 隔行换色 (奇数行和偶数行的背景色不同)
    *   1. 获取所有的行
    *   2. 遍历这些行, 奇数行的背景色设置绿色
    *
    * todo 触摸换色
    *   1. 事件:
    *       1). onmouseover : 鼠标移上去
    *       2). onmouseout : 鼠标移出去
    *   2. 触摸换色逻辑
    *       1). 找到所有的行
    *       2). 遍历这些行,注册相应的事件,实现鼠标移上去黄色高亮
    * */

    let trArray = document.querySelectorAll("tr");

    for (let i = 0; i < trArray.length; i++) {
        //隔行换色
        if (i % 2 != 0) {
            trArray[i].style.backgroundColor = "green"
        }

        let oldColor; //原来的颜色
        //移上去换色
        trArray[i].onmouseover = function () {
            //换色之前,记录原来的颜色
            oldColor = this.style.backgroundColor
            //this表示当前触发事件的标签
            this.style.backgroundColor = "yellow"
        }
        //移出去恢复原来的颜色
        trArray[i].onmouseout = function () {
            //this表示当前触发事件的标签
            this.style.backgroundColor = oldColor
        }
    }

</script>

</html>

JavaScript高级