web前端（JavaScript）

已于 2022-01-20 21:50:40 修改
阅读量529 收藏 1
点赞数
分类专栏： web前端 文章标签： 前端 javascript
于 2021-12-05 15:03:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50648720/article/details/121723903
版权

JavaScript

JS事件的处理

什么是事件

用户可以对网页的元素有各种不同的操作如：单击，双击，鼠标移动等这些操作就称为事件。事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

设置事件的两种方式

  1. 方式一：命名函数

    <input type="button" onclick="函数名()">

JS所有的事件名称都是以on开头

  2. 方式二：匿名函数

    元素对象.onclick = function() {
}

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件驱动函数2种写法</title>
</head>
<body>
<!--产生事件-->
<input type="button" onclick="clickMe()" value="点一下">
<input type="button" value="匿名函数" id="b2">

<script type="text/javascript">
    // 事件处理函数：命名函数
    function clickMe() {
        alert("点了");
    }

    /*
    因为通过id得到元素，所以要写在button的后面
    匿名函数写法
    元素对象.onclick = function() {   }
     */
    document.getElementById("b2").onclick = function () {
        alert("点了");
    }
</script>
</body>
</html>

注意: 在JS中找HTML的标签，script代码要写到HTML标签的下面

事件介绍：onload、ondblclick

网页加载完成事件

  1. 事件名：window.onload

  2. 当网页加载完毕后会触发这个事件

  3. 示例：页面加载完毕以后，才执行相应的JS代码

  4. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script>
        // 使用onload事件，在页面加载完毕以后再执行这段代码
        window.onload = function () {
            // alert("加载完了...");
            document.getElementById("b1").onclick = function () {
                alert("被点击了...");
            }
        }
    </script>
</head>
<body>
<div>
早上好
</div>
<input type="button" value="点" id="b1">
<input type="button" value="点" id="b2">
</body>
</html>

鼠标双击事件

双击：ondblclick (double)

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件介绍：onload、ondblclick</title>
</head>
<body>

姓名1: <input id="i1"/><br/>
姓名2: <input id="i2"/><br/>
<input type="button" value="双击复制" ondblclick="click01()"/>
<script>
    // 命名函数设置事件
    function click01() {
        // 1.找到上面的输入的内容
        var content = document.getElementById("i1").value;
        // 2.将内容设置给下面的输入框
        document.getElementById("i2").value = content;
    }
</script>
</body>
</html>

事件介绍：鼠标移入和移出

事件名

  1. 鼠标移入：onmouseover
  2. 鼠标移出：onmouseout

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移上/移出</title>
</head>
<body>
<img src="img/0.jpg" id="pic" width="600" onmouseover="changePic(this)">

<script type="text/javascript">
    // 设置鼠标移入事件
    function changePic(obj) {
        obj.src = "img/4.jpg";
    }

    // 鼠标移出事件
    document.getElementById("pic").onmouseout = function () {
        document.getElementById("pic").src = "img/2.jpg";
    }
</script>
</body>
</html>

事件介绍：得到焦点、失去焦点、改变事件

事件名

  1. 得到焦点：onfocus
  2. 失去焦点： onblur

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>得到焦点和失去焦点</title>
    <style>
        span {
            color: red;
        }
    </style>
</head>
<body>

用户名: <input onfocus="f3()" onblur="f4()"/><span id="sp">请输入</span>

<script>
    // 得到焦点的事件
    function f3() {
        // innerHTML: 修改标签里面的内容
        document.getElementById("sp").innerHTML = "正在输入";
    }
    
    // 失去焦点事件
    function f4() {
        document.getElementById("sp").innerHTML = "请输入";
    }
</script>
</body>
</html>

事件介绍：内容改变事件

事件名

onchange

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变事件</title>
</head>
<body>

请输入英文: <input id="i1" onchange="f5()"/>

<script>
    function f5() {
        // 得到输入框的值
        var str = document.getElementById("i1").value;

        // 将小写转成大写
        // alert(str.toUpperCase());
        document.getElementById("i1").value = str.toUpperCase();
    }
</script>
</body>
</html>

数组的使用

JS创建数组的四种方式

Array是JavaScript的内置对象，可以直接使用。

