4.24js学习笔记

最新推荐文章于 2024-09-26 17:12:37 发布

qmandes

最新推荐文章于 2024-09-26 17:12:37 发布

阅读量78

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/qmandes/article/details/124375295

版权

数组常用方法与函数

join()

将数组元素以指定分隔符拼接成字符串；

concat()

将多个数组拼接到一起，返回拼接后的数组；

sort()

将数组元素排序，返回排序后的数组；按字符次序比较，不是按数值次序

push()，pop()

从数组尾部添加/删除元素

unshift()，shift()

从数组头部添加/删除元素

splice(位置，个数，新元素)

从指定位置删除指定个数的元素，并插入新元素

indexof(元素)

查找元素，返回元素的下标

其余待补充

函数与事件

函数的定义

function 函数名(参数){
    功能代码块;
    返回值;
}

函数的好处：实现代码复用，方便后期维护

函数的定义方式

1，无参无返回值

2，有参无返回值

3，无参有返回值

4，有参有返回值

<script>
        function sayHello1(){
            document.write("无参无返回值<br/>");
            document.write("你好<br/>");
        }
        sayHello1();
        function sayHello2(name){
            document.write("有参无返回值<br/>");
            document.write(name+"你好<br/>");
        }
        sayHello2("张三");
        function randomNum(){
            document.write("无参有返回值<br/>");
            var num = Math.floor(Math.random()*(100-1)+1);
            return num;
        }
        document.write(randomNum()+"<br/>")
        function sum(start, end){
            document.write("有参有返回值<br/>");
            var s = 0;
            for(var i = start; i <= end; i++){
                s += i;
            }
            return s;
        }
        document.write(sum(1,100));
</script>

运行结果

匿名函数

没有函数名字，一般与元素的事件进行绑定

页面元素的事件与函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function test1(){
            var mydiv = document.getElementById("con");
            mydiv.style.backgroundColor = "red";
            mydiv.style.color = "yellow";
            mydiv.style.width = "700px";
            mydiv.style.height = "500px";
            mydiv.style.fontSize = "80px"
            mydiv.style.lineHeight = "500px"
        }
        function test2(){
            var mydiv = document.getElementById("con");
            mydiv.style.backgroundColor = "yellow";
            mydiv.style.color = "black"
            mydiv.style.width = "500px";
            mydiv.style.height = "300px";
            mydiv.style.fontSize = "40px"
            mydiv.style.lineHeight = "300px"
            mydiv.innerHTML = "div"
        }
        function test3(){
            var mydiv = document.getElementById("con")
            mydiv.innerHTML = "单击了div"
           
            
        }
        function test4(){
            var mydiv = document.getElementById("con")
            mydiv.innerHTML = "双击了div"
        }
    </script>
    <style>
        div{
            width: 500px; 
            height: 300px; 
            margin: 0 auto; 
            background:yellow; 
            text-align: center; 
            line-height: 300px;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div id="con" onmouseover="test1()" onmouseleave="test2()" onclick="test3()" ondblclick="test4()">div元素</div>
</body>
</html>