javascript-事件基础-对象的使用-Math的使用-字符串的操作-数组操作-鼠标键盘事件-定时器

最新推荐文章于 2024-08-19 18:29:28 发布

zdc45625

最新推荐文章于 2024-08-19 18:29:28 发布

阅读量362

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/zdc45625/article/details/86631431

版权

前端学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

事件基础

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件基础</title>
    <style>
        .box:hover {
            cursor: pointer;
        }
    </style>
</head>
<body>
<!--为该盒子添加一个点击事件-->
<div class="box">12345</div>

<!--需求1:每一个li都具有点击事件,事件的目的是打印自己的文本内容-->
<!--需求2:点击时,不是打印内容,而是打印li自己的索引-->
<ul class="ul">
    <li>001</li><!-- index: 0 -->
    <li>002</li><!-- index: 1 -->
    <li>003</li><!-- index: 2 -->
    <li>004</li><!-- index: 3 -->
</ul>
</body>

<script>
    var lis = document.querySelectorAll('.ul li');
    // lis[0].onclick = function () {
    //     alert(this.innerText)
    // }
    // lis[1].onclick = function () {
    //     alert(this.innerText)
    // }

    // 循环绑定事件 => 变量污染
    for (var i = 0; i < lis.length; i++) {

        // 给页面元素对象添加一个任意属性(保留索引的属性index)
        lis[i].index = i;

        lis[i].onclick = function () {
            // alert(this.innerText)
            // console.log(i);
            // console.log(lis[i].innerText)
            // 每一个li都有index属性，取出自己(this)的索引
            console.log(this.index)
        }
    }

    // i = 100;

</script>

<script>
    // 1.获取对象
    var box = document.querySelector('.box');
    // 2.绑定事件 => 3.完成具体操作
    // box.onclick = function () {
    //     alert(123)
    // }
    function aaa() {
        alert("aaa")
    }
    function btnClick() {
        alert(123);
        return aaa;
    }
    // 事件与已有的函数进行绑定 => 将函数地址给事件完成绑定
    // box.onclick = btnClick;

    // 错误写法: 将btnClick函数执行结果返回给box.onclick
    // box.onclick = btnClick();
    // console.log(box.onclick)

    // 完成事件的绑定后，绑定的函数由系统来调用，系统在用户触发事件时来调用
    box.onclick = function () {
        alert(this.innerText)
    }
</script>
</html>

对象的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象的使用</title>
</head>
<body>
对象的使用
</body>
<script>
    // 创建一个对象
    // 了解：面向对象js编程
    function Person(name,age) {
        this.name = name;
        this.age = age;
        this.work = function () {
            console.log(this.name + '在工作');
        }
    }
    var p1 = new Person('egon',79);
    var p2 = new Person('kevin',78);
    var p3 = new Person('jerry',3);
    console.log(p1.name);
    console.log(p2['age']);
    p3.work();

    var obj = {
        name1:'egon',
        name2:'tank',
    }
    for (var i=1;i <=2;i++) {
        console.log(obj['na' + 'me' +i])
    }
    // 对象的key(属性名)就是字符串类型

    // 作为字典来使用
    var dict = {
        a:"AAA",
        b:"BBB"
    }
    // 查
    console.log(dict.a);
    // 改
    dict.a = "AAAAA";
    console.log(dict);
    // 增
    dict.c = "CCC";
    console.log(dict);
    // 删
    delete dict.b;
    console.log(dict);
    
     // 总结：只要是js对象，就可以随意添加属性
</script>
</html>

Math的使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Math</title>
</head>
<body>
Math
</body>
<script>
    // 绝对值
    // console.log(Math.abs(-10));

    // 最大值
    // console.log(Math.max(10, -10, 24, 35, 12));

    // 随机数 [0, 1)
    // for (var i = 0; i < 20; i++) {
    //     var rNum = Math.random();
    //     console.log(rNum);
    // }

    // [0, 10]之间的正整数
    // [0, 1) * 11 => [0, 11) 取整 => [0, 10]
    // for (var i = 0; i < 20; i++) {
    //     var rNum = Math.floor(Math.random() * 11);
    //     console.log(rNum);
    // }

    // [5, 15]之间的正整数
    // [0, 10] + 5 => [5, 15]
    // for (var i = 0; i < 20; i++) {
    //     var rNum = parseInt(Math.random() * 11) + 5;
    //     console.log(rNum);
    // }

    // [min, max]
    // 公式: parseInt(Math.random() * (max - min + 1)) + min

    // [37, 38]
    // for (var i = 0; i < 20; i++) {
    //     var rNum = parseInt(Math.random() * (38 - 37 + 1)) + 37;
    //     console.log(rNum);
    // }



    // * / n => [0, n-1]
    // [min, max]
    // 公式: parseInt(Math.random() * 100000000000) % (max - min + 1) + min
    for (var i = 0; i < 20; i++) {
        var rNum = parseInt(Math.random() * 100000000000) % 11 + 5;
        console.log(rNum);
    }

    var ele = document.querySelector("h1:nth-child(1)")
    ele.setAttribute("src", "ssdsdsa");

    ele = document.querySelector("h1:nth-child(2)")
    ele.setAttribute("src", "ssdsdsa");
</script>
</html>

