JavaScript入门

已于 2025-05-13 09:34:17 修改
阅读量656 收藏 9
点赞数 29
分类专栏： 前端 文章标签： javascript 开发语言 前端
于 2025-05-12 14:20:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69135897/article/details/147795863
版权

一、JavaScript的定义

JavaScript 是一种轻量级的、解释型的编程语言，广泛应用于网页前端开发中。它可以与 HTML 和 CSS 协作，动态地修改网页内容、响应用户操作并与服务器通信。

二、JavaScript的组成

  • ECMAScript：ECMA（欧洲计算机协会）制定了JS的基本语法
  • BOM(没有标准)：浏览器对象模型，主要实现对浏览器窗口的一些操作
  • DOM（重点）：文档对象模型，主要实现对HTML文档的增、删、改、查

三、JavaScript的引入HTML的方式

引入方式代码备注
行内式<p  οnclick="alert('Hello, World!')">
内部式<script> 与 </script>
外链式<script src="script路径"></script>重点

四、JavaScript的基本语法

1.注释

注释注释代码
单行注释// 注释内容
多行注释/* 注释内容 */

2.输入/输出

  • 获取用户输入：prompt() ——一般不用   
  • 弹出提示窗：alert()
  • 输出到控制台：console.log()
  • 输出到页面上：document.write()

3.数据类型和变量声明

  • 原始数据类型
    • string：字符串
    • number：数字类型
    • boolean：布尔类型
    • null：表示对象引用为空
    • undifined：未定义类型
  • 引用数据类型：如Object、Array等
  • 类型检测：typeof
  • 变量声明：JavaScript是弱类型语言，不重视数据类型的定义，但是js会根据为变量赋值情况自定判断该变量是什么类型
    • var——（默认不写为var） ：定义的变量一定是全局变量
    • let：如果定义在局部代码块则是局部变量
    • const：定义常量，因此一定要初始化，同时也有块级作用域的使用范围。

  • 尽量使用const来声明变量，这可以让代码更安全，避免无意中修改变量值导致的错误。

  • 在不需要常量的情况下，使用let来声明变量，以利用其块级作用域的特性。

  • 避免使用var，因为它可能会导致意外的全局变量声明或其他作用域问题。

  • 运算符
运算类型运算符
算数运算符+ - * / % ++ --
赋值运算符= += -= *= /= %=
比较运算符== === != !== > < >= <=
逻辑运算符&& || !
三元运算符条件？表达式1：表达式2

五、流程控制

1.if语句

//分支语句
if(boolean类型){
    //代码块；
}else if(boolean类型){
    //代码块；
}else{
    //代码块；
}

2.for语句

//普通for循环语句
for(var i = 0;i<3;i++){
    //执行代码块
}
//for···of循环——输出结果1 6 9
let arr = [1,6,9];
for(let s of arr){
	console.log(s);
}
//for···in循环——输出结果0 1 2
for(let index in arr){
	console.log(index);
}

3.while语句

while(条件表达式){
    //循环代码块
}

六、数组

1.定义

JavaScript 中的数组对象用于在单个变量名下存储多个元素。数组可以包含不同的数据类型，并且可以动态调整大小。数组的索引从 0 开始。

2.初始化

//静态初始化1
var array = [1,2,3];
//静态初始化2
var arr2 = new Array(1,2,3);
//动态初始化
var arr1 = new Array(5);

3.方法

方法代码备注
压入元素到尾部push()
弹出尾部的一个元素，返回值为数组最后一个元素pop()
压入元素到头部unshift()
弹出头部的元素，返回值为数组第一个元素shift()
可添加，可删除splice()常用

七、函数

1.定义函数的方式

  • 函数声明
function 函数名(参数) {
  // 函数体
}
  • 函数表达式
const functionName = function(参数) {
  // 函数体
};
  • 箭头函数
const functionName = (参数) => {
  // 函数体
};

八.DOM文档对象模型

1.定义

DOM 是 Document Object Model（文档对象模型），是W3C组织推荐的处理HTML文档的标准编程接口， 通过这些接口可以改变网页的内容、结构和样式，实现对页面中元素的增、删、改、查操作； 由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。

