你好javascript day14

1)鼠标事件

mouseover和mouseout 是冒泡的，可以收到子元素的滑入滑出

mouseenter和mouseleave是不冒泡的，只能收到这个当前容器的进入和离开，子元素不会触发

2）焦点事件和输入事件

焦点事件主要用于表单元素，以及超链接，使用点击或者tab可以切换汇聚焦距

focus 是汇聚焦距一般汇聚焦距时，会有outline样式

blur 是失去焦距

失焦和聚焦主要用来判断表单验证

input 输入事件主要用于多行文本框和文本框

扫描二维码关注公众号，回复： 11319437 查看本文章

3）按键事件和滚轮事件

keyudwon 按下

keyup 松开

scroll 滚动条事件

// 鼠标滚轮

// IE 和谷歌浏览器

document.addEventListener("mousewheel",mouseHandler);

// 火狐浏览器

document.addEventListener("DOMMouseScroll",mouseHandler);

4）正则表达式基本语法

/^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/

查找、替换，通常用作验证，截取，隐藏，编码

构造函数创建方法

var reg=new RegExp("ab","g");

var reg=/表达式/修饰符

修饰符

g 全部

i 不区分大小写

m 多行匹配

5）正则表达式相关方法

exec

查找符合正则内容，index就是下标，返回一个数组，没找到就会返回null

不能查找多个

var str="eksakjdksadh";

console.log(/sa/g.exec(str));

test

查看字符串是否有满足正则表达式的内容，如果有，返回true，没有就返回false

var reg=/ab/;
var bool=reg.test('absder');
console.log(bool);//true

字符串方法

var str="abcedg";

// 替换

str.replace(/a/,"z");

// 查找返回数组

str.match(/a/);

// 查找元素，返回下标

str.search(/a/);

// 分隔数组

str.split(/a/);

match

var str="abcdabcd";

console.log(str.match(/a/));//查找一个时，与test类似，可以返回一个数组，下标和查找到的内容

console.log(str.match(/a/g));//查找多个，就会把每个查找到的内容返回出来

var str="abcdabcd";

console.log(str.search(/c/));//只能找到一个正在表达式的下标

split

var str="ab?c=3&da=4&bcd=5";

var arr=str.split(/[?&]/g).slice(1);

console.log(arr);

节流

        var bool=false;
   
        var input=document.querySelector("input");
        input.addEventListener("input",inputHandler);

        function inputHandler(e){
            if(bool) return;
            var ids=setTimeout(function(){ clearTimeout(ids); bool=false; console.log(input.value); },500); bool=true; }

人物行走

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 33px;
        height: 33px;
        background-image: url("./img/Actor01-Braver03.png");
        background-position-x: 0px;
        background-position-y: 0px;
        position: absolute;
        left: 0px;
        top: 0px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      var actor, key;
      var speedX = 2, speedY = 2, x = 0, y = 0, count=0, time=10; init(); function init() { actor = document.querySelector("div"); document.addEventListener("keydown", mouseHandler); document.addEventListener("keyup", mouseHandler); setInterval(animation, 16); } // 帧频 帧 // 60帧/秒 // 1000/60=16.666666毫秒 function mouseHandler(e) { if (e.type === "keydown") { if (!key) { switch (e.keyCode) { case 37: actor.style.backgroundPositionY = "-33px"; break; case 38: actor.style.backgroundPositionY = "-99px"; break; case 39: actor.style.backgroundPositionY = "-66px"; break; case 40: actor.style.backgroundPositionY = "0px"; break; } } key = e.keyCode; } else { key = undefined; actor.style.backgroundPositionX="0px"; } } function animation() { if (!key) return; changeActor(); actorMove(); } // 防抖 function changeActor() { // 因为考虑不能进入太快，当前函数原来是16毫秒进入一次。 // 现在我们设置一个time，每10次进入一次，这样就造成每160毫秒进入一次，减缓图像改变速度 // 这就是防抖 time--; if(time>0)return; time=10; count++; if(count>3) count=0; actor.style.backgroundPositionX=-count*32+"px"; } function actorMove() { switch (key) { case 37: x -= speedX; break; case 38: y -= speedY; break; case 39: x += speedX; break; case 40: y += speedY; break; } actor.style.left = x + "px"; actor.style.top = y + "px"; } </script> </body> </html>

猜你喜欢