字符串的操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>字符串操作</title>
</head>
<body>
字符串操作
</body>
<script>
    // 1.指定索引下的字符
    var s = 'abcdef123456呵呵哈哈'
    console.log(s.charAt(3));

    // 2.判断是否存在：呵呵是否在字符串中
    // -1代表不存在，反正就是存在(的索引)
    console.log(s.indexOf('呵')); // 12
    console.log(s.lastIndexOf('呵')); // 13

    // 3.替换
    var newS = s.replace('abc','ABC');
    console.log(s);
    console.log(newS);

    // 总结：字符串为不可变类型，如果某操作要改变字符串，该操作一定拥有返回值

    // 4.裁剪 slice(n, m) 从索引n开始截取到索引m之前
    newS = s.slice(0,3);
    console.log(newS);

    // 5.拆分数组
    var ss = '123 456 abc def';
    var arr = ss.split(' ');
    console.log(arr)
</script>
</html>

数组操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数组操作</title>
</head>
<body>
数组操作
</body>
<script>
    var arr = [3, 5, 1, 2, 4];
    console.log(arr); // [3, 5, 1, 2, 4]

    // 1.反转
    arr.reverse();
    console.log(arr);  // [4, 2, 1, 5, 3]

    // 2.排序
    arr.sort();
    console.log(arr); // [1, 2, 3, 4, 5]
    console.log(arr.reverse()) // [5, 4, 3, 2, 1]

    // 3.判断元素是否存在(不等于-1就是存在)
    console.log(arr.indexOf(5));

    //  4.拼接成字符串
    var ss = arr.join('@');
    console.log(ss); // 5@4@3@2@1

    // 5.过滤器 (保留符合条件的结果)
    var newArr = arr.filter(function (ele) {  // 回调函数的回调次数有数组的个数决定
        // filter回调了三个参数: ele, index, sourcerr

        // 偶数
        if (ele % 2 == 0) {
            // 满足过滤条件
            return true;
        }
        // 不满足过滤条件
        return false;
    });
    // 满足过滤条件的就会添加到新数组中保留
    console.log(newArr) // [4, 2]

    /*原理
    arr.filter(fn) {

        var newArr = [];
        for (var i = 0; i < this.length; i++) {
            var res = fn(this[i], i, this);
            if (res == true) {
                newArr.push(res)
            }
        }
        return newArr;
    }
    */

</script>
<script>
    console.log("-----------------------");
    var a = [4, 3, 5, 1, 2];
    a.push(6);
    console.log(a);
    a.unshift(0);
    console.log(a);
    var res = a.pop();
    console.log(a, res);
    res = a.shift();
    console.log(a, res);


    // splice(begin, length, ...eles);
    // begin开始的索引
    // length操作的长度
    // 替换为的新元素们(可以省略)

    // 增
    // 从索引3之前操作0位,替换为10 => 在索引3插入10
    a.splice(3, 0, 10); // [4, 3, 5, 10, 1, 2]
    console.log(a);

    // 在索引0之前操作0位,替换为1,2 => 在首位添加1和2
    a.splice(0, 0, 1, 2);
    console.log(a); // [1, 2, 4, 3, 5, 10, 1, 2]

    // 改
    // 在索引末尾之前操作1位,替换为20 => 在末位修改为20
    a.splice(a.length - 1, 1, 20);  // [1, 2, 4, 3, 5, 10, 1, 20]
    console.log(a); // [1, 2, 4, 3, 5, 10, 1, 20]

    // 删
    a.splice(2, 3);
    console.log(a); // [1, 2, 10, 1, 20]
</script>
</html>

鼠标事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠标事件</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    var box = document.querySelector('.box');
    // 悬浮
    box.onmouseenter = function () {
        box.style.cursor = "pointer";
        console.log("鼠标悬浮了");
    }
    // 移动
    box.onmousemove = function () {
        console.log("鼠标在移动");
    }
    // 按下
    box.onmousedown = function (ev) {
        console.log(ev);
        // 鼠标的点击
        // ev.clientX | ev.clientY
        console.log("鼠标按下")
    }
    // 抬起
    box.onmouseup = function () {
        console.log("鼠标抬起")

    }
    // 移开
    box.onmouseleave = function () {
        console.log("鼠标移开")
    }
    // 右键：右键按下抬起为一次右键
    box.oncontextmenu = function () {
        console.log("鼠标右键")
    }
</script>
</html>

键盘事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>键盘事件</title>
</head>
<body>
键盘事件
</body>
<script>
    // 具体按下的是哪个按键
    document.onkeydown = function () {
        // console.log("键盘按下了")
    }
    // ev：系统回调事件函数,传递的事件对象
    // 键盘事件中，ev中有keyCode来唯一标识具体的按键
    // 通过ctrlKey | shiftKey | altKey 来标签特殊按键是否为按下状态
    document.onkeyup = function (ev) {
        console.log(ev);
        console.log(ev.keyCode,ev.altKey);
        console.log("键盘抬起了")
    }
</script>
</html>

定时器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>定时器</title>
</head>
<body>
定时器
</body>
<script>
    // 一次性定时器
    var r1 = setTimeout(function () {
        console.log("一次性定时器响了!1111");
    },1000);

    var r2 = setTimeout(function () {
        console.log("一次性定时器响了!2222");
    },1000);

    var num = 0;
    var r3 = setInterval(function () {
        console.log("持续性性定时器响了%d次", ++num);
    },1000);

    console.log("代码向下执行了!");
    console.log(r1,r2,r3);

    // 如何取消定时器 => 通过定时器数字编号(该定时器是第几个创建的)
    clearInterval(2);

    var r4 = setTimeout(function () {
        console.log("一次性定时器响了!4444")
    },1000);
    console.log(r4);
    
    // 将页面中所有定时器清楚
    // 注：清楚定时器不分种类可以混用
    // n 一定大于之前所有的定时器编号
    var n = setTimeout(function () {}, 1);
    for (var i = 0; i < n; i++)  { // 将1~n之间所有定时器再清一遍
        clearTimeout(i)
    }

</script>
</html>