JavaScript编程（下篇）

4.3 正则对象（重点）

用于匹配一个字符串

4.3.1 创建的方式

4.3.1.1 格式

以/开头，以/结尾，中间的部分即正则表达式
```
var reg = /正则表达式/;
```

4.3.1.2 匹配模式

忽略大小写进行比较，有两种写法

var reg = new RegExp("正则表达式","匹配模式");
var reg = /正则表达式/匹配模式;

其中：

匹配模式有一种模式`i`，意思是**忽略大小写**

4.3.1.3 正则基本语法

字符	描述
^	匹配输入字符串的开始位置（边界匹配器的开始标记）
$	匹配输入字符串的结束位置（边界匹配器的结束标记）
{n}	前面的字符恰好n次（数量词）
{n,}	前面的字符至少n次（数量词）
{n,m}	前面的字符n~m次（数量词）
+	前面的字符出现1~n次（至少1次，数量词）
*	前面的字符出现0~n次（数量词）
?	前面的字符出现0~1次（要不不出现，要不只出一次，数量词）
\d	数字（范围词）
\w	匹配包括下划线的任何单词字符。等价于’[A-Za-z0-9_]’，但不包含出下划线的特殊字符如@%等。（范围词）
[a-z]	出现的字符范围是a~z（范围词）
.	匹配任意字符

注：[]内的内容就是前面的字符的取值范围

4.3.2 常用的方法

JS中正则表达式的方法	说明
boolean test(“字符串”)	如果正则表达式匹配字符串，返回true，否则返回false

4.3.3 注意事项（重要）

1. 默认情况下正则对象匹配一个字符串时，只要字符串内容出现指定内容，则视为匹配；
2. 边界匹配器就是排除上述的问题，`^`后第一个字符视作正则表达式匹配的开头，`$`前的第一个字符视作正则表达式匹配的结尾。所以建议正则表达式都写上边界匹配器；
3.  **任何字符如果没有数量词的搭配都只能匹配一个字符**。

4.3.4 综合案例

需求：用户注册，需要进行如下验证，请在JS中使用正则表达式进行验证。

