JavaScript事件和正则表达式

小媛同学.，

已于 2022-08-09 17:18:37 修改

阅读量192

点赞数

文章标签： javascript 前端 html

于 2022-08-09 16:24:28 首次发布

本文链接：https://blog.csdn.net/m0_61843988/article/details/126213176

版权

一、事件

1、鼠标事件

鼠标事件	意义
onclick	鼠标单击事件
ondbclick	鼠标双击事件
onmouseover	鼠标移动到某一个网页对象
onmouseout	鼠标离开某一个网页对象
onmouseenter	鼠标移入
onmouseleave	鼠标移出
onmousedown	鼠标按下(点击)
onmousemove	移动鼠标
onmouseup	鼠标抬起(松开)

案例1：通过单击事件实现如下图所示的选项卡切换的效果

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡切换</title>
    <style>
        ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        nav ul li{
            display: inline-block;
            padding: 10px 40px;
            color: white;
            background-color: red;
        }
        .active{
            background-color: brown;
        }
        main{color: white;}
        main div{
            width: 386px;
            height: 100px;
            display: none;
        }
        main div:first-child{background-color: lightgreen;}
        main div:nth-child(2){background-color: yellowgreen;}
        main div:last-child{background-color: green;}
        .active_div{
            display: block;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li class="active">Home</li>
            <li>About</li>
            <li>Login</li>
        </ul>
        <main>
            <div class="active_div">Home</div>
            <div>About</div>
            <div>Login</div>
        </main>
    </nav>
    <script>
        var list = document.querySelectorAll('nav ul li');
        var divs = document.querySelectorAll('main div');
        // 循环给每一个li标签绑定单击事件
        for(var i=0;i<list.length;i++){
            // 给每个li添加一个自定义属性data-index
            list[i].dataset.index=i;
            list[i].onclick=function(){
                // console.log(list[i]);//结果为:undefined
                // 编写该事件要处理的功能
                // 先将所有li上面的active删掉
                for(var j=0;j<list.length;j++){
                    list[j].classList.remove('active')
                    divs[j].classList.remove('active_div')
                }
                /*for(var n=0;n<divs.length;n++){
                    divs[n].classList.remove('active_div')
                }*/
                // 将active添加到当前点击的li上
                this.classList.add('active')
                // 获取当前点击的元素上的自定义属性data-index的值
                var index = this.dataset.index
                console.log(index);
                divs[index].classList.add('active_div')
            }
        }
    </script>
</body>
</html>

案例2：鼠标滑动小案例

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: url(img/bg1.jpg) no-repeat 0 0;
            background-size: 100%;
        }
        nav{
            width: 100%;
            height: 100%;
            background-color: rgba(128, 128, 128, 0.784);
        }
        .list{
            width: 1200px;
            height: 200px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .list img{
            width: 100%;
            height: 100px;
            margin-left: 10px;
            /* color: darkgrey; */
            border-radius: 5px;
            border: 5px solid rgb(157, 157, 157);
        }
        .list img:hover{border: 5px solid white;}
    </style>
</head>
<body>
    <nav>
        <div class="list">
            <img src="img/bg1.jpg" alt="">
            <img src="img/bg2.jpg" alt="">
            <img src="img/bg3.jpg" alt="">
            <img src="img/bg4.jpg" alt="">
            <img src="img/bg5.jpg" alt="">
            <img src="img/bg6.jpg" alt="">
        </div>
    </nav>
    <script>
        var imgs = document.querySelectorAll('.list img');
        var body = document.body;
        // 给图片绑定鼠标移入事件
        for(var i=0;i<imgs.length;i++){
            // 绑定事件
            imgs[i].onmouseover=function(){
                // console.log(this.src);
                body.style.backgroundImage='url('+this.src+')'
            }
        }
    </script>
</body>
</html>

注意：

两种移入移出的区别：

onmouseover和onmouseout：不仅在元素本身起作用，还会将事件绑定在子元素身上
onmouseenter和onmouseleave：仅仅在元素本身起作用，在其子元素上不起作用

2、键盘事件

键盘事件	意义
onkeydown	按下一个键
onkeyup	松开一个键
onkeypress	在用户按下键（在键盘上）时发生

3、表单事件

表单事件	意义
onfocus	获取焦点
onblur	失去焦点
onchange	对比获取焦点和失去焦点时里面内容不一样才会触发
oninput	只要内容不一样就触发
onreset	重置事件
onsubmit	提交事件

注意： onreset和onsubmit必须在form表单中才能使用

4、移动端触摸事件

移动端触摸事件	意义
ontouchstart	在用户触摸一个元素时发生
ontouchmove	当用户从元素上移开手指时发生
ontouchend	当用户触摸元素时发生
ontouchcancel	当用户在屏幕上移动手指时发生

二、正则表达式

语法：/正则表达式主体/修饰符(可选)

案例：var reg = /\b[a-zA-Z0-9]{6,8}\b/

案例解析：只能输入字母数字，并且长度至少是6位但不多于8次

1、使用字符串方法

方法	属性
search()	用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置
replace()	用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串

2、正则表达式方法

方法	属性
test()	用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
exec()	用于检索字符串中的正则表达式的匹配。