2.DOM树的概念

  • 文档：一个页面就是一个文档，DOM中使用document表示
  • 节点：网页中所有的内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。而node至少有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性
  • 元素：页面中所有标签都是元素，DOM中使用element表示

3.DOM操作

3.1获取节点——重点

  • 通过id获取：getElementById()——返回值是元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script>
        window.onload = function(){
            let id = document.getElementById("get-id");
            console.log()
        }
    </script>
</head>
<body>
    <div id="get-id"></div>
</body>
</html>

效果如下：

  • 通过标签名获取：getElementByTagName()——返回值是集合
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script>
        window.onload = function(){
            let div = document.getElementsByTagName("div");
            console.log(div);
            // 可使用普通for循环遍历div
            for (var i = 0; i < div.length; i++) {
                console.log(div[i]);
            }
            // 可使用for of循环遍历div
            for(d of div){
                console.log(d)
            }
        }
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

效果图如下：

  • 通过Class名获取：getElementByClassName()——返回值是集合
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script>
        window.onload = function(){
            let div = document.getElementsByClassName("div-class");
            console.log(div);
            // 可使用普通for循环遍历div
            for (var i = 0; i < div.length; i++) {
                console.log(div[i]);
            }
            // 可使用for of循环遍历div
            for(d of div){
                console.log(d)
            }
        }
    </script>
</head>
<body>
    <div class="div-class">1</div>
    <div class="div-class">2</div>
    <div class="div-class">3</div>
    <div class="div-class">4</div>
</body>
</html>

效果图如下：

  • 通过name属性获取：getElementByName()——返回值是节点列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script>
        window.onload = function(){
            let div = document.getElementsByName("div-class");
            console.log(div);
            // 可使用普通for循环遍历div
            for (var i = 0; i < div.length; i++) {
                console.log(div[i]);
            }
            // 可使用for of循环遍历div
            for(d of div){
                console.log(d)
            }
        }
    </script>
</head>
<body>
    <div name="div-class">1</div>
    <div name="div-class">2</div>
    <div name="div-class">3</div>
    <div name="div-class">4</div>
</body>
</html>

效果图如下：

  • 返回满足条件的第一个元素：querySelector()——返回值是元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script>
        window.onload = function(){
            let id = document.querySelector("#div-id");
            console.log(id);
            let classes = document.querySelector(".div-class");
            console.log(classes);
            let div = document.querySelector("div");
            console.log(div)
        }
    </script>
</head>
<body>
    <div class="div-class">1</div>
    <div class="div-class">2</div>
    <div id="div-id">3</div>
    <div name="div-name">4</div>
    <div name="div-name">5</div>
</body>
</html>

效果图如下：

  • 返回满足条件的所有元素：querySelectorAll()——返回值是节点集合
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script>
        window.onload = function(){
            let id = document.querySelectorAll("#div-id");
            console.log(id);
            for(i of id ){
                console.log(i);
            }
            let classes = document.querySelectorAll(".div-class");
            console.log(classes);
            for(c of classes ){
                console.log(c);
            }
            let div = document.querySelectorAll("div");
            console.log(div)
            for(d of div ){
                console.log(d);
            }
        }
    </script>
</head>
<body>
    <div class="div-class">1</div>
    <div class="div-class">2</div>
    <div id="div-id">3</div>
    <div name="div-name">4</div>
    <div name="div-name">5</div>
</body>
</html>

效果图如下：

  • 获取父元素：parentElement——返回值是元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script>
        window.onload = function(){
            let child = document.querySelectorAll(".child");
            console.log(child[0].parentElement);
        }
    </script>
</head>
<body>
    <div id="father">
        <div class="child"></div>
    </div>
</body>
</html>

效果图如下：

  • 获取所有子元素节点：children——返回值是集合
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script>
        window.onload = function(){
            let father = document.querySelector("#father");
            console.log(father.children);
        }
    </script>
</head>
<body>
    <div id="father">
        <div class="child"></div>
    </div>
</body>
</html>