用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
密码：大小写字母和数字6-20个字符
确认密码：两次密码要相同
电子邮箱: 符合邮箱地址的格式
手机号：/^1[34578]\d{9}$/
生日：生日的年份在1900～2009之间，生日格式为1980-5-12或1988-05-04的形式，/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/
只有所有信息都满足要求，且密码与确认密码都一致时才能提交表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>验证注册页面</title>
        <style type="text/css">
         body {
            margin: 0;
            padding: 0;
            font-size: 12px;
            line-height: 20px;
         }
         .main {
            width: 525px;
            margin-left: auto;
            margin-right: auto;
         }
         .hr_1 {
            font-size: 14px;
            font-weight: bold;
            color: #3275c3;
            height: 35px;
            border-bottom-width: 2px;
            border-bottom-style: solid;
            border-bottom-color: #3275c3;
            vertical-align: bottom;
            padding-left: 12px;
         }
         .left {
            text-align: right;
            width: 80px;
            height: 25px;
            padding-right: 5px;
         }
         .center {
            width: 280px;
         }
         .in {
            width: 130px;
            height: 16px;
            border: solid 1px #79abea;
         }

         .red {
            color: #cc0000;
            font-weight: bold;
         }

         div {
            color: #F00;
         }
        </style>
        <script type="text/javascript">

            //检查用户名
            function checkUser() {
                //获得输入的用户名
                var userName = document.getElementById("user").value;   //根据id获取对应的元素，然后再获取文本框输入的内容（value）
                //获得span对象
                var span = document.getElementById("userSpan");
                //用户名对应的正则表达式
                var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
                if (reg.test(userName)) {
                    span.innerHTML="<font color='green'>正确</font>";
                    return true;
                } else {
                    span.innerHTML="<font color='red'>错误</font>";
                    return false;
                }
            }

            //检查密码
            function checkPass() {
                //获得输入的密码
                var userPassword = document.getElementById("pwd").value;
                //获得span对象
                var span = document.getElementById("passSpan");
                //密码对应的正则表达式
                var reg = /^[a-zA-Z0-9]{6,20}$/;
                if (reg.test(userPassword)){
                    span.innerHTML="<font color='green'>正确</font>";
                    return true;
                } else {
                    span.innerHTML="<font color='red'>错误</font>";
                    return false;
                }
            }

            //检查确认密码
            function checkRePass() {
                //获得输入的密码
                var userPassword = document.getElementById("pwd").value;
                //获得输入的确认密码
                var userRePass = document.getElementById("repwd").value;
                //获得span对象
                var span = document.getElementById("RepassSpan");
                if (userPassword==userRePass){
                    span.innerHTML="<font color='green'>正确</font>";
                    return true;
                } else {
                    span.innerHTML="<font color='red'>错误</font>";
                    return false;
                }
            }

            //检查邮箱
            function checkEmail() {
                //获得输入的用户名
                var userEmail = document.getElementById("email").value;   //根据id获取对应的元素，然后再获取文本框输入的内容（value）
                //获得span对象
                var span = document.getElementById("emailSpan");
                //邮箱对应的正则表达式
                var reg = /^[a-zA-Z1-9][a-zA-Z0-9]+@[a-zA-Z1-9]{2,}(\.[a-z]{2,3}){1,2}$/;
                if (reg.test(userEmail)) {
                    span.innerHTML="<font color='green'>正确</font>";
                    return true;
                } else {
                    span.innerHTML="<font color='red'>错误</font>";
                    return false;
                }
            }

            //检查手机号
            function checkPhone() {
                //获得输入的用户名
                var userPhone = document.getElementById("mobile").value;
                //获得span对象
                var span = document.getElementById("mobileSpan");
                //手机号对应的正则表达式
                var reg = /^1[34578]\d{9}$/;
                if (reg.test(userPhone)) {
                    span.innerHTML="<font color='green'>正确</font>";
                    return true;
                } else {
                    span.innerHTML="<font color='red'>错误</font>";
                    return false;
                }
            }
            //检查生日
            function checkBirth() {
                //获得输入的用户名
                var userBirth = document.getElementById("birth").value;
                //获得span对象
                var span = document.getElementById("birthSpan");
                //手机号对应的正则表达式
                var reg = /^((19\d{2})|(20\d{2}))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
                if (reg.test(userBirth)) {
                    span.innerHTML="<font color='green'>正确</font>";
                    return true;
                } else {
                    span.innerHTML="<font color='red'>错误</font>";
                    return false;
                }
            }

            //检查所有选项，然后提交表单
            /*
            思路：判断所有的checkxxx()返回的都是true才能提交，那么所有的checkxxx()都要有返回值
             */
            function checkAll() {
                var userName = checkUser();
                var userPass = checkPass();
                var userRePass = checkRePass();
                var userEmail = checkEmail();
                var userPhone = checkPhone();
                var userBirth = checkBirth();
                if (userName&&userPass&&userRePass&&userEmail&&userPhone&&userBirth) {
                    return true;
                } else {
                    return false;
                }
            }

            /*
            onsubmit 返回true则提交表单，否则无法提交
             */

        </script>
    </head>

    <body>
        <form action="successful.html" method="post" id="myform" onsubmit="return checkAll()">
            <table class="main" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td><img src="img/logo.jpg" alt="logo" /><img src="img/banner.jpg" alt="banner" /></td>
                </tr>
                <tr>
                    <td class="hr_1">新用户注册</td>
                </tr>
                <tr>
                    <td style="height:10px;"></td>
                </tr>
                <tr>
                    <td>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <!-- 不能为空， 输入长度必须介于 5 和 10 之间 -->
                            <td class="left">用户名：</td>
                            <td class="center">
                            <input id="user" name="user" type="text" class="in" onblur="checkUser()" /><span id="userSpan"></span>
                            </td>
                        </tr>
                        <tr>
                             <!-- 不能为空， 输入长度大于6个字符 -->
                            <td class="left">密码：</td>
                            <td class="center">
                            <input id="pwd" name="pwd" type="password" class="in" onblur="checkPass()" /><span id="passSpan"></span>
                            </td>
                        </tr>
                        <tr>
                            <!-- 不能为空， 与密码相同 -->
                            <td class="left">确认密码：</td>
                            <td class="center">
                            <input id="repwd" name="repwd" type="password" class="in" onblur="checkRePass()"/><span id="RepassSpan"></span>
                            </td>
                        </tr>
                        <tr>
                            <!-- 不能为空， 邮箱格式要正确 -->
                            <td class="left">电子邮箱：</td>
                            <td class="center">
                            <input id="email" name="email" type="text" class="in" onblur="checkEmail()"/><span id="emailSpan"></span>
                            </td>
                        </tr>
                        <tr>
                             <!-- 不能为空， 使用正则表达式自定义校验规则,1开头，11位全是数字 -->
                            <td class="left">手机号码：</td>
                            <td class="center">
                            <input id="mobile" name="mobile" type="text" class="in" onblur="checkPhone()"/><span id="mobileSpan"></span>
                            </td>
                        </tr>
                        <tr>
                            <!-- 不能为空， 要正确的日期格式 -->
                            <td class="left">生日：</td>
                            <td class="center">
                            <input id="birth" name="birth" type="text" class="in" onblur="checkBirth()"/><span id="birthSpan"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">&nbsp;</td>
                            <td class="center">
                            <input name="" type="image" src="img/register.jpg" />
                            </td>
                        </tr>
                    </table></td>
                </tr>
            </table>
        </form>
    </body>