创建数组的方式说明
new Array()创建一个长度为0的数组
new Array(5)创建一个长度为5的数组
new Array(2,4,10,6,41)指定数组中的元素值创建数组
[4,3,20,6]指定数组中的元素值创建数组

JS数组的特点

  1. 数组中元素的类型可以不同
  2. 长度可以动态变化
  3. 数组中还有方法

数组的常用方法

方法名功能
push()添加一个数据
pop()删除一个数据
concat()连接两个数组变成一个数组
reverse()反转数组
join(separator)将数组中的元素按照参数拼接成字符串
sort()排序

字符串的比较规则

  • 字符串按字母的ASCII码值比较大小，如果第1个字母相同，则比较第2个。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS数组</title>
</head>
<body>
<script>
    // 数组创建
    var array1 = new Array();
    document.write(array1 + "<br/>");

    var array2 = new Array(5);
    document.write(array2 + "<br/>");

    // 数组元素类型可以不同
    var array3 = new Array(true, 1.1, 22, "hello");
    document.write(array3 + "<br/>");
    
    var array4 = [11, 'hello', false, 2.2];
    document.write(array4 + "<br/>");

    // 数组添加数据
    array4.push(22222);
    document.write(array4 + "<br/>");

    // 数组删除数据
    array4.pop();
    document.write(array4 + "<br/>");

    // 数组修改数据
    array4[0] = 100;

    // 数组获取数据
    document.write("数组获取数据: " + array4[0] + "<br/>");

    // 数组长度
    document.write(array4.length + "<br/>");

    // 遍历数组
    for (var i = 0; i < array4.length; i++) {
        document.write(array4[i] + "<br/>");
    }

    document.write("数组方法" + "<br/>");
    // 数组方法
    var array5 = [1, 2, 3];
    var array6 = [4, 3, 2];
    // 数组拼接
    var array7 = array5.concat(array6);
    document.write("concat: " + array7 + "<br/>");

    // 数组反转
    array7.reverse();
    document.write("数组反转: " + array7 + "<br/>");

    // 将数组转成字符串,以指定内容连接,和字符串分割相反
    var s = array7.join("^_^");
    document.write("数组拼接" + s + "<br/>");

    // 数组排序
    var arr = ['ac','abcdefg','x','AB','b'];
    document.write("排序前: " + arr + "<br/>");
    arr.sort();
    document.write("排序后: " + arr + "<br/>");

    // 数组中是数字,会先将数字变成字符串,然后按照字符串的规则排序
    var array8 = [100, 9, 46, 20];
    document.write(typeof(array8[0]) + "<br/>");
    document.write("排序前: " + array8 + "<br/>");
    array8.sort()
    document.write("排序后: " + array8 + "<br/>");

    // 按照自己的规则来排序
    array8.sort(function (a, b) {
        // return a - b;
        return b - a;
    });
    document.write("比较器排序后: " + array8 + "<br/>");
</script>
</body>
</html>

JS内置对象：日期对象

创建日期对象

var 变量名 = new Date();
说明：创建一个当前时间的日期对象

日期对象的方法

在这里插入图片描述

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期对象</title>
</head>
<body>
<script>
    // 创建Date表示现在的时间
    var date = new Date();
    document.write(date + "<br/>");

    // 以本地的时间显示
    document.write("本地时间:" + date.toLocaleString() + "<br/>");
    document.write("年:" + date.getFullYear() + "<br/>");
    document.write("月:" + date.getMonth() + "<br/>");
    document.write("日:" + date.getDate() + "<br/>");
    document.write("星期:" + date.getDay() + "<br/>");
    document.write("1970年1月1日00:00:00以来的毫秒值:" + date.getTime() + "<br/>");
</script>
</body>
</html>

使用JS修改CSS的样式

JS操作CSS样式方式一

方式说明
元素对象.style.样式名=“样式值”;每一行代码只能修改一个样式，如果有多个样式必须写多条代码实现

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

CSS中写法JS中的写法说明
colorcolor如果只有一个单词，JS写法与CSS一样的
font-sizefontSize如果有多个单词，使用驼峰命名法

JS操作样式方式二

方式说明
元素对象.className=“类名”;一条代码可以一次修改多个样式，前提先要创建一个类样式

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过js修改css样式</title>
    <style type="text/css">
        .aa {
            color: red;
            font-size: 50px;
        }

        .bb {
            color: orange;
            font-size: 100px;
            background-color: lightyellow;
        }
    </style>
