JavaScript入门学习笔记

于 2024-07-20 17:46:33 发布
阅读量713 收藏 14
点赞数 16
文章标签： javascript 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_68254334/article/details/140574929
版权

JavaScript入门学习笔记

2024年5月30日

一、JavaScript的三种引入方式

1、嵌入到HTML文件中(学习时可以使用，实际开发中不推荐)

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        /*变量的定义*/
        var num = 10;
        var name = "王亚楠";
        var ID  = "20210214306";

        /*输出到控制台*/
        console.log(num);
        console.log(name);
        console.log(ID);
    </script>

</body>

</html>

2、外部引入(实际开发中最常用的方式)

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script type="text/javascript" src="../javaScript.js"></script>

</body>

</html>

/*变量的定义*/
var num = 10;
var name = "王亚楠";
var ID = "20210214306";

/*输出到控制台*/
console.log(num);
console.log(name);
console.log(ID);

3、引入网络来源的JavaScript文件

具体来源：参考https://www.bootcdn.cn/

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

</body>

</html>

二 、JavaScript的注释以及常用输出方式

1、单行注释和多行注释

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //单行注释
        //var num = 100

        /*
        多行注释
        */

        /*
        var name = "wangyanan"
        console.log(name)
        */

    </script>
</body>

</html>

2、三种输出方式

1、弹出框输出(alert)

2、输出到页面(document.write)

3、输出到控制台(console.log)

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        //1、 弹出框
        alert("我是弹出框");
        //2、输出到页面
        document.write("我是输出到页面");
        //3、 输出到控制台
        console.log("我是输出到控制台");

    </script>
</body>

</html>

三、数据类型

1、数据类型包括：数值型、字符串型、布尔型、undefined、对象、null

2、利用typeof判断数据类型

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 利用typeof判断基本数据类型
        var num = 100;
        console.log(typeof (num));  //number类型

        var name = "wangyanan";
        console.log(typeof (name));  //string类型

        var flag = true;
        console.log(typeof (flag));  //boolean类型
    </script>
</body>

</html>

3、字符串的方法

1、获取字符串的长度（length）

2、 获取指定位置的字符(charAt)

3、连接两个字符串，不改变原字符串(concat)

4、截取字符串a到b几个字符substring(a,b),不包含b的字符

5、截取字符串从a开始b个字符substr(a,b)

6、确定一个字符串在另一个字符串中第一次出现的位置，返回位置，如果没有则返回-1(indexOf)

​ indexOf(“y”,n) 从第n个字符开始匹配字符

7、trim去除字符串两端的空格，不改变原字符串

8、split(“”)按照指定的方法分割字符串,生成一个数组

​ split(“”,n)返回n个字符串

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //获取字符串的长度：
        var str1 = "wangyanan"
        console.log(str1.length)

        //获取指定位置的字符(charAt)
        console.log(str1.charAt(1))//a
        console.log(str1.charAt(0))//w
        console.log(str1.charAt(-1))//返回空值
        console.log(str1.charAt(str1.length - 1))//n

        //连接两个字符串，不改变原字符串(concat)
        var str2 = "zhangyueyin"
        var str3 = "wangyanan"
        str4 = str2.concat(str3)
        console.log(str4)//zhangyueyinwangyanan

        //截取字符串a到b几个字符substring(a,b)
        //不包含b的字符
        var name = "wangyanan"
        console.log(name.substring(2, 5))//ngy

        //截取字符串从a开始b个字符substr(a,b)
        name2 = name.substr(2, 5)
        console.log(name2)//ngyan

        //确定一个字符串在另一个字符串中第一次出现的位置，返回位置，如果没有则返回-1(indexOf)
        //indexOf("y",n) 从第n个字符开始匹配字符
        name3 = name.indexOf("y", 6)
        console.log(name3)

        //trim去除字符串两端的空格，不改变原字符串
        var h = " Hello World!!! "
        console.log(h)
        h1 = h.trim()
        console.log(h1)

        //split("")按照指定的方法分割字符串,生成一个数组
        //split("",n)返回n个字符串
        var name4 = "wang|ya|nan"
        console.log(name4.split("|"))
        console.log(name4.split("|",1))

    </script>
</body>

</html>

四、判断语句

1、if_else语句

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var num = 1000;
        if(num < 100){
            console.log("该数字大于100")
        }else{
            console.log("该数字小于100")
        }
    </script>