</html>

5. BOM编程

BOM：Browser Object Model 浏览器对象模型
作用：通过浏览器内置对象进行浏览器操作

5.1 BOM常用的对象

BOM常用对象	作用
window	浏览器窗体对象
location	浏览器地址栏对象
history	历史记录对象

5.2 window对象

BOM的核心对象是window，它表示浏览器的一个实例。（即当前浏览器窗口）

5.2.1 对话框方法

window中与对话框有关的方法	作用
alert(“提示信息”)	弹出一个确认按钮的信息框
string prompt(“提示信息”,”默认值”)	弹出一个输入信息框，返回字符串类型
boolean confirm(“提示信息”)	弹出一个信息框，有确定和取消按钮。如果点确定，返回true，点取消返回false

注意：使用window对象的任何属性或者方法时，可以省略window前缀

5.2.2与计时有关的方法

window中与计时有关的方法	作用
setTimeout(函数名, 间隔毫秒数)	在指定的时间后调用1次函数，只执行1次，单位是毫秒。返回值：返回一个整数类型的计时器函数调用有两种写法： 1) setTimeout(“函数名(参数)”, 1000); 2) setTimeout(函数名,1000, 参数); 注意方式二：没有引号，没有括号
setInterval(函数名, 间隔毫秒数)	每过指定的时间调用1次函数，不停的调用函数，单位是毫秒。返回值：返回一个整数类型的计时器。
clearInterval(计时器)	清除setInterval()方法创建的计时器
clearTimeout(计时器)	清除setTimeout创建的计时器

5.2.3 修改元素内容的常用方法和属性

名称	作用
方法：document.getElementById(“id”)	通过id得到一个元素，如果有同名的元素则得到第1个
属性：innerHTML	获得：元素内部的HTML 设置：修改元素内部的HTML
属性：innerText	获得：元素内部的文本设置：修改元素内部的纯文本，其中的html标签不起作用
属性：value	获得：标签的value属性值

注意事项：value、innerText、innerHTML的区别（重点）

如果操作没有标签体的标签内容，需要使用value属性操作；
innerHTML：可以设置非文本字符以及文本数据，包括标签。标签会起作用；
innerText：设置的任何内容都会被当成是普通文本字符，标签不会起作用。

5.2.4 示例案例

需求：页面设置两个按钮，开始按钮可以使时间走动，点暂停时间不动，再点开始按钮，时间继续走动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>世界</title>
    <style type="text/css">
        #time {
            color: green;
            font-size: 30px;
        }
    </style>
</head>
<body>
<script type="text/javascript">

    //定时任务id
    var taskId = 0;//为了取消定时任务，因为clearInterval需要定时任务id

    //时间开始
    function start() {
        begin();
        //记录定时任务id
        taskId = window.setInterval("begin()",1000);//每隔一秒都会调用begin方法
    }

    //将系统时间赋值到h2中
    function begin() {
        //获取当前系统时间
        var curTime = new Date().toLocaleString();//获取当地时间的字符串
        //获得h2对象
        var h2 = document.getElementById("time");
        //赋值时间
        h2.innerHTML = "<font color='gold'>" + curTime + "</font>";
        //玩点新花式
        document.getElementById("start").value = "时间开始流动了....";
    }

    function pause() {
        //取消定时任务
        window.clearInterval(taskId);
        document.getElementById("pause").value = "时间停止吧，咋瓦鲁多！";
    }


</script>

<h2 id="time">我是dio哒</h2>
<input id="start" type="button" value="开始" onclick="start()" />
<input id="pause" type="button" value="暂停" onclick="pause()" />
</body>
</html>

5.3 location对象

5.3.1 location是什么

代表浏览器的地址栏对象

5.3.2 location常用的属性

href属性	作用
获取href属性	获得当前地址栏访问的地址
设置href属性	用于页面的跳转，跳转到一个新的页面

5.3.3 location常用的方法

location的方法	描述
reload()	重新加载当前的页面，相当于浏览器上的刷新按钮

5.3.4 代码的演示

5.4 history对象

浏览器的历史访问记录

5.3.1 常用方法

方法	作用
forward()	类似于浏览器上前进按钮
back()	类似于浏览器上后退按钮
go()	正数或负数，go(1)相当于forward()，go(-1)相当于back()