</head>
<body>
<p id="p1">这是第一自然段</p>
<p id="p2" class="aa">这是第二自然段</p>

<input type="button" value="JS改变CSS样式" id="btn1"/>
<input type="button" value="JS改变类样式" id="btn2"/>

<script type="text/javascript">
    // 按钮一点击时设置第一个p标签的样式
    // 语法: 元素对象.style.样式名="样式值"
    document.getElementById("btn1").onclick = function () {
        var p1 = document.getElementById("p1");
        p1.style.color = "blue";
        p1.style.fontFamily = "宋体";
        p1.style.fontSize = "30px";
    }

    // 按钮二点击时设置第二个p标签的class属性的值
    // 语法: 元素对象.className="类名"
    document.getElementById("btn2").onclick = function () {
        document.getElementById("p2").className = "bb";
    }
</script>
</body>
</html>

案例：鼠标移动到文字上显示提示文字

技术点

display样式说明
none表示元素不可见
block以块标签显示，有换行
inline以内联标签显示，没有换行

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS案例</title>

    <style type="text/css">
        a:link {
            text-decoration: none;
        }

        #info {
            width: 180px;
            height: 30px;
            border: 1px dashed orange;
            border-radius: 5px;
            text-align: center;
            background-color: lightyellow;
            /* display: none 隐藏元素*/
            display: none;
        }
    </style>
</head>
<body>
<a id="a1" href="http://xxx.com/" onmouseover="f1()" onmouseout="f2()">xxx</a>
<div id="info">xxxxx</div>

<script>
    // 鼠标移入
    function f1() {
        // 1. 鼠标移到a标签，设置div的样式，让div可见
        document.getElementById("d1").style.display = "block";
    }

    // 2. 鼠标移出a标签，设置div的样式，让div不可见
    function f2() {
        document.getElementById("d1").style.display = "none";
    }
</script>
</body>
</html>

BOM介绍

什么是BOM

Browser Object Model: 浏览器对象模型, 通过BOM可以操作浏览器上的对象

BOM对象

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

BOM：window中的三个对话框方法

语法

window中的方法说明
alert()提示框
prompt()输入框
confirm()确认框

confirm示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>确认框</title>
</head>
<body>

</body>
</html>

BOM：location对象

location对象作用

表示地址栏，可以获取和修改地址栏的内容

location常用属性

在这里插入图片描述

  1. location是window的一个属性
  2. 可以省略href属性
window.location.href = "地址";
window.location = "地址";
location.href = "地址";
location = "地址";

location常用方法

在这里插入图片描述

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location对象</title>
</head>
<body>
<input type="button" value="刷新" onclick="location.reload()"><br/><br/>
<script>
    // 获取:浏览器上访问的地址字符串
    // document.write(location.href + "<br/>");

    // 设置浏览器访问地址,属性相当于跳转到新的页面
    // location.href = "http://www.baidu.com";

    // search得到?后面的参数
    // alert(location.search)

    // 如果location没有写任何属性，默认就是href属性赋值
    // location = "http://www.baidu.com";
    document.write(new Date() + "<br/>");
</script>
</body>
</html>

BOM：history对象

history作用

表示访问过的历史记录，如果没有历史记录，这个对象中的方法不可用。
在这里插入图片描述
注：浏览器上的前进和后退按钮可以点的时候，这个代码才起作用。

读取的是浏览器缓存中数据，如果要访问服务器的数据，需要刷新。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>历史记录对象</title>
</head>
<body>
<a href="xxx.html">显示时间</a>
<input type="button" value="前进" onclick="history.forward()"/>
<input type="button" value="前进go" onclick="history.go(1)"/>
</body>
</html>

案例：倒计时页面跳转

window中计时器有关的方法

方法名作用
setTimeout(函数名, 间隔毫秒数)在指定的毫秒数后执行指定的代码(只会执行一次)，返回值：返回一个整数的计时器。
clearTimeout(计时器)清除计时器，参数计时器。
setInterval(函数名,间隔毫秒数)开启一个定时任务，每隔指定的毫秒数执行指定的方法返回值：返回一个整数的计时器器。
clearInterval(计时器)清除计时器，参数计时器。