</body>
</html>

2、switch_case语句

必须加break，否则可能存在贯穿。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var day = 5;
        switch (day) {
            case 1:
                console.log("今天星期一")
                break;
            case 2:
                console.log("今天星期二")
                break;
            case 3:
                console.log("今天星期三")
                break;
            case 4:
                console.log("今天星期四")
                break;
            case 5:
                console.log("今天星期五")
                break;
            case 6:
                console.log("今天星期六")
                break;
            case 7:
                console.log("今天星期日")
                break;
        }
    </script>
</body>

</html>

3、三元运算符

简化if_else语句

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        //常规写法
        var num = 100;
        if (num % 2 == 0) {
            console.log("num是偶数");
        } else {
            console.log("num是奇数");
        }

        //三元运算符
        //写法一：
        num % 2 == 0 ? console.log("num是偶数") : console.log("num是奇数");


        //写法二：
        var result = num % 2 == 0 ? "num是偶数" : "num是奇数";
        console.log(result)


    </script>
</body>

</html>

五、循环语句

1、for循环

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //从1打印到100：

        for (var i = 1; i <= 100; i++) {
            console.log(i);
        }

        //计算1-100的和：
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        console.log(sum)

        //打印九九乘法表：

        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                console.log(i + "*" + j + "=" + i * j)
                document.write(i + "*" + j + "=" + i * j + "  ")

            }
            //打印一个换行
            document.write("<br>")
        }
    </script>
</body>

</html>

3、while循环

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //循环打印1-100的值
        var i = 0
        while (i <= 100) {
            console.log(i)
            i++
        }
    </script>
</body>

</html>

六、数组

1、数组的定义

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        //定义一个数组
        var arr1 = ["20210214306", "信管213", "王亚楠", "22"]
      

    </script>
</body>

</html>

2、数组的两种输出方式

1、通过下标调用

2、利用循环遍历输出

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        var arr1 = ["20210214306", "信管213", "王亚楠", "22"]


        //通过下标的方式调用
        /*  
          console.log(arr1[0])
          console.log(arr1[1])
          console.log(arr1[2])
        */
        //通过for循环输出一：
        for (var i = 0; i <= arr1.length - 1; i++) {
            console.log(arr1[i])
        }

        
        //通过for循环输出二:
        for( var i in arr1){
            console.log(arr1[i])
        }

    </script>
</body>

</html>

3、数组类型的判断

1、Array.isArray()判断是否为数组,如果是数组则返回true，不是则返回false。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>


        var arr = ["20210214306", "信管213", "王亚楠", "22"]

        //Array.isArray()判断是否为数组,如果是数组则返回true，不是则返回false。
        console.log(Array.isArray(arr))

        var num = 1
        console.log(Array.isArray(num))





    </script>
</body>
</html>

4、数组的方法

1、push向数组中添加元素

2、pop 删除数组尾部的元素

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //push向数组尾部中添加元素
        arr = ["20210214306", "信管213", "王亚楠", "22"]
        arr.push("经济与管理学院")

        for (var i in arr) {
            console.log(arr[i])
        }

        //pop 删除数组尾部的元素
        arr.pop()
        for (var i in arr) {
            console.log(arr[i])
        }

    </script>

</body>

</html>

3、shift() 删除第一个元素，并返回第一个元素

4、unshift()第一个位置添加元素

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        // shift() 删除第一个元素，并返回第一个元素
        var arr = ["20210214306", "信管213", "王亚楠", "22"]
        var result = arr.shift()
        //console.log(result)


        //unshift()向头部添加元素
        arr.unshift("你好")
        for(var i in arr){
            console.log(arr[i])
        }

    </script>
</body>

</html>

5、join()分割数组，转换为字符串，默认用","分割，也可以指定分割方法

6、split()将字符串转换为数组

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <script>

        // join()分割数组，转换为字符串，默认用","分割，也可以指定分割方法
        var arr = ["20210214306", "信管213", "王亚楠", "22"]
        console.log(arr.join())
        console.log(arr.join("|"))

        //类型为string
        var result = arr.join(" ")
        console.log(typeof(result))
        console.log(result)

        //将字符串转换为数组
        var result1 = result.split(" ")
        console.log(result1)

    </script>
</body>

</html>