5.3.2 示例案例：倒计时跳转到另一个页面

需求：页面上显示一个倒计时5秒的数字，到了5秒以后跳转到另一个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时跳转</title>
    <style type="text/css"></style>

</head>
<body>
<span style="font-size: 20px">操作成功！！</span><br/>
<span style="color: green" id="time">5</span>秒后回到主页
<input type="button" value="返回" id="back" onclick="getBack()"/>

</body>
<script type="text/javascript">
    //使用时间倒计时
    window.setInterval("forward()",1000);

    //获得span对象
    var num = 5;
    //当计时到num=1的时候跳转
    function forward() {
    var span = document.getElementById("time");
        if (num > 1) {
            span.innerHTML=--num;
        } else {
            location.href="http://baidu.com";
        }
    }

    //返回的功能，相当于页面后退
    function getBack() {
        history.back();
        /*或者
        history.go(-1);*/
    }
</script>
</html>

6. DOM编程（重点）

Document Object Model 文档对象模型，用于操作网页中html元素

6.1 DOM的作用

1、 每个HTML页面在被浏览器解析的时候都会浏览器会为**每一个标签**都会创建**一个对应的对象**，网页上显示的内容其实就是这些**对象的属性信息**，DOM编程就是指我们获取到这些标签对应的对象，然后修改属性即可改变网页上显示的内容。

2、这些对象都会保存在document对象中，所以可以通过document对象获取这些对象

3、DOM又称为DOM树（如下图）

![1535886865864](E:\Java study\每日笔记\Java笔记汇总\notesPic\DOM树.png)

4、凡是节点都具备两个属性：nodeName、nodeType

6.2 根据标签属性找节点方法

获取元素的方法	作用
document.getElementById(“id”)	通过id属性到唯一的元素如果页面上有多个同名的id，则得到第1个元素
document.getElementsByName(“name”)	通过name属性得到一组标签，返回一个数组
document.getElementsByTagName (“标签名”)	通过标签名字得到一组标签，返回一个数组
document.getElementsByClassName(“类名”)	通过类名得到一组标签，返回一个数组

6.2.1 示例案例

需求：根据商品列表的复选框实现全选/全不选、反选和结算的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品选择及结账</title>
    <style type="text/css"></style>
    <script type="text/javascript">

        //实现全选/全不选功能
        function selectAll(input) {
            var items = document.getElementsByName("item");
            //遍历数组，将每个元素的checked属性都与全选框的保持一致
            for (var i = 0; i < items.length; i++) {
                items[i].checked = input.checked;
            }
        }

        //实现反选
        //其实就是获得的每个数组元素的checked属性取反
        function reverseSelect() {
            var items = document.getElementsByName("item");
            for (var i = 0; i < items.length; i++) {
                items[i].checked = !items[i].checked;
            }
        }

        //实现结算功能并输出到span元素中
        function total() {
            var sum = 0;
            var items = document.getElementsByName("item");
            for (var i = 0; i < items.length; i++) {
                if (items[i].checked) { //如果被勾选上则结算
                    var price = items[i].value; //注意，这里获取的value是String类型的，下面加的时候要转化
                    sum += parseInt(price);
                }
            }
            //获得span对象
            var span = document.getElementById("sumPrice");
            //设置标签体
            span.innerHTML = "总价是：" + sum + "元";
        }

    </script>
</head>
<body>
<h3>商品价格列表</h3>
<input type="checkbox" name="item" value="8399"/> iPhonex 8399<br/>
<input type="checkbox" name="item" value="199" /> 飞利浦s2 199<br/>
<input type="checkbox" name="item" value="7699" /> 微星GE62 7699<br/>
<input type="checkbox" name="item" value="899" /> 铜雀pro 899<br/>
<input type="checkbox" name="item" value="499" /> 罗技键盘 499<br/>
<hr/>
<input type="checkbox" id="all" onclick="selectAll(this)"  />全选/全不选 &nbsp;

<input type="button" id="reverse" onclick="reverseSelect()"  value=" 反 选 "/>&nbsp;
<input type="button" value="结算" onclick="total()" />&nbsp;<span id="sumPrice"></span>

</body>
</html>

6.3 根据关系找节点

6.3.1 节点的类型

名称	节点名称	节点类型
标签	Element	1
文本	Text	3
注释	Comment	8

6.3.2 节点之间的关系

遍历节点的属性	说明
childNodes	得到当前元素下所有的子节点（包括文本和注释。空格和转行都算作文本节点）
children	得到当前元素下所有的标签元素
parentNode	得到当前元素的父节点
nodeName	得到节点的名称
nodeType	得到节点的类型