分析

  1. 在页面上创建一个span用于放置变化的数字。
  2. 定义一个全局变量为5，每过1秒调用1次自定义refresh()函数
  3. 编写refresh()函数，时间-1秒，修改span中的数字
  4. 判断变量是否为0，如果是0则跳转到新的页面

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时5秒</title>
</head>
<body>
<span id="count">5</span>秒后跳转
<script type="text/javascript">
    var count = 5;

    // 每过1秒修改1次span中数字
    window.setInterval("refresh()", 1000);

    // 被调用的函数
    function refresh() {
        // 减1
        count--;
        // 更新span
        document.getElementById("count").innerHTML = count;
        if (count == 0) {
            // 跳转到其它页面
            location.href = "http://www.baidu.com";
        }
    }
</script>
</body>
</html>

案例：轮播图

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>

    <style type="text/css">
        div {
            /*块级标签居中*/
            width: 500px;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="container">
    <img src="img/0.jpg" id="pic">
</div>

<script type="text/javascript">
    // setInterval定时调用方法
    // 每过2000毫秒调用refresh方法
    window.setInterval("refresh()", 2000);


    // 表示下一张图片的名称
    var num = 1;
    function refresh() {
        // 通过id获取img标签
        var img = document.getElementById("pic");

        // 给img标签的src重新设置一张图片
        img.src = "img/" + num + ".jpg";
        num++;
        // 如果已经是最后一张图片,切换成最前面一张
        if (num == 5) {
            num = 0;
        }
    }
</script>
</body>
</html>

innerHTML和innerText的区别

语法

元素的属性作用
innerHTML获得：得到标签中主体内容，包含子标签
设置：修改标签中的主体内容
innerText获得：得到标签中纯文本的内容
设置： 修改标签中主体内容为纯文本，而不是HTML，它的标签不起作用。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML和innerText</title>
</head>
<body>
<div id="myDiv">
    <span>
        <a href="#">链接</a>
    </span>
</div>
<hr/>
<!--innerHTML和innerText区别-->
<input type="button" id="b1" value="得到HTML">
<input type="button" id="b2" value="得到Text">
<input type="button" id="b3" value="设置HTML">
<input type="button" id="b4" value="设置Text">

<script type="text/javascript">
    document.getElementById("b1").onclick = function () {
        alert(document.getElementById("myDiv").innerHTML);
    }

    document.getElementById("b2").onclick = function () {
        alert(document.getElementById("myDiv").innerText);
    }

    document.getElementById("b3").onclick = function () {
       document.getElementById("myDiv").innerHTML = "<h2 style='color:red'>xxxx</h2>"
    }

    document.getElementById("b4").onclick = function () {
        document.getElementById("myDiv").innerText = "<h2 style='color:red'>xxxx</h2>"
    }
</script>
</body>
</html>

DOM介绍

DOM的概念

Document Object Model: 文档对象模型 (浏览器显示的内容)

每个HTML文档，浏览器在进行解析的时候，都会在内存中创建一棵DOM树，根在上面，下面是节点。节点是元素和属性，文本的父元素。文档就是document对象。
在这里插入图片描述

DOM查找元素的四个方法(重点)

查找节点的方法

在这里插入图片描述

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素</title>

    <style>
        table {
            width: 60%;
            margin: auto;
        }
    </style>
</head>
<body>

<input type="button" value="(通过标签名)给tr的奇数行添加背景色" onclick="f1()"/>
<input type="button" value="(通过name属性)选中所有的商品" onclick="f2()"/>
<input type="button" value="(通过类名)给a添加链接" onclick="f3()"/>
<hr/>
<table border="1px" cellpadding="5px" cellspacing="0px">
    <tr>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td>200</td>
        <td>200</td>
        <td>200</td>
    </tr>
    <tr>
        <td>300</td>
        <td>300</td>
        <td>300</td>
    </tr>
    <tr>
        <td>400</td>
        <td>400</td>
        <td>400</td>
    </tr>
</table>
<input type="checkbox" name="product"> 自行车
<input type="checkbox" name="product"> 电视机
<input type="checkbox" name="product"> 洗衣机
<hr/>
<a class="company">xxx</a><br/>
<a class="company">xxx</a><br/>
<a class="company">xxx</a><br/>


<script>
    // (通过标签名)给tr的奇数行添加背景色
    function f1() {
        // 多个标签放在集合中
        var eles = document.getElementsByTagName("tr");

        // 遍历集合
        for (var i = 0; i < eles.length; i++) {
            if (i % 2 == 0) { // i =0, 2
                eles[i].style.backgroundColor = "lightgreen";
            } else { // i = 1, 3
                eles[i].style.backgroundColor = "lightyellow";
            }
        }
    }

    // (通过name属性)选中所有的商品
    function f2() {
        var eles = document.getElementsByName("product");
        for (var i = 0; i < eles.length; i++) {
            // 以前标签中选中<input checked="checked"/>
            // js中: eles[i].checked = true;
            eles[i].checked = true;
        }
    }

    // (通过类名)给a添加链接
    function f3() {
        var eles = document.getElementsByClassName("company");
        for (var i = 0; i < eles.length; i++) {
            eles[i].href = "http://xxxxx.com/";
        }
    }
</script>
</body>
</html>

DOM增删的方法

添加元素的步骤

  1. 创建元素，使用方法：document.createElement(“标签名”)
  2. 将元素添加到DOM树上，才会在网页显示出来
document.createElement("tr");

相当于在HTML中编写了
<tr></tr>
添加和删除元素方法名作用
父元素.appendChild(子元素)将子元素添加父元素上
父元素.removeChild(子元素)通过父元素删除子元素(他杀)
元素.remove()元素删除本身(自杀)

案例：学生信息管理

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>学生信息管理</title>
    <style type="text/css">
        table {
            width: 500px;
            border-collapse: collapse;
        }

        td {
            text-align: center;
        }

        th {
            background-color: lightgrey;
        }
    </style>
    <script type="text/javascript">
        //添加一行
        function addRow() {
            // 得到文本框中的值
            // 得到学号，姓名
            var no = document.getElementById("no").value;
            var name = document.getElementById("name").value;
            // trim去掉前后的空格
            if (no.trim() == "" || name.trim() == "") {
                alert("学号或姓名不能为空");
                return;
            }
            // 创建tr元素
            var tr = document.createElement("tr");
            tr.innerHTML = "<td>" +
                "<input type=\"checkbox\" name=\"item\">" +
                "</td>" +
                "<td>" + no + "</td>" +
                "<td>" + name + "</td>" +
                "<td>" +
                "<input type=\"button\" value=\"删除\" οnclick=\"deleteRow(this)\">" +
                "</td>";
            // 把tr做为tbody的子元素挂上去
            var tbody = document.getElementsByTagName("tbody")[0];
            // 追加成最后一个子元素
            tbody.appendChild(tr);
            // 清空文本框
            document.getElementById("no").value = "";
            document.getElementById("name").value = "";
        }

        // 删除一行
        function deleteRow(obj) {
            // obj表示button按钮
            if (confirm("真的删除吗?")) {
                // obj 按钮 -> 父元素td -> 父元素tr -> remove()
                obj.parentNode.parentNode.remove();
            }
        }

        // 全选全不选
        function selectAll() {
            //得到最上面的是否选中
            var all = document.getElementById("all");
            //得到所有的复选框
            var items = document.getElementsByName("item");
            for (var i = 0; i < items.length; i++) {
                items[i].checked = all.checked;  //设置checked为true表示选中
            }
        }
    </script>
</head>
<body>
<div>
    <table border="1" cellspacing="0" cellpadding="3">
        <tr>
            <th>
                <input type="checkbox" id="all" onclick="selectAll()">
            </th>
            <th>学号</th>
            <th>姓名</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="item">
            </td>
            <td>00001</td>
            <td>小明</td>
            <td>
                <input type="button" value="删除" onclick="deleteRow(this)">
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="item">
            </td>
            <td>00002</td>
            <td>小红</td>
            <td>
                <input type="button" value="删除" onclick="deleteRow(this)">
            </td>
        </tr>
    </table>
    <br/>
    学号：<input type="text" id="sid" value=""/>
    姓名：<input type="text" id="name" value=""/>
    <input type="button" id="addBtn" value="添加" onclick="addRow()"/>
</div>
</body>
</html>

通过关系找节点方法

在这里插入图片描述

正则表达式体验

什么是正则表达式

正则表达式 也称为规则表达式，就是用一些特殊的符号表示一些规则

"1[3456789][0-9]{9}"

正则表达式作用

  1. 判断一个字符串是否符合指定的规则
  2. 使用正则表达式去一个字符串中查找符合规则的字符串

正则表达式的使用

  1. 创建正则表达式对象
  2. 调用方法去匹配

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式体验</title>
</head>
<body>
<script>
    // 1.定义正则表达式
    var reg = new RegExp("^1[34578][0-9]{9}$");
    // 2.调用方法去匹配字符串
    var b = reg.test("13838389438");
    alert("是否是手机号: " + b);
</script>
</body>
</html>

创建正则表达式

方式1: 实例创建方式

RegExp是JS中一个内置对象

var 变量名 = new RegExp("正则表达式规则");

方式2: 字面量创建方式

var 变量名 = /正则表达式规则/;

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建正则表达式的2种方式</title>
</head>
<body>
<script>
    // 方式1:实例创建方式
    // RegExp是JS中一个内置对象
    var reg1 = new RegExp("1[345789]\\d" + "{9}");

    // 方式2:字面量方式
    var reg2 = /1[345789]\d{9}/
</script>
</body>
</html>

两种方式的区别

  1. 实例创建方式：可以进行字符串拼接，相对更加灵活。但\等字符需要转义。
  2. 字面量创建方式：不能拼接字符串，\等字符不需要转义。

正则表达式的规则

正则表达式的规则

符号作用
[xyz]中括号表示从里面取一个，匹配x或y或z
[a-z]-表示范围。表示a-z中的一个字母
[^xyz]在中括号中^ 符号，表示取反。表示：除了xyz之外的字母
\d数字：相当于[0-9]
\w单词：相当于[a-zA-Z0-9_]
.匹配任意字符，相当于通配符。如果要匹配点号，需要转义。 \.
()表示1组
数量词
{n}表示前面的字符出现n次
{n,}表示前面的字符出现大于等于n次
{n,m}表示前面的字符出现大于等于n次，小于等于m次
+表示前面的字符出现1~n次
*****表示前面的字符出现0~n次
?表示前面的字符出现0~1次
|表示多个单词之间选择一个，或者
边界匹配器
^表示开头
$表示结尾

这些规则在所有的编程语言中都是一样的

正则表达式是单独的一门技术,每种编程语言都会支持正则表达式

正则表达式的举例

正则表达式匹配字符串
\d{3}在JS中默认是模糊匹配，包含3个数字即可：a123b
^\d{3}匹配以3个数字开头的字符串，比如：123b
\d{3}$匹配以3个数字结尾的字符串，比如：a123
^\d{3}$表示严格匹配，必须是3个数字的字符串，比如：123
^ab{2}$匹配a后面出现2个b的字符串，比如：abb
^ab{2,}$匹配a后面至少出现2个b的字符串，比如：abb 或 abbb 或 abbbb
^ab{3,5}$匹配a后面出现3到5个b的字符串，比如：abbb或abbbb或abbbbb
^ab+$匹配a后面出现1到n个b的字符串，比如：ab 或 abb 或 abbb
^ab*$匹配a后面出现0到n个b 的字符串，比如：a 或 ab 或 abbb
^ab?$匹配a后面出现0到1次b的字符串，比如：a 或 ab
hi|hello匹配字符串里包含hi或hello的字符串
ali(ba){2}匹配字符串包含alibaba的字符串
^.{3}$匹配任意三个字符的字符串
[^a-zA-Z]^在中括号中代表取反，匹配非字母的任意一个字符串

匹配模式

ignore:忽略

  • i：忽略大小写比较
  • 匹配模式的两种写法
    1.new RegExp(“正则表达式”,“匹配模式”)
    2./正则表达式/匹配模式

正则表达式的方法

JS中正则表达式的方法说明
boolean test(“字符串”)作用：判断参数中字符串是否匹配当前的正则表达式规则 参数：要比较的字符串 返回：如果匹配返回true，否则返回false

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    // i表示匹配模式，表示忽略大小写
    // var reg = new RegExp("abc","i");

    var reg = /abc/i;
    document.write(reg.test("ABC") + "<br/>");
</script>
</body>
</html>

案例：使用正则表达式校验注册表单

需求

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

1.用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
2.手机号：/^1[34578]\d{9}$/

onsubmit事件说明

<form onsubmit="return false;">
	...
</form>
onsubmit事件，在表单提交的时候激活。如果事件处理函数返回false,则表单不提交。

示例代码

<!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;
        }

        #su,#sm {
            color: red;
        }
    </style>
    <script type="text/javascript">
    </script>
