事件委托&&正则表达式

最新推荐文章于 2024-04-28 18:28:46 发布

沐沐185

最新推荐文章于 2024-04-28 18:28:46 发布

阅读量166

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_67642008/article/details/125607248

版权

JS 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

一、事件委托

1.事件委托的原理：给父盒子添加事件监听，通过事件冒泡来影响每一个子盒子

当每一个子元素触发父元素的事件时，父元素的事件e.target 返回的是对应的子元素，可以获取到对应的子元素。

注意：使用事件委托时，父元素也是监听事件的额，所以，需要在不希望父元素触发事件时，我们可以筛选一下e.target 使得 e.target ！= 父元素。

<body>
    <ul>
        <li>hello1</li>
        <li>hello2</li>
        <li>hello3</li>
        <li>hello4</li>
        <li>hello5</li>
    </ul>
    <script>
        /* 事件委托 */
        var ul = document.querySelector("ul");
        var lis = document.querySelectorAll("li");
        ul.addEventListener("mousemove", function (e) {
            e = e || event;
            if (e.target != ul) {
                console.log(e.target);
                for (var i = 0; i < lis.length; i++) {
                    lis[i].style.background = "";
                }
                e.target.style.background = "red";
            }
        }, false);
    </script>
</body>

二、正则表达式

正则表达式的类型是 object

正则表达式的语法一：var patt=/pattern/modifiers;

正则表达式的语法二：var patt=new RegExp(pattern,modifiers);

modifiers (修改器，修饰符)，修饰符(modifiers)描述了检索是否是全局，区分大小写等

修饰符：

i-->是用来执行不区分大小写的匹配

g-->是用来执行全局/全文的搜索(而不是执行找到第一个匹配值就停止，而是全文匹配)

正则表达式方法：

检测一个字符串是否与正则相匹配；

1.reg.test(string) =》返回值为布尔值 true匹配，false不匹配；

2.reg.exec(string)=》匹配成功返回数组，并确定其位置，否则返回null；

var str = "A";
 var reg = new RegExp(/[a-z]/, "i");
var res = reg.exec(str);
console.log(res); //-->返回数组Array(1) 0: "A";groups: undefined;index: 0;input: "A";length: 1
 var res = reg.exec("1");
console.log(res); //--->不匹配时，返回null

常用表达式：

[]表示中括号中任意一个匹配就可以；

1.[a-z] 查找任何从小写 a 到小写 z 的字符

//      var reg = new RegExp(/[a-z]/i);
        var reg = new RegExp(/[a-z]/, "i"); //-->两种写法均可
        var flag = reg.test(str);
        //1.reg.test("字符串"),方法返回布尔值，匹配返回true，否则返回false
        console.log(flag);

2.[A-Z] 查找任何从大写 A 到大写 Z 的字符；[/[a-zA-Z]/]匹配26个大小写字母

 //匹配26个字母大小写；
        var reg = /[a-zA-Z]/g;
        var flag = reg.test("aA")
        console.log(flag); //-->true;

3.[0-9] 查找任何从 0 至 9 的数字，只有有一个符合匹配的时候，就返回true


//匹配0-9数字，只有匹配一个，就返回true
 var reg = /[0-9]/;
 console.log(reg.test("a01")); //-->true

4.[abc] 查找括号内的任意一个字符；只要有一个字符匹配返回true;

 //[abc]	查找括号内的任意一个字符
var reg = /[abc]/
console.log(reg.test("a1233"));//--->true

5.[^abc] 查找除了括号内的任意字符;


// /[^abc]/查找除了括号内的任意字符
//除了括号里的字符串，只有存在其他的任何字符都返回true
var reg = /[^abc]/
console.log(reg.test("a")); //--->false
console.log(reg.test("af")); //--->true

常用元字符：

1.\w 匹配数字、包含大小写字母、下划线

2.\W 匹配非数字、字母、下划线（一般用于匹配特殊字符）

3.\d 匹配数字

4.\D 匹配非数字

5.\s 匹配空白字符（空格、换行）换行就会产生空格

6.\S 匹配非空白字符

7.\n 匹配换行符，不匹配空格

8.^是表示开头，只匹配以^号后面的字符开头的字符串，不是以特定开头的字符串不进行匹配

9.$是表示结尾，只匹配以$号前面的字符结尾的字符串，不是以特点字符结尾的字符串不进行匹配

10.^ 和 $ 两个符号同时使用时，表示精确匹配，两个条件都有满足,即匹配字符串和匹配模式一样

var str = "123Abc";
var patt1 = /^[0-9]+abc$/i; //i是表示执行时不区分大小写
//^是表示开头，只匹配以^号后面的字符开头的字符串，不是以特定开头的字符串不进行匹配
//$是表示结尾，只匹配以$号前面的字符结尾的字符串，不是以特点字符结尾的字符串不进行匹配
//^ 和 $ 两个符号同时使用时，表示 精确匹配，两个条件都有满足,即匹配字符串和匹配模式一样
console.log(typeof patt1);//-->object
console.log(str.match(patt1));

var str2 = "Is this all there is?";
var patt2 = /is/g;
console.log(str2.match(patt2));