6.4 对节点进行增删改操作

6.4.1 创建和修改元素的方法

创建元素的方法	作用
document.createElement(“标签名”)	在文档上创建一个元素对象
元素对象.setAttribute(“属性名”, “属性值”)	给元素添加一个属性名和属性值如果元素名不存在则是添加属性，存在则是修改属性值

注意：setAttribute只能给元素添加属性，如果要给标签体添加内容，就要用innerHTML或者innerText方法。

6.4.2 修改DOM树的方法

将元素挂到DOM树上的方法	作用
父元素.appendChild(子元素)	将元素追加成父元素的最后一个子元素
父元素.removeChild(子元素)	通过父元素删除一个子元素
元素.remove()	元素删除本身

6.4.3 省市联动经典案例

实现省市联动有两个方式，一个就是将省市都保存在html页面中，一个是从数据库中调取数据。下面先用第一种。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
    <style type="text/css"></style>
    <script type="text/javascript">

        //每个省份对应的数组，其中第一个空串是对应默认选项“--请选择市--”
        var citys = [[""], ["广州", "湛江", "东莞", "河源"], ["南宁", "桂林", "北海", "玉林"], ["长沙", "衡阳", "岳阳", "邵阳"]];

        function selectCity(province) {
            //根据选择的省的索引值获得对应的市
            var index = province.selectedIndex;
            var cities = citys[index];
            /*
            //思路1：遍历城市数组，然后每个城市创建元素对象，然后赋属性值：
                //首先获得父元素，option的父元素是select
                var select = document.getElementById("cityId");
                for (var i = 0; i < cities.length; i++) {
                    //创建节点：
                    var optionNode = document.createElement("option");
                    //设置option标签的属性
                    optionNode.setAttribute("value",cities[i]); //setAttribute给标签属性赋值
                    optionNode.innerHTML = cities[i];   //innerHTML添加标签体内容
                    //将option标签添加
                    select.appendChild(optionNode);
                }*/
            /*
                但这样比较麻烦
                思路2：
                可以改为获取每个城市的节点名，然后组装语句放在一个数组中
             */
            var cityOption = "<option>--请选择市--</option>";
            for (var i = 0; i < cities.length; i++) {
                //组装语句放在cityOption中
                cityOption += "<option>" + cities[i] + "</option>";   //此时cityOption就变成一个数组
            }
            //下面只要找到城市的选择框丢进去即可
            var citySelect = document.getElementById("cityId");
            citySelect.innerHTML = cityOption;  //给标签体添加内容
        }

    </script>
</head>
<body>
<select id="provinces" onchange="selectCity(this)" name="province">
    <option value="">--请选择省--</option>
    <option>广东省</option>
    <option>广西省</option>
    <option>湖南省</option>
</select>&nbsp;
<select id="cityId" name="city">
    <option value="">--请选择市--</option>
</select>
</body>
</html>

6.5 使用JS操作css样式

6.5.1 在JS中操作CSS属性命名上的区别

以前css直接写死在html中，现在可以通过js脚本去动态修改一个标签的样式。

CSS中写法	JS中的写法	说明
color	color	一个单词的样式写法是相同
font-size	fontSize	驼峰命名法，首字母小写，第二个单词以后首字母大写

如果遇到不懂的属性，就需要查帮助文件，找出css属性对应的js写法。

3.5.2 方式一：

元素.style.样式名 = "样式值";

这种方式一次只能修改一个样式的样式值

3.5.3 方式二：

元素.className = "类名";

这种方式可以将对应的类元素中的属性进行修改

3.5.4 示例代码

需求：修改p元素的属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js修改css样式</title>
    <style type="text/css">
        .newCss {
            color: red;
            font-size: 30px;
            font-family: "华文行楷";
        }
    </style>
</head>
<script type="text/javascript">
    //方式一：修改多个样式属性
    function changeCss () {
        //获得p元素
        var p1 = document.getElementById("one");
        //元素.style.样式名=样式值;
        p1.style.color = "aqua";
        p1.style.fontSize = "20px";
        p1.style.fontFamily = "楷体";
    }

    //方式二：创建一个新的类样式，再一次性修改类的样式
    function changeClass () {
        var p2 = document.getElementById("two");
        //元素.className = "类名";
        p2.className = "newCss";
    }
</script>
<body>
<p id="one">
    js修改css方式一
</p>
<p id="two">
    js修改css方式二
</p>
<input type="button"  value="修改样式值" onclick="changeCss()"/>
<input type="button"  value="改变类样式" onclick="changeClass()"/>
</body>
</html>