</head>

<body>
<form action="" 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="su"></span>
                            <!--<span id="su">用户名不正确</span>-->
                            <!--<span id="su"><img src="img/gou.png" width="15px"/></span>-->
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 输入长度大于6个字符 -->
                        <td class="left">密码：</td>
                        <td class="center">
                            <input id="pwd" name="pwd" type="password" class="in" />
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 与密码相同 -->
                        <td class="left">确认密码：</td>
                        <td class="center">
                            <input id="repwd" name="repwd" type="password" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 邮箱格式要正确 -->
                        <td class="left">电子邮箱：</td>
                        <td class="center">
                            <input id="email" name="email" type="text" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 使用正则表达式自定义校验规则,1开头，11位全是数字 -->
                        <td class="left">手机号码：</td>
                        <td class="center">
                            <input id="mobile" name="mobile" type="text" class="in" onblur="checkMobile()"/>
                            <span id="sm"></span>
                            <!--<span id="sm">手机号不正确</span>-->
                            <!--<span id="sm"><img src="img/gou.png" width="15px"/></span>-->
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 要正确的日期格式 -->
                        <td class="left">生日：</td>
                        <td class="center">
                            <input id="birth" name="birth" type="text" class="in"/>
                        </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>

<script>
    // 检测用户名是否正确
    function checkUser() {
        // 1.得到文本框中输入的值
        var userName = document.getElementById("user").value;
        // 2.创建正则表达式
        // 1.用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
        var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
        var b = reg.test(userName);
        if (b) {
            // 4.如果匹配，在后面的span中显示一个打勾图片，返回true
            document.getElementById("su").innerHTML = "<img src='img/gou.png\' width='15px'/>";
        } else {
            // 3.如果不匹配，在后面的span中显示错误信息，返回false
            document.getElementById("su").innerHTML = "用户名不正确";
        }

        return b;
    }
    
    
    // 检测手机号
    function checkMobile() {
        // 1.得到文本框中输入的值
        var mobile = document.getElementById("mobile").value;
        // 2.创建正则表达式
        var reg = /^1[3456789][0-9]{9}$/;
        var b = reg.test(mobile);
        if (b) {
            // 4.如果匹配，在后面的span中显示一个打勾图片，返回true
            document.getElementById("sm").innerHTML = "<img src=\"img/gou.png\" width=\"15px\"/>";
        } else {
            // 3.如果不匹配，在后面的span中显示错误信息，返回false
            document.getElementById("sm").innerHTML = "手机号不正确";
        }

        return b;
    }
    
    // 检测合格才提交
    function checkAll() {
        return checkUser() && checkMobile();
    }
