JavaScript基础语法6

函数

函数是一段可以反复调用的代码块

函数的声明
- function命令：function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //这里的 add 是自拟的，叫什么都可以；{}里面是函数体
        function add(){
           console.log("结果");
        }
        add();//结果   这个代表调用函数，只有写这个才是被执行，而且这个可以反复调用很多次
        add();//结果
        add();//结果
        add();//结果
        add();//结果

        function add1(){
            var x = 10;
            var y = 20;
            console.log(x + y);
        }
        add1();//30
        
    </script>
</body>
</html>

函数名的提升
- JavaScript引擎将函数名视同变量名，所以采用function命令声明函数时，整个函数会像变量声明一样，被提升到代码头部。即调换上下位置同样可以进行使用。

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        add();//30
        add();//30
        add();//30
        add();//30
        add();//30
        function add(){
            var x = 10;
            var y = 20;
            console.log(x + y);
        }
    </script>
</body>
</html>

函数参数
- 函数运行时，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫作参数。

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function add(x,y){
            console.log(x + y);
        }
        add(10,20);//30
        add(100,200);//300
        add(5,6);//11
        add(10,5);//15
    </script>
</body>
</html>

函数返回值
- JavaScript函数提供两个接口实现与外界的交互，接受外界信息；返回值作为出口，把运算结果反馈给外界

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function add(x,y){
            console.log(111);
            return x + y
        }
        var result = add(10,20);
        console.log(result);/// 111  30
    </script>
</body>
</html>

温馨提示：return后面不能再添加任何代码(这里指的是函数体里面的后面)，因为不会执行，但是放在return上面是可以执行的。

例子：

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        function getName(name){
            return name;//填空的地方
        }
        var myName = getName("hi")
        console.log(myName);//hi
    </script>
</body>
</html>

对象概述

对象(object)是JS语言的核心概念，也是最重要的数据类型，简单说，对象就是一组"键值对"的集合，是一种无序的复合数据集合

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //创建一个对象user
        var  user = {
            name:"hi",
            age:13
        }
    </script>
</body>
</html>

对象的每一个键名又被称为"属性"，它的"键值"可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为"方法"，它可以像函数那样调用

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //创建一个对象user
        var  user = {
            name:"hi",
            age:13,
            jobs:["hello","hi"],
            flag:true,
            getName:function(){
                console.log("world");
                
            }

        }

        //对象的读取方式：通过对象名.属性
        console.log(user.name);//hi
        console.log(user.age);//13
        console.log(user.jobs);//['hello', 'hi']
        console.log(user.flag);//true

        //如果想要拿到user.jons中每个数据，可以写：
        for(var i = 0;i<user.jobs.length;i++){
            console.log(user.jobs[i]);
            
        }//hello  hi

        //调用函数：
        user.getName();//world
    </script>
</body>
</html>

如果属性的值还是一个对象，就形成了链式引用。

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var  user = {
            name:"hi",
            age:13,
            jobs:["hello","hi"],
            flag:true,
            getName:function(){
                console.log("world")
            },
            container:{
                fontEnd:"WEB前端",
                backEnd:["python","java"]
            }//链式调用
        }
        //链式调用
        console.log(user.container.fontEnd);//WEB前端
        console.log(user.container.backEnd);//['python', 'java']
        
    </script>
</body>
</html>

Math对象

Math是JS的原生对象，提供了各种数学功能
Math.abs()
- Math.abs方法返回参数值的绝对值

php 复制代码

<!DOCTYPE html>
<html lang="en">
<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(num);//-100
        console.log(Math.abs(num));//100
    </script>
</body>
</html>

Math.max(),Math.min()
- Math.max方法返回参数之中最大的那个值，Math.min返回最小的那个值。如果参数为空，Math.min返回Infinity,Math.max返回-Infinity。

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(Math.max(10,30,56,34));//56
        console.log(Math.min(10,30,56,34));//10
        console.log(Math.max());//-Infinity
        console.log(Math.min());//Infinity
    </script>
</body>
</html>

Math.floor(),Math.ceil()
- Math.floor方法返回小于参数值的最大整数(向下取整)
- Math.ceil方法返回大于参数值的最小整数(向上取整)

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //类似10.3和10.9 都是向下取整就是10；向上取整就是11
        var num1 = 10.3;
        console.log(Math.floor(num1));//10
        console.log(Math.ceil(num1));//11

        var num1 = 10.9;
        console.log(Math.floor(num1));//10
        console.log(Math.ceil(num1));//11

        var num1 = 10.0;
        console.log(Math.floor(num1));//10
        console.log(Math.ceil(num1));//10
        
    </script>
</body>
</html>

Math.random()
- Math.random返回0到1之间的一个伪随机数，可能等于0，但是一定小于1

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //Math.random() >= 0(有可能等于0) 但是Math.random() < 1（但绝对小于1）
        console.log(Math.random());
    </script>
</body>
</html>

