js：正则的符号，DOM的动画应用 - 第十五天

# 一、复习

1、正则的概念和意义：字符的作用

2、正则的创建：

    - 字面量

    - 构造函数

    - 区别：构造函数可以根据变量创建正则

3、正则的使用

    - 查询：根据正则表达式的规则查询字符串中符合的子串，返回查询结果

        - str.match(reg)

            - 将查询到的结果以数组的形式保存

        - str.search(reg)

            - 返回的是查询到的子串的索引

        - reg.exec(str)

            - 可以重复执行，每次执行都会在上次查询结束的位置继续查询（可修改）

    - 替换：根据正则表达式的规则查找字符串内符合的子串，替换成指定字符

        - str.replace(reg, "")

    - 验证：根据正则表达式的规则验证字符串是否符合规则，返回布尔值

        - reg.test(str)

4、正则的符号

    - 修饰符

        - g：全局

        - i：忽略大小写

    - 转义符

        - \d：数字

        - \w：数字字母下划线

        - \s：空白字符

        - \D：非数字

        - \W：非数字字母下划线

        - \S：非空白

        - .：通配符

        - \：转所有，有含义的符号转成没含义的符号

    - 量词

        - *：0或多个

        - +：1或多个

        - ?：0或1个

        - {n}：具体的个数

        - {n,}：至少n个，无上限

        - {n,m}：至少n个，至多m个

    - |：或

    - [^]：非

    - ()：子串，一个整体

    - []：中元符，只表示一位，中元符内为或关系

    - ^：从开始的位置开始验证

    - $：验证到结束的位置

 

Unicode编码的范围：/^[\u2E80-\u9FFF]+$/

# 四、DOM的应用 - 动画

1、运动：某个物体随着事件的改变修改自身的属性

2、运动三要素：

    - 运动源：什么元素的什么属性

    - 终点：

     -速度：速率、步长

        - 人眼1秒能识别24张连续的图片

3、简单运动

4、加速（重力）

5、减速（缓冲）

    - 核心：动态计算步长

6、圆周

7、淡入淡出

move(obox,{

        left:50,

        top:20,

        height:500,

        width:500

    })

    var t;

    function move(ele,arr,target){

        clearInterval(elet);



         ele.t=setInterval(function(){

             var flag = true;

           

            for(var i in obj){

                var now = parseInt(getStyle(ele,i));

            var speed = (obj[i] - now)/9;

            speed = speed<0?Math.floor(speed):Math.ceil(speed);

                ele.style[i]=now +speed+'px';

            }

            if(now !== obj[i]){

                flag=false;

            }

            if(flag){

                clearInterval(ele.t);

            }

        }, 30);

    }



    function getStyle(ele,arr){

        if(ele.currentStyle){

            return ele.currentStyle[arr];

        }else{

            return getComputedStyle(ele)[arr];

        }

    }