</script>
</body>
</html>
荞澳
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web 前端：JavaScript语言（一）
啊Q老师
04-05 3719
JavaScript的概述、特点、组成及JS应用方式
web前端JavaScript文件下载代码
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
12-22 8452
//web前端JavaScript 文件下载代码 const downloadTxtFile = () => { const element = document.createElement("a"); const file = new Blob([text], { type: "text/plain", }); element.href = URL.createObjectURL(file); element.download = "myFile.txt
web前端javascript+jquery知识点总结
weixin_44924238的博客
02-15 9773
1.Javascript 语法.用途 javascript 在前端网页中占有非常重要的地位，可以用于验证表单，制作特效等功能，它是一种描述语言，也是一种基于对象（Object）和事件驱动并具有安全性的脚本语言 ...
Web前端基础——Javascript(JS)
weixin_40013461的博客
09-06 1424
针对JavaScript简单做了解，熟悉基础使用方式。
web前端JavaScript嵌入百度地图API的方法 最详细
管乐明的博客
04-13 1万+
web前端JavaScript嵌入百度地图API最详细的方法一、申请成为百度开发者，获得使用地图API接口的权限，获取（AK）码。二、实现首图效果（可以参考开发者指南）1. 根据Hello World 手册操作2. 将代码块写入Demo中3. 开启鼠标滚轮缩放4. 添加标注 并且通过标注获取当前位置经纬度5. 启用信息窗口6. 自定义信息窗口三、去除地图左下角logo标志级文字四、更多功能 先看效果图 一、申请成为百度开发者，获得使用地图API接口的权限，获取（AK）码。 打开百度地图开放平台 打开网址
Web前端开发——JavaScript的基础使用
快乐学习，daydayup!
04-08 1175
Web前端开发——JavaScript的基础使用
web前端Javascript学习之了解JavaScript弹出框
xuezhangmen的博客
12-14 1756
希望大家可以根据文章的内容，积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。本文基于JavaScript基础，介绍了如何在浏览器中运用的各种弹框，警告框在实际的应用，如何自定义自己的提示框。这意味着，如果用户在输入字段中输入15，则返回字符串“ 15”而不是数字15。确认框看起来类似于警报框，但其中包含“取消”按钮和“确定”按钮。如果用户单击“确定”，则该框返回true。如果用户单击“确定”，则该框将返回输入值。
Web前端 | JavaScript（事件）
m0_61933976的博客
10-17 2917
Web前端 | JavaScript（事件）
web前端发展历程
热门推荐
官方推荐
05-30 3万+
前言 目前在IT公司中前端的岗位越来越成为不可或缺的，前端的地位也愈见明显，很多学校已经体系的传授前端课程，众多培训机构也将前端知识作为了主流课程，也有越来越多的同学加入到前端学习的行列中，作为前端工程师或者前端的学习者我们有必要去了解前端的发展史。...
Web前端开发概述
weixin_57813136的博客
09-04 1788
它拥有着独特的选择器、链式操作、事件处理机制和封装，以及完善的异步JavaScript和XML ( Asynchronous JavaScript and XML ，Ajax )，这些都是其他JavaScript库所望尘莫及的。Web（World Wide Web，全球广域网）是指一种基于互联网的信息系统，通过超文本链接将全球各地的文档、图像、视频等资源相互关联起来，并通过Web浏览器进行交互浏览和访问。它由协议、主机名、路径和可能的查询参数组成，可以通过浏览器访问和获取特定的资源。
Web前端JavaScript面向对象编程
09-27
这个笔记是我在B站根据Mosh的JavaScript面向对象编程教学视频中学习并记录的，里面有我记录的知识点，自己写的代码，还有小部分的截图。大家可以在学习这个内容的时候看一下我的笔记进行参考一下。 视频链接：...
Web前端JavaScript基础学习笔记
07-25
这个学习笔记是我基于B站视频Mosh的JavaScript基础篇学习记录的一些笔记和代码。 内容不多，也就作为一个大家学习的参考。 免费的笔记，如果你喜欢，请和大家分享这个资源，谢谢。 视频链接：...
Web前端 JavaScript 基础教程
10-20
Web前端 JavaScript 基础教程
Web前端JavaScript 高级教程
10-20
Web前端JavaScript 高级教程
web前端javascript
08-11
javascript 前端特效制作 require.js 的使用
前端面试题日常练-day97 【Less】
qq_44640575的博客
07-20 403
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
python爬虫基础——Webbot库介绍
最新发布
qq_56262770的博客
07-22 603
Webbot是一个专为Python设计的库，用于简化网页自动化任务。它基于Selenium WebDriver，提供了一系列高级接口，使自动化任务更加直观和易于管理。Webbot库的设计理念是将复杂的网页交互抽象为简单的API调用，从而减少开发者在编写自动化脚本时的工作量。Webbot库的核心功能包括自动化表单填写、点击操作、数据抓取等，同时支持处理JavaScript渲染的页面和模拟用户行为。这些功能使得Webbot库成为自动化测试、数据收集和网页监控等领域的理想选择。
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
m0_62996549的博客
07-18 479
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1774
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
web前端javascript高级应用实训
05-30
Web前端JavaScript高级应用实训，主要是针对已经掌握了JavaScript基础语法和DOM操作的学习者，通过实战项目的方式，进一步提升对JavaScript的应用能力和实践经验。在实训中，学习者可以接触到一些高级的JavaScript...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值