7、concat()将两个数组合并为一个数组,不改变原数组

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        //concat()将两个数组合并为一个数组,不改变原数组
        var arr1 = ["20210214306", "信管213", "王亚楠", "22"]

        var arr2 = ["你好", "hello world"]

        console.log(arr1.concat(arr2))



    </script>
</body>

</html>

8、reverse() 颠倒数组

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //reverse() 颠倒数组,改变了原数组
        var arr1 = ["20210214306", "信管213", "王亚楠", "22"]

        console.log(arr1) // ["20210214306", "信管213", "王亚楠", "22"]

        console.log(arr1.reverse())  // ['22', '王亚楠', '信管213', '20210214306']

        console.log(arr1)  // ['22', '王亚楠', '信管213', '20210214306']
    </script>
</body>
</html>

9、indexOf() 返回元素在数组中第一次出现的位置，如果没有则返回-1

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //indexOf() 返回元素在数组中第一次出现的位置，如果没有则返回-1

        var arr1 = ["20210214306", "信管213", "王亚楠", "22"]

        console.log(arr1.indexOf('20210214306')) // 0

        console.log(arr1.indexOf('22')) // 3

    </script>
</body>

</html>

七、函数

1、函数的声明与调用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>


        //函数的声明
        function add() {
            console.log("你好")
        }

        function sum(x, y) {
            console.log(x + y)
        }
        //函数的调用
        add()

        sum(10, 20)


    </script>

</body>

</html>

2、对象的创建与调用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>


        //创建一个对象
        var usr = {
            name: "wangyanan",
            age: 22,
            phone: 17538887714,
        }

        //调用对象信息
        console.log(usr.name)
        console.log(usr)


    </script>

</body>

</html>

3、Math对象

1、获取最大值Math.max()

2、获取最小值Math.min()

3、取绝对值Math.abs()

4、向下取整Math.floor()

5、向上取整Math.ceil()

6、生成随机数Math.random()范围为：[0,1)

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        var num = -100

        //取绝对值
        console.log(Math.abs(num))

        //获取最大值
        console.log(Math.max(10, 30, 25, 90, 66, 88,))//90

        //获取最小值
        console.log(Math.min(10, 30, 25, 90, 66, 88,))//10

        //向下取整
        var num1 = 11.3
        console.log(Math.floor(num1))//11

        //向上取整
        console.log(Math.ceil(num1))//12

        //生成随机数范围为：[0,1)

        console.log((Math.random() * 9 + 1))

        //编写一个生成随机范围的随机整数
        function getRandomNum(max, min) {
            var result = Math.floor(Math.random() * (max - min) + min)
            console.log(result)
        }
        getRandomNum(10, 20)

    </script>
</body>

</html>

4、Date对象

1、以1970年1月1日00：00：00作为时间的零点，可以表示前后一亿天

​ 获取当前时间距离时间零点的毫秒数( Date.now() )

2、以 年 月 日 时 分 秒显示当前时间 Date(Date.now() new Date())

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        //以1970年1月1日00：00：00作为时间的零点，可以表示前后一亿天

        //获取当前时间距离时间零点的毫秒数
        console.log(Date.now())

        //以 年 月 日 时 分 秒显示当前时间
        console.log(Date(Date.now()))
        console.log(new Date())

    </script>

</body>

</html>

八、Document对象方法

1、通过标签名获取元素，获取元素的方式与数组类似，通过下标获取

​ 注：JavaScript使用内部嵌入时，必须写在HTML以下

2、通过inner.HTML修改元素内容

3、获取元素的几种方法

1、通过class获取元素

2、通过name获取元素

3、通过ID获取元素

4、document.querySelector()获取元素

​ 如果是ID就用 #id名 ；如果是class就用 .class名 ； 也可以是标签名

​ 如果有重复的只获取第一个

5、document.querySelectorAll()获取元素

​ 如果是ID就用 #id名 ；如果是class就用 .class名 ； 也可以是标签名

​ 获取全部元素