效果图如下：

  • 获取第一个子元素节点：firstElementChild；获取最后一个子元素节点：lastElementChild
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script>
        window.onload = function(){
            let father = document.querySelector("#father");
            console.log(father.firstElementChild);
            console.log(father.lastElementChild);
        }
    </script>
</head>
<body>
    <div id="father">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
</body>
</html>

效果图如下：

  • 返回指定元素的前一个兄弟元素：previousElementSibling；返回指定元素之后的下一个兄弟元素：nextElementSibling
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script>
        window.onload = function(){
            let child = document.getElementsByClassName("child");
            let childTwo = child[1];
            console.log(childTwo.previousElementSibling);
            console.log(childTwo.nextElementSibling);
        }
    </script>
</head>
<body>
    <div id="father">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
</body>
</html>

效果图如下：

3.2修改DOM节点——重点

  • 修改标签中的内容
    • innerHTML——识别html标签和文本
    • innerText——识别文本
  • 修改CSS
    • 行内样式修改：节点.style.样式名 = 值
    • 添加新的样式，并保留原有样式：元素节点.classList.add("className")
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <style>
        .red{
            color: red;
        }
        .yellow{
            color: yellow;
        }
    </style>
    <script>
        window.onload = function(){
            let child = document.getElementsByClassName("child");
            let childTwo = child[1];
            childTwo.classList.add("yellow");
        }
    </script>
</head>
<body>
    <div id="father">
        <div class="child">1</div>
        <div class="child red">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
</body>
</html>

    • 修改元素的class属性：元素节点.className = 'className'
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <style>
        .red{
            color: red;
        }
    </style>
    <script>
        window.onload = function(){
            let child = document.getElementsByClassName("child");
            let childTwo = child[1];
            childTwo.className = "red";
        }
    </script>
</head>
<body>
    <div id="father">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
</body>
</html>
    • 修改元素自有属性:元素节点.属性名=新值
    • 自定义或原有属性操作:
      • 为元素新增自定义属性：setAttribute(‘属性名’，‘值’)
      • 获取自定义属性的值：getAttribute(‘属性名’)
      • 从元素上移除自定义属性：removeAttribute(‘属性名’)

    3.3插入DOM节点

    • 先创建新节点——实际上就是在创建一个新的DOM树：document.createElement(标签名)
    • 插入节点——将DOM树结合
      • 在某个节点下添加子节点：父节点.appendChild(子节点)
      • 将指定节点前插入指定节点前：父节点.insertBefore(新节点, 被指定节点);

    3.4删除DOM节点

    • 通过父节点删除该父节点下的指定子节点：父节点.removeChild(子节点);
    • 直接删除子节点：要删除的节点.remove();

    九.监听事件

    1.事件的三要素

    • 事件源——（谁）
    • 事件类型——（因何触发）
    • 事件处理程序——（事件发生后要做什么）

    2.常见的监听事件

    • blur：失去焦点

    • focus：获取焦点

    • input：用于监听input、textarea、select等元素中内容的变化、立即触发

    • change：用于监听input、textarea、select等元素中内容的变化、失去焦点后触发

    • click：点击事件

    • dblclick：双击事件

    3.监听事件的注册方式

    • 在HTML中添加事件
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <style>
        .red {
            color: red;
        }

        .yellow {
            color: yellow;
        }
    </style>
    <script>
        let btn = document.getElementById("btn");
        function cilcked() {
            console.log(1);
        }

    </script>
</head>

<body>
    <button id="btn" onclick="cilcked()">点击</button>
</body>

</html>
    • DOM元素中的监听事件
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script>
        window.onload = function () {
            let btn = document.getElementById("btn");
            btn.onclick = function () {
                console.log(1);
            };
        }
    </script>
</head>

<body>
    <button id="btn">点击</button>
</body>

</html>
    • 使用addEventListener()方法——重点，一般使用这个
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <script>
        window.onload = function () {
            let btn = document.getElementById("btn");
            btn.addEventListener("click", function () {
                console.log(1);
            })
        }
    </script>
</head>

<body>
    <button id="btn">点击</button>
</body>