Math.random()[多看]
- 任意范围的随机数生成函数如下：

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //比如最小值为10，最大值为20，取这里面的随机数
        function getRandomArbitrary(min,max){
            //最大值 - 最小值 * 随机数 = 0 ~ 最大最小值差额之间的随机数 + 最小值 = 10 ~ 20
            var result = Math.random() * (max-min) + min
            console.log(result);
        }
        getRandomArbitrary(10,20)

        function getRandomArbitrary(min,max){
            var result = Math.random() * (max-min) + min
            //向上或向下取整
            result = Math.floor(result)
            //result = Math.ceil(result)
            console.log(result);
        }
        getRandomArbitrary(10,20)
    </script>
</body>
</html>

Date对象

Date对象是JS原生的时间库。它以1970年1月1日00:00:00作为时间的零点，可以表示的时间范围是前后各1亿天(单位为毫秒)
Date.now()
- Date.now方法返回当前时间距离时间零点(1970年1月1日00:00:00 UTC)的毫秒数，相当于Unix时间戳乘以1000

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(Date.now());
    </script>
</body>
</html>

时间戳
- 时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数。
- 格林威治和北京时间就是时区的不同
- Unix是20世纪70年代初出现的一个操作系统，Unix认为1970年1月1日0点是时间纪元。JS也就遵循了这一约束。
Date对象提供了一系列get*方法，用来获取示例对象某个方面的值。

实例方法get类

getTime():返回实例距离1970年1月1日00:00:00的毫秒数

getDate():返回实例对象对应每个月的几号(从1开始)

getDay():返回星期几，星期日为0，星期一为1，以此类推

getYear():返回距离1900的年数

getFullYear():返回四位的年份

getMonth():返回月份(0表示1月，11表示12月)

getHours():返回小时(0-23)

getMilliseconds():返回毫秒(0-999)

getMinutes():返回分钟(0-59)

getSeconds():返回秒(0-59)

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(Date.now());

        //1778409838625
        console.log(Date(1778409838625));//Sun May 10 2026 18:46:11 GMT+0800 (中国标准时间)

        
        console.log(new Date(1778409838625).getDate());//10  对应几号
        console.log(new Date(1778409838625).getDay());//0  对应星期几
        console.log(new Date(1778409838625).getFullYear());//2026  对应年份
        //注意： 月份从0~11 0：1月；11：12月
        console.log(new Date(1778409838625).getMonth() + 1);//5  对应月份

        //如果要表示成类似于这样的形式：2030-1-1 19:26
        var year = new Date(1778409838625).getFullYear()
        var month = new Date(1778409838625).getMonth() +1
        var day = new Date(1778409838625).getDate()
        console.log(year + "-" + month + "-" + day);//2026-5-10
        
    </script>
</body>
</html>

编写函数获得本年度剩余天数

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //这里的年月日指的是阳历
        function leftday(){
            var today = new Date();
            var endYear = new Date(today.getFullYear(),11,31,23,59,59,999);//这里的数字分别代表月、日、时、分、秒、毫秒
            var msPerDay = 24 * 60 * 60 * 1000;
            var result = (endYear.getTime() - today.getTime()) / msPerDay
            console.log(Math.floor(result));
        }
        leftday()
    </script>
</body>
</html>

DOM概述

DOM是JS操作网页接口，全称为"文档对象模型"。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作(比如元素增删内容)
浏览器会根据DOM模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构，都有规范的对外接口。
DOM只是一个接口规范，可以用各种语言实现。所以严格来说，DOM不是JS语法的一部分，但是DOM操作是JS最常见的任务，离开DOM，JS就无法控制网页。另一方面，JS也是最常用于DOM操作语言。

节点

DOM的最小组成单位叫作节点。文档的树形结构(DOM树)，就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
- 节点的类型有七种
Document:整个文档的顶层节点

DocumentType：doctype标签

Element：网页的各种HTML标签

Attribute：网页元素的属性(比如class="right")

Text：标签之间或标签包含的文本

Comment：注释

DocumentFragment：文档的片段

节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树。
- 浏览器原生提供document节点，代表整个文档

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(document);//#document  顶层文档
    </script>
</body>
</html>

除了根节点，其他节点都有三种层次关系

父节点关系(parentNode)：直接的那个上级节点

子节点关系(childNodes)：直接的下级节点

同级节点关系(sibling)：拥有同一个父节点的节点

Node.nodeType属性

不同节点的nodeType属性值和对应的常量如下：

文档节点(document)：9，对应常量Node.DOCUMENT_NODE

元素节点(element)：1，对应常量Node.element_node

属性节点(attr)：2，对应常量Node.ATTRIBUTE_NODE

文本节点(text)：3，对应常量Node.TEXT_NODE

文档片段节点(DocumentFragment)：11，对应常量Node.DOCUMENT_FRAGMENT_NODE

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //这个只需要了解就行
        if(document.nodeType === 9){
            console.log("顶层节点");
        }
    </script>
</body>
</html>

document对象-方法/获取元素

document.getElementsByTagName()[常用]

这种方法搜索HTML标签名，返回符合条件的元素。它的返回值是一个类似数组对象(HTMLCollection实例，即集合的意思)，可以实时反映HTNL文档的变化。如果没有任何匹配的元素，就返回一个空集。
如果传入*，就可以返回文档中所有HTML元素