​ 通过下标选择调用的元素

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <div>hello1</div>
    <div>hello2</div>
    <div class="d3">hello3</div>
    <div name="d4">hello4</div>
    <div id="d5">hello4</div>
    <div class="nav">nav1</div>
    <div class="nav">nav2</div>

    <script>

        //通过标签名获取元素，获取元素的方式与数组类似，通过下标获取
        //注：JavaScript使用内部嵌入时，必须写在HTML以下
        var divs = document.getElementsByTagName("div")[1]
        console.log(divs)

        //通过inner.HTML修改元素内容
        divs.innerHTML = "Hello World!!!"

        //通过class获取元素
        var divs1 = document.getElementsByClassName("d3")[0]
        console.log(divs1)

        //通过name获取元素
        var divs2 = document.getElementsByName("d4")[0]
        console.log(divs2)

        //通过ID获取元素
        var divs3 = document.getElementById("d5")
        console.log(divs3)

        //document.querySelector()获取元素
        //如果是ID就用 #id名 ；如果是class就用 .class名 ； 也可以是标签名
        //如果有重复的只获取第一个
        var navs = document.querySelector(".nav")
        console.log(navs)


        //document.querySelectorAll()获取元素
        //如果是ID就用 #id名 ；如果是class就用 .class名 ； 也可以是标签名
        //获取全部元素
        //通过下标选择调用的元素
        var navs1 = document.querySelectorAll(".nav")[1]
        console.log(navs1)

    </script>



</body>

</html>

4、document对象创建页面元素

1、document.createElement() 创建标签

2、document.createTextNode() 创建文本信息

3、将文本信息添加到标签中

4、document.createAttribute(“id”) 创建ID

5、id.value 添加ID名

6、setAttributeNode()将id赋给标签

7、将用document创建的标签添加到body里面

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <div class="cent"></div>

    <script>

        //document.createElement() 创建标签
        var text = document.createElement("p")
        console.log(text)
        var text1 = document.createElement("div")
        console.log(text1)

        //document.createTextNode() 创建文本信息
        var text2 = document.createTextNode("我是文本")

        //将文本信息添加到标签中
        text1.appendChild(text2)

        //document.createAttribute("id") 创建ID
        var id = document.createAttribute("id")

        //id.value 添加ID名
        id.value = "root"
        console.log(id)

        //setAttributeNode()将id赋给标签
        text1.setAttributeNode(id)

        //将用document创建的标签添加到body里面

        var www = document.getElementsByClassName("cent")[0]
        www.appendChild(text1)





    </script>

</body>

</html>

5、document修改标签信息

1、获取类名,并修改类名

2、获取id,并修改id

3、添加类名d1.classList.add()

4、删除类名d1.classList.remove()

5、判断有没有某个类名d1.classList.contains()

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="c1" id="i1">hello</div>

    <script>
        var d1 = document.getElementsByClassName("c1")[0]
        console.log(d1)

        //获取类名,并修改类名
        console.log(d1.className)
        d1.className = "c2"
        console.log(d1.className)

        //获取id,并修改id
        console.log(d1.id)
        d1.id = "i2"
        console.log(d1.id)

        //添加类名d1.classList.add()
        d1.classList.add("c3")
        d1.classList.add("c4")

        //删除类名d1.classList.remove()
        d1.classList.remove("c4")

        //判断有没有某个类名d1.classList.contains()
        if (d1.classList.contains("c3")) {
            console.log("有")
        } else {
            console.log("没有")
        }


    </script>

</body>

</html>

九、document获取元素位置

1、box.clientWidth获取元素的宽度，包含padding，不包含margin和border

2、获取页面高度和宽度

3、获取滚动高度

4、获取元素垂直高度，包含padding和border

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 5px solid black;
            margin: 20px;
            padding: 10px;
            background-color: skyblue;
        }

        h1 {
            height: 500px;
        }
    </style>
</head>

<body>

    <div class="box" id="box"></div>
    <h1>标题1</h1>
    <h1>标题2</h1>
    <h1>标题3</h1>
    <h1>标题4</h1>
    <h1>标题5</h1>

    <script>

        //box.clientWidth获取元素的宽度，包含padding，不包含margin和border
        var box = document.getElementById("box")
        var result1 = box.clientWidth
        console.log(result1)

        //获取页面高度和宽度
        var result2 = document.documentElement.clientHeight
        var result3 = document.documentElement.clientWidth
        console.log(result2)
        console.log(result3)

        //获取滚动高度
        var result4 = document.documentElement.scrollTop
        console.log(result4)

        //获取元素垂直高度，包含padding和border
        var result5 = box.offsetHeight
        console.log(result5)

    </script>