</html>

    十、JSON的用法

    • 对象转换成字符串：JSON.parse(对象);
    • 字符串转化为对象：JSON.stringify(字符串);

    十一、localStorage和sessionStorage

    • localStorage和sessionStorage的作用及区别

    作用：是 HTML5 提供的 Web Storage API，用于在浏览器端存储键值对数据。

    区别：

    localStoragesessionStorage
    数据持久性永久存储，除非手动清除仅在当前会话有效
    关闭浏览器后数据仍然保留数据被清除
    跨标签页共享同源的所有标签页共享仅限当前标签页
    存储方式存储字符串存储字符串

    十二 、BOM浏览器对象模型

    1.定义

    浏览器对象模型BOM（Browser Object Model），把“浏览器”当做一个“对象”来看待。

    • BOM的顶级对象是window
    • BOM学习的是浏览器窗口交互的一些对象
    • BOM没的标准，它是浏览器厂商在各自浏览器上定义的，兼容性较差

    2.常用的对象

    2.1window对象

    • 定义：浏览器的顶级对象，它是JS访问浏览器对象的一个接口，它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法， 我们在调用时可以省略window。
    • 常用的window对象：
      • 定时器
        • setInterval()——周期性定时器；clearnInterval()——清除定时器 
          setTimeout(执行函数, 延迟时间, [arg1], [arg2], ...);
        • setTimeout()——延时执行定时器；clearnTimeout()——清除定时器 
          setInterval(执行函数, 间隔时间, [arg1], [arg2], ...);

     2.2location对象

    • 定义：`location`对象表示当前页面的URL信息。例如，一个完整的URL我们可以location对象实现页面的跳转或者获取当前URL信息； URL：统一资源定位符，用于表示资源在网络上的地址，每个部分以`/`进行分隔。URL格式：协议://主机地址:端口【/工程名】/访问资源路径
    •  常用属性
      • location.href;    //设置或获取浏览器地址栏中的URL地址
      • location.protocol; // 协议
      • location.host; // 主机地址
      • location.port; // 端口
      • location.pathname; // 访问资源路径
      • location.search; // 参数

    2.3navigator对象

    • 定义：包含浏览器的信息
    • 属性
      • navigator.appName：浏览器名称；
      • navigator.appVersion：浏览器版本；
      • navigator.language：浏览器设置的语言；
      • navigator.platform：操作系统类型；
      • navigator.userAgent：浏览器设定的`User-Agent`字符串。

    2.4screen对象

    • 包含有关客户端显示屏幕的信息。
    • 属性
      • screen.width：屏幕宽度，以像素为单位；
      • screen.height：屏幕高度，以像素为单位；
      • screen.colorDepth：返回颜色位数，如8、16、24。
    2.5history（不建议使用 ）
    • 定义：History 对象包含用户（在浏览器窗口中）访问过的 URL。History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。

            

    JavaScript入门教程
    weixin_74905854的博客
    09-18 2334
    JavaScript（简称“JS”）是一种高级的、轻量级、解释型的编程语言，主要运行在客户端，用于增强网页的交互性。
    JavaScript入门知识
    m0_70296476的博客
    02-09 1886
    JavaScript 是一种轻量级的脚本语言，主要用于网页开发，通过与 HTML 和 CSS 结合，实现网页的动态效果和用户交互功能。
    JavaScript入门基础
    来日可期的博客
    09-22 5800
    一、JavaScript简介 JavaScript是一种属于网络的解释性脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。 跨...
    JavaScript 入门
    Robin Smith
    03-05 891
    学习目标： 提示： 督促自己学习JavaScript，自律会自由 学习的课程来自优达学城JavaScript入门 JavaScript入门学习目标：一、什么是JavaScript？二、数据类型和变量三、条件语句四、循环五、函数六、数组七、对象 一、什么是JavaScript？ 二、数据类型和变量 三、条件语句 四、循环 五、函数 六、数组 七、对象 ...
    JavaScript快速入门
    m0_62036548的博客
    06-12 1415
    JavaScript快速入门
    arcgis for JavaScript入门篇
    qq_69444691的博客
    07-10 2479
    ArcGIS for JavaScript是一种基于Web的地图开发解决方案，由ESRI公司开发。它允许开发人员在Web应用程序中嵌入交互式地图，并使用JavaScript编写地图应用程序。ArcGIS for JavaScript提供了许多功能强大的API和工具，使开发人员能够创建高度定制的地图应用程序。它支持各种地图数据源，包括ESRI的ArcGIS Online服务、第三方地图服务、以及开发人员自己的数据。
    前端之JavaScript入门篇
    Queen_is_king的博客
    07-26 3157
    JavaScript是一门解释型语言，也是动态语言。所谓解释型值语言是指不需要被编译为机器码在执行，而是直接执行。由于少了编译这一步骤，所以解释型语言开发起来尤为轻松，但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了JIT技术，使得运行速度得以改善。而所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了。当然这个问题我们以后再谈。不过在补充一句动态语言相比静态语言性能上要差一些，不过由于JavaScript中应用的JIT技术提示。.
    JavaScript 入门手册(一)
    帅次的博客
    03-07 1936
    中的 JavaScript 函数一、JavaScript 是什么?JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：HTML 定义了网页的内容CSS 美化了网页的仰视JavaScript 控制了网页的行为1.1 JavaScript 介绍JavaScript（简称“JS”）是一种轻量级的面向对象的编程语言，既能用在浏览器中控制页面交互，也能用在服务器端作为网站后台（借助 Node.js），因此 JavaScript 是一种全栈式的编程语言。
    JavaScript 入门 新手学习笔记
    11-17
    这篇"JavaScript入门新手学习笔记"提供了全面的学习资源，适合初学者系统性地掌握这一技术。 笔记可能包含了以下关键知识点： 1. **基础语法**：JS的基础包括变量（var、let、const）、数据类型（如字符串、数字、...
    java源码书籍-TeachYourselfJavaScriptIn24_4th:JavaScript入门经典（第4版）（SamsTeachY
    05-24
    《JavaScript入门经典（第4版）》是一本针对初学者的JavaScript编程教程，旨在帮助读者在24小时内掌握JavaScript的基础知识。尽管标题中提到了"Java"，但实际上这本书是关于JavaScript的，这是一种广泛用于网页和...
    JavaScript入门系列之知识点总结
    10-22
    这只是JavaScript入门的冰山一角，还有更多诸如数组、对象、循环、控制流、事件处理、DOM操作等概念需要学习。继续深入，你将能利用JavaScript构建复杂的交互式Web应用。对于初学者来说，不断实践和理解这些基础知识...
    JavaScript入门学习书籍推荐
    10-30
    很多人对学习JavaScript充满热情，但面对市面上琳琅满目的书籍，初学者往往不知如何选择合适的入门书籍。这篇文章将帮助初学者了解推荐的JavaScript学习书籍，并简要介绍每本书的特点。 首先，推荐给新手的书籍是...
    如何使用 React Hooks 替代类组件的生命周期方法？
    官方推荐
    05-12 1161
    如何使用 React Hooks 替代类组件的生命周期方法？
    bootstrap自助（抽样）法
    最新发布
    weixin_62528784的博客
    05-12 489
    bootstrap自助法抽样
    蓝牙身份证阅读器使用Uniapp调用二次开发demo
    广东东信智能科技有限公司的专栏
    05-10 713
    view class="devices_id">设备ID:{{item.deviceId}}</view>
    前端CSS场景题篇【持续更新】
    loverdany的博客
    05-10 909
    本文详细讲解了6个CSS场景题，整理了常问的题目和自己亲身遇到的经历，后续会持续更新场景题目，希望对你有所帮助。
    以党建网为例，深入分析IT技术栈，实战经验
    qq_33525062的博客
    05-11 67
    ├── frontend/ # 前端项目。│ └── package.json # 后端依赖配置。│ ├── public/ # 静态资源。├── backend/ # 后端项目。│ ├── src/ # 源代码。│ ├── config/ # 配置文件。│ ├── src/ # 源代码。
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

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

    抵扣说明：

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

    余额充值