php 复制代码

<!DOCTYPE html>
<html lang="en">
<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>
    <script>
        //常用
        //通过JS来获取Hello这个文本
        var divs = document.getElementsByTagName("div")
        console.log(divs);//HTMLCollection(2) [div, div]  HTMLCollection是集合的意思，返回一个类似于数组的效果

        var div1 = document.getElementsByTagName("div")[0]//这里的0表示读取第一个元素hello1
        console.log(div1);//<div>hello1</div>  
        var div2 = document.getElementsByTagName("div")[1]//这里的1表示读取第二个元素hello2
        console.log(div2);//<div>hello2</div>  

        var div1 = document.getElementsByTagName("div")[0]
        div1.innerHTML = "Hello World"//<div>Hello World</div>   界面变化由原来的hello1变成Hello World

        var allElements = document.getElementsByTagName('*');
    </script>
</body>
</html>

document.getElementsByClassName()[常用]

这种方法返回一个类似数组的对象(HTMLCollection实例)，包括了所有class名字符合指定条件的元素，元素的变化实时反应在反应结果中。(这种方法用法类似于上面document.getElementsByTagName()的用法)
由于class是保留字，所以JS一律使用className表示CSS的class
- 参数可以是多个class，它们之间使用空格分隔。

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="text">Hello</p>
    <script>
        //常用
        var text = document.getElementsByClassName("text");
        console.log(text);//HTMLCollection [p.text]  控制台输出

        var text = document.getElementsByClassName("text")[0];
        console.log(text);//<p class="text">Hello</p>   控制台输出

        var text = document.getElementsByClassName("text")[0];
        text.innerHTML = "Hello!"//Hello!  界面输出，由原来的Hello变为Hello!

        varelements= document.getElementsByClassName('foo bar')

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

document.getElementsByName()[不常用]

这种方法用于选择拥有name属性的HTML元素(比如<form>、<radio>、<img>)等，返回一个类似于数组的对象(NodeList实例)，因为name属性相同的元素可能不止一个

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form name="login"></form>
    <script>
        //这种使用率极低
        var name = document.getElementsByName("login")
        console.log(name);//[object NodeList]
    </script>
</body>
</html>

document.getElementById()[最常用]

这种方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">哈哈哈</div>
    
    <script>
        var root = document.getElementById("root")//这里后面不用加任何东西，因为<div></div>中 id 只读取一个
        console.log(root);//桌面返回 哈哈哈  控制台返回 <div id="root">哈哈哈</div>

        root.innerHTML = "hhh"//桌面返回 hhh
    </script>
</body>
</html>

document.querySelector()[常用]

这种方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。即与document.getElementById()类似，如果有同样的元素，只返回第一个，只能获取一个

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">nav1</div>
    <div class="nav">nav2</div>
    <script>
        var nav = document.querySelector(".nav")//这里的 nav 需要注意：这里接受的不再是单纯的一个名字，而是选择器，有要求，即如果是ID选择器就加 '#'；如果是class选择器(类选择器)就加'.'  
        console.log(nav);//<div class="nav">nav1</div>
    </script>
</body>
</html>

document.querySelectorAll()[常用]

这种方法与document.querySelector()用法类似，区别是返回一个NodeList对象，包含所有匹配给定选择器的节点。

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">nav1</div>
    <div class="nav">nav2</div>
    <script>
        var navs = document.querySelectorAll(".nav")
        console.log(navs);//NodeList(2) [div.nav, div.nav]   这里的NodeList(2)也是集合的意思
    </script>
</body>
</html>

document对象-方法/创建元素

document.createElement()

这种方法用来生成元素节点，并返回该节点

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">导航</div>
    <script>
        var text = document.createElement("p")
        console.log(text);//<p></p>  创建出了一个p标签
    </script>
</body>
</html>

document.createTextNode()

这种方法用来生成文本节点(Text实例)，并返回该节点。它的参数是文本节点的内容
appendChild会将内容或者子元素放到容器中

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">导航</div>
    <script>
        var text = document.createElement("p")
        var content = document.createTextNode("我是文本")
        //appendChild:将内容或者子元素放到容器中
        text.appendChild(content)
        console.log(text);//<p>我是文本</p>
    </script>
</body>
</html>

document.createAttribute()

这种方法生成一个新的属性节点(Attr实例)，并返回它

php 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">导航</div>
    
    <div id="container"></div>
    <script>
        var text = document.createElement("p");
        var content = document.createTextNode("我是文本")
        var id = document.createAttribute("id")
        //给id赋值
        id.value = "root";
        //将属性塞到<p></p>里  注意：只有属性的添加用这个，剩下的所有标签之间的关系，包含文本之间的关系都是用'appendChild'来放入
        text.setAttributeNode(id);
        text.appendChild(content)
        //将控制台的内容放在显示页面,先获取到上面第二个<div></div>标签
        //首先打印的是父元素
        var container = document.getElementById("container");
        //再把子元素放进去
        container.appendChild(text)
        console.log(text);
    </script>
</body>
</html>