</body>

</html>

十、CSS操作

1、css样式的设置

1、方式一：box1.setAttribute

2、方式二： box2.style

3、方式三： box3.style.cssText

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="box1" id="box1"></div>
    <div class="box2" id="box2"></div>
    <div class="box3" id="box3"></div>


    <script>


        //设置元素的CSS样式
        //方式一：box1.setAttribute
        var box1 = document.getElementById("box1")
        box1.setAttribute("style", "width:200px;height:200px;background:red")

        //方式二： box2.style
        var box2 = document.getElementById("box2")
        box2.style.width = "300px"
        box2.style.height = "300px"
        box2.style.background = "green"

        //方式三： box3.style.cssText
        var box3 = document.getElementById("box3")
        box3.style.cssText = "width:200px;height:200px;background:skyblue"




    </script>
</body>

</html>

十一、事件处理程序

1、HTML事件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="clickHandle()">按钮</button>

    <script>

        //必须用驼峰命名法
        function clickHandle() {
            console.log("点击了按钮");
        }
    </script>

</body>

</html>

2、DOM 0 事件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">按钮</button>

    <script>

        btn.onclick = function () {
            console.log("点击了按钮")
        }
    </script>

</body>

</html>

3、DOM2事件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button id="btn">按钮</button>

    <script>
        var btn = document.getElementById("btn")
        btn.addEventListener("click", function () {
            console.log("点击了")
        })
    </script>

</body>

</html>

4、鼠标事件

1、onclick 单击事件

2、ondblclick 双击事件

3、onmousedown 鼠标按下

4、onmouseup 鼠标抬起

5、onmousemove 鼠标移动

6、onmouseenter 鼠标进入

​ onmouseover 鼠标进入一个节点时触发，进入子节点时再次触发

7、onmouseleave 鼠标离开

onmouseout 鼠标离开一个节点时触发，离开子节点时再次触发

8、onwheel 滚轮滚动

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: green;
        }

        #box2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        #box3 {
            width: 100px;
            height: 100px;
            background-color: orange;
        }

        #box4 {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>


<body>


    <button id="btn1">单击</button>
    <button id="btn2">双击</button>
    <button id="btn3">鼠标按下</button>
    <button id="btn4">鼠标抬起</button>


    <div id="box1">鼠标移动</div>
    <div id="box2">鼠标进入</div>
    <div id="box3">鼠标离开</div>
    <div id="box4">滚轮滚动</div>




    <script>

        //onclick 单击事件
        var btn1 = document.getElementById("btn1")
        btn1.onclick = function () {
            console.log("单击了")
        }

        //ondblclick 双击事件
        var btn2 = document.getElementById("btn2")
        btn2.ondblclick = function () {
            console.log("双击了")
        }

        //onmousedown 鼠标按下
        var btn3 = document.getElementById("btn3")
        btn3.onmousedown = function () {
            console.log("鼠标按下")
        }

        //onmouseup 鼠标抬起
        var btn4 = document.getElementById("btn4")
        btn4.onmouseup = function () {
            console.log("鼠标抬起")
        }

        //onmousemove 鼠标移动
        var box1 = document.getElementById("box1")
        box1.onmousemove = function () {
            console.log("鼠标移动了")
        }

        //onmouseenter 鼠标进入
        var box2 = document.getElementById("box2")
        box2.onmouseenter = function () {
            console.log("鼠标进入")
        }

        //onmouseleave 鼠标进入
        var box3 = document.getElementById("box3")
        box3.onmouseleave = function () {
            console.log("鼠标离开")
        }

        //onwheel 滚轮滚动
        var box4 = document.getElementById("box4")
        box4.onwheel = function () {
            console.log("滚轮滚动了")
        }


    </script>
</body>

</html>

5、键盘事件

1、onkeydown 按下有值按键时触发

2、onkeyup 抬起按键时触发

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="usrname">

    <script>

        //onkeydown 按下按键时触发

        var usrname = document.getElementById("usrname")
        usrname.onkeydown = function (e) {
            console.log(e.target.value)
        }


        //onkeyup 抬起按键时触发
        /*
        var usrname = document.getElementById("usrname")
        usrname.onkeyup = function(e){
            console.log(e.target.value)
        }
        */


    </script>
</body>

</html>
襾暔
关注
  • 16
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值