JavaScript[内容详解]+表单验证(正则表达式)+小案例

最新推荐文章于 2022-09-21 21:03:32 发布
最新推荐文章于 2022-09-21 21:03:32 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： 学习资料 笔记 文章标签： javascript 正则表达式 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56245036/article/details/122222558
版权

沉默必出精品

经过将近一个月的学习，给大家分享JavaScript的用法(后续还有JavaScript中的程序库之一的jQuery，jQuery对常用方法实现封装)

这篇文章包含（重点是要会调试，发现程序在哪里出错，调试是一种很重要的技能）

  1. 解释JavaScriptECMAScript标准
  2. 使用JavaScript操作BOM对象
  3. 使用JavaScript操作DOM对象
  4. 会实现简单的正则表达式(最重要的时再遇见的时候能看懂)

JavaScript基础

注意：在使用事件绑定时需要通过查询进行绑定，不要再html行内写入事件，在后期修改时，比较麻烦
什么是JavaScript
    JavaScript是一种描述性语言，也是一种基于对象和事件驱动的，并具有安全性能的脚本语言。
    特点：
        1.JavaScript主要用来在HTML页面中添加交互行为
        2.JavaScript是一种脚本语言，语言和Java类似
        3.JavaScript一般用来编写客户端的脚本
        4.JavaScript是一种解释性语言，边执行边解释
JavaScript部分
    1.ECMAScript标准
    2.浏览器对象模型(BOM)
    3.文档对象模型(DOM)
JavaScript的基本结构
    <Script type=”text/JavaScript“>      它的type属性，用于指定文本使用的语言类别为text/JavaScript
        JavaScript语句；
    </Script>
引用JavaScript的方式
    内部JavaScript文件
    使用外部JavaScript文件(Src属性引用即可)      注意：外部文件不包含<Script>标签
变量的声明和赋值
    语法：var 变量名；
    注意的是：JavaScript严重区分大小写，非常严重
数据类型
    undefined：未定义类型
    null：空类型
    number：数值类型     可以表示32位的整数，也可以表示64位的浮点数
    string：字符串类型
    Boolean：布尔类型
    undefined和null的区别
        相同的是：进行类型判断时相同
        不同：未赋值和空值(null 对象，数组)
Typeof()运算符可以用来获取这个数据类型 括号中写入变量名称即可

字符的属性和方法
    属性：length  获取字符长度
    语法
    字符串对象.方法名();
    Indexof(str，index)  str：查找的字符 index：从哪开始
    charAt(index)返回指定位置的字符
    toLowerCase() 将字符串转换位小写
    toUpperCase()将字符串转换位大写
    Split(str)分割位字符串数组
数组
    语法：var 数据名称=new Array(Size) 括号中可以写字符串长度也可也写数组数据
    通过下标来进行访问
数组的常用属性和方法
    length：数组的长度
    Join():把所有元素放到一个字符串中
    Sort():对数组进行排序
    Push()在末尾添加一个元素或多个元素，并返回新的长度
    Splice(起始位置，数量):删除，从那开始删除几个
运算符号
    算数运算符：+ - * / % ++ --
    比较运算符：>  <   >=    <=  == !=    ===  ！==
    逻辑运算符： && || ！
    赋值运算符： = += -=
    ==和===的区别
    相同点：进行判断数据是否相同
    不同点：===判断数据类型和值，==只判断值
逻辑控制语句：条件结构和循环结构
    条件结构
        语法：
        If(表达式)
        {
         代码
        }
        Else
        {
         代码
        }
        Switch(表达式)
        {
            Case 值：
                代码
                break；
            default：
                代码
        } 
           注意：switch结构可以进行贯穿
    循环结构
        语法：
        For(初始化；条件；++或--){代码}
        While(条件){代码}
        Do{代码}while(条件)
        For(变量 i in 对象){代码}  注意：通过下标访问
    中断循环
        break：跳出循环，中断
        continue：跳出当前循环，进行下一次循环
注释：当行注释 //   多行注释：/**/
输入和输出
    Alert(”提示信息“)
    Prompt(”提示信息“，"输入框的默认值")
注意在每一条JavaScript语句以；分号结尾
程序调试
    在浏览器中F12进入查看
系统函数
    Parseint():解析一个字符串，返回一个整数
    Parsefloat()：解析一个字符串，返回一个浮点数
    Isnan()：检查参数是否为数值类型(如果是数值返回false否则返回true)
自定义函数
    语法：function 函数名称(参数){代码 return 返回值}    注意：在定义参数时不需要定义参数
    调用函数在事件名=函数名称即可；
    推荐写法为：使用id进行查询绑定函数
            document.getElementById("Iid").οnclick=function(){JavaScript代码}
变量的作用域
    全局变量和局部变量:在函数中的变量为局部变量，其他为全局变量
事件
    onclick：鼠标单击某个对象
    onload：窗体加载事件
    Onchange:内容发生改变时
    Onkeydown:某个按键按下时
    Onmouseover:鼠标指到某元素上

    这是一个小案例：实现查询字符串中包含A或a的字符串个数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var Item=new Array("zhangsan","liai","wangwu","zhaoliu");
			var Index=0;
			document.write("<h3>在下面字符串中包含多少A或者a</h3>"+"<br>");
			for(var i=0;i<Item.length;i++)
			{
				if(Item[i].indexOf('a') !=-1 || Item[i].indexOf('A')!=-1)
				Index++;
				document.writeln(Item[i]+"<br>");
			}
			document.write(Index);
		</script>
	</body>
</html>

操作BOM对象
    
BOM对象(浏览器对象模型)：提供了独立与内容的可以与浏览器窗口进行交互的对象结构
Window对象
    常用属性
        1.history：有关客户访问过的URL的信息
        2.location：有关当前URL的信息
        3.screen:只读属性，包含有关客户端显示屏幕的信息
    语法：window.属性=”属性值“
    常用方法    （在调用window方法的时候window可以去掉，window对象是全局对象）

        注意很多的方法已经不再使用，只是让大家知道
        1.prompt()：显示可提示用户输入的对话框
        2.alert()：显示一个提示信息和一个确定按钮
        3.confirm()：显示一个提示信息，返回一个Boolean值，确认和取消
        4.close()：关闭浏览器窗口
        5.open()：打开一个新的页面，加载到URL当中      语法：open(地址，窗口名称，窗口特征(使用空格隔开)) 
        6.setTimeout()：在指定的毫秒后调用该函数
        7.setInterval():按照指定周期来调用函数或表达式
history对象
    方法
        Back()：加载history对象列表中的前一个URL      相当于浏览器 后退
        Forward():加载history对象列表中的后一个URL     相当于浏览器前进
        Go():加载某一个  可以正数也可以负数，正代表前进，负代表后退
location对象(主作用：实现页面跳转)
    属性
        host：设置或返回主机名和当前URL的端口号
        hostname：设置或返回当前的URL的主机号
        href：设置或返回完整的URL  
    方法
        Reload():重新加载当前文档
        Replace():用新的文档替换当前文档     不进入URL历史记录，也就代表不可以后退
Document对象
    常用属性
        referrer：返回载入当前文档的URL        基于服务器才可以，文件没用
        URL:返回当前文档的URL      只读属性，不能用来页面跳转
    常用方法
        Getelementbyid():返回指定第一个id对象(id)
        Getelementbyname():返回一个指定名称的对象集合(匹配带name属性的控件)    注意：返回的是一个数组
        Getelementbytagname():返回标签名的对象的集合(标签)
        Write()：向文档写文本、HTML表达式或JavaScript代码
        innerHTML：是几乎所有的HTML元素都有的属性
Date对象
    语法：var 变量名称=new Date("参数");
    方法
        GetFillyear():年
        GetMonth():月份   注意：月份需要+1
        Getdate():天数 
        GetHours():小时
        GetMinutes():分钟
        GetSeconds()：秒
        Getday():星期几

        实现获取当前年月日

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>你好欢迎访问贵美商城!</h2>
		
		<p id="Hid"></p>
	</body>
</html>
<script type="text/javascript">
	Show();
	//alert(Sj);
	function Show(){
		var Sj=new Date();
		var Item=document.getElementById("Hid");
		var Year=Sj.getFullYear();  //获取年
		var Month=Sj.getMonth()+1;   //获取月
		var DateRi=Sj.getDate();		//获取日
		
		var Hours=Sj.getHours();		//获取时
		var Minutes=Sj.getMinutes();	//获取分
		var Seconds=Sj.getSeconds();	//获取秒
		var Wu="";
		var Day=Sj.getDay(); //获取星期
		if(Shi>12){
			Wu="PM";
		}
		else{
			Wu="HM";
		}
		if(Day==0){
			Day=7;
		}
		Item.innerHTML=Year+"年"+Month+"月"+DateRi+"日  "+Hours+":"+Minutes+":"+Seconds+  Wu  +"星期"+(parseInt(Day));
		Kai();
	}
	//实现指针走动的效果
	function Kai(){
		//一秒调用一次
		setInterval("Show()",1000);
	}
</script>


Math对象
    常用方法
        Ceil()：向上取整
        Floor():向下取整
        Round():四舍五入
        Random():产生一个0-1之间随机数
        使用随机数实现猜大小游戏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		请猜0-100之间的任意一个整数：<input type="" name="" id="Count" value="" /><br>
		<p id="tip">……</p>
		<input type="button" name="" id="" value="Go" onclick="OpenCai()"/>
		<input type="button" name="" id="" value="再想一想" onclick="CloseTing()"/>
	</body>
</html>
<script type="text/javascript">
	//生成随机数
	var Item=parseInt(Math.random()*100+1);
	//在控制台显示数据
	console.log(Item);
	
	function OpenCai(){
		var Set=document.getElementById("Count");
		if(isNaN(Set.value)){
			document.getElementById("tip").innerHTML="请输入1-100之间的任意数值";
		}else{
			if(Set.value==Item){
				//获取文本框中的值，进行比较
				document.getElementById("tip").innerHTML="猜对了！";
			}else if(Set.value>Item){
				document.getElementById("tip").innerHTML="猜大了";
			}else if(Set.value<Item)
			{
				document.getElementById("tip").innerHTML="猜小了";
			}
		}
		//调用函数
		OpenTing();
	}
	//注意需要把他们定义成全局变量
	var Sj;
	//设置延迟时间
	function OpenTing(){
		//3秒之后清空内容，呈现给用户
		Sj=setTimeout("CloseNei()",3000);
	}
	//当时执行数据函数
	function CloseNei(){
		document.getElementById("tip").innerHTML="";
	}
	//停止延迟
	function CloseTing(){
		Sj=clearTimeout(Sj);
	}
</script>

(上个代码包含清除定时函数)
定时函数
    setTimeout():用于在指定的毫秒后调用函数或表达式
    语法：settimeout("函数名称"，等待毫秒) 1秒=1000毫秒       只掉一次
    Setinterval():按照指定周期来调用函数或表达式
    语法：Setinterval("函数名称",周期性调用函数之间的间隔毫秒)       一直调用
清除定时函数
    clearTimeout()和clearinterval()
    注意：括号中的数据应该是日期函数的变量

操作DOM对象
DOM对象即文档对象模型
DOM对象三大类：DOM Core，HTML-DOM,CSS-DOM
节点和节点关系
    Nodename ：节点名称
    NodeValue：节点值   永远是空值   注意在获取元素时使用innerHTML属性
    NodeType：节点类型
    节点    节点值
    整个文档是文档对象    9
    标签是元素节点    1
    标签中的文本是文本对象    3
    标签中的属性是属性节点    2
    注释是注释节点    8
    属性
    Parentnode:返回父节点
    childnodes：返回子节点集合
    Firstchild：返回节点的第一个
    Lastchild：返回节点的最后一个
    Nextsibling:上一个节点
    Previoussibling：下一个节点
element属性      注意在使用时，需要知道是否返回多个值，如果多个值则要用循环8
    Firstelementchild：返回节点的第一个子节点
    Lastelementchild ：返回节点的最后一个子节点
    nextelementSibling：上一个节点
    Previouselementsibling ：下一个节点
    这一组属性可以消除这种因空行，换行等出现的无法准确访问到节点的情况
操作节点
    GetAttribute(”属性名“)：用来获取属性的值
    SetAttribute("属性名","属性值")：用来设置属性的值
    但是不常用：可读性较差
    推荐使用获取元素节点直接进行修改
    样式
        语法：HTML 元素.style.样式属性=”值“；    注意：样式属性中的-要取掉，把-后面的第一个字符改为大写
        className属性
            语法：HTML 元素.className=”样式名称“      注意：类样式不需要使用.
获取元素
    语法： HTML 元素.style.样式属性；只能获取行内样式
    语法：  HTML 元素.currentStyle.样式属性 可以获取外部样式 局限只能在IE浏览器使用
    语法：document.defaultView.getComputedStyle(元素，null).属性
创建和插入节点(待补充)
    Createelement(tagName)：创建一个便签   参数是标签名称
    Appendchild()：再节点末尾追加
    insertBefore(a,b):在a和b之间插入一个节点    前面是父节点.
    Clonenode(deep):复制某个指定节点    注意：deep值为布尔类型，为true时复制该节点的所有子节点，若为false时，则只复制给节点和其属性
删除和替换节点
    Removechild(node)：删除指定节点
    Replacechild(新节点，旧节点)：替换节点
    通过层次关系实现元素的删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		请输入你的姓名：<input id="mid" value="" />
		<input type="button" name="" id="" value="添加" onclick="InsertName()"/>
		<div id="Uid">
			
		</div>
		<input type="button" name="" id="" value="删除" onclick="DeleteName()"/>
	</body>
</html>
<script type="text/javascript">
	function InsertName(){
		var Item=document.createElement("p");
		Item.innerHTML=document.getElementById("mid").value;
		document.getElementById("Uid").appendChild(Item);
	}
	function DeleteName(){
		var Item=document.getElementById("Uid");
		Item.parentNode.removeChild(Item);
	}
</script>


元素属性应用
    滚动条垂直位置：scrollTop
    滚动条水平位置：scrollLeft
    语法：document.documentelement.scrollTop或者document.body.scrollTop

操作BOM对象实现对象的添加(添加到我们的容器当中)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		学生名称：<input id="Stu"/>
		<input type="button" value="添加" onclick="OInsertStudent()" />
		<div id="StudentID"></div>
	</body>
</html>
<script type="text/javascript">
	
	function OInsertStudent(){
		//创建一个p标签
		var Item=document.createElement("p");
		//获取文本框数据值
		Item.innerHTML=document.getElementById("Stu").value;
		//添加到div中
		document.getElementById("StudentID").appendChild(Item);
	}
</script>

表单校验

注意在使用input标签时注意要Form包起来

Event.returnvalue=false   中断事件

正则表达式

它是一个描述字符模式的对象

普通方法：

语法：var 名称=//；   /开始  /结束

Exec():检索字符串中是正则表达式的匹配，返回找到的值，并确定其位置

Test():检索字符串中指定的值，返回布尔类型

语法：实例对象.方法（字符串）

正则表达式常用字符

^：匹配字符串的开始

$：匹配字符串的结束

\s ：任意空白支付（空格和回车）

\S：任意非空白字符

\d：匹配一个数字字符

\D：匹配非数字任意字符

\w：匹配一个数字，下划线或者字母

\W：任意非单字字符

.   ：除了换行符之外的任意字符

正则表达式的重复字符

{n} 匹配前几项n次

{n,}匹配前几项n一次或多次

{n，m}匹配前几项至少n项最多m项

正则表达式中(),[],{}区别

()：是为了提取匹配的字符串，表达式中有几个()就有几个对应的匹配字符串

[]:是定义匹配的字符串

{}：用来匹配长度

g表示匹配全局

i表示忽略大小写

m表示多行

|单横表示或者

\表示转义符

实现简单的正则表达式(注意: 使用event进行判断，但是推荐使用return的方式进行中断事件，但也注意事件应该绑定到form表单的onsubmit事件上也需要return，但是不要绑定到submit提交按钮上否则阻止不了return事件)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 <h2>新用户注册</h2>
		 <hr >
		 <form action="chp04-02.html" onsubmit="return CheckFormDate()">
		 	用户名:<input id="Yid"/><span>用户名由英文字母和数字组成的4-16位，以字母开头</span><br>
		 	密码:<input id="Mid"/><span>密码名由英文字母和数字组成的4-10字符</span><br>
		 	确认密码:<input id="Pid"/><br>
		 	电子邮箱:<input /><br>
		 	手机号码:<input id="Sid"/><br>
		 	生日:<input id="BornDate"/><br>
		 	<input type="submit" value="注册完成"/>
		 </form>
	</body>
</html>
<script type="text/javascript">
	function CheckFormDate(){
		var Zheng=/^[a-z]\w{3,15}$/;
		if(!Zheng.exec(document.getElementById("Yid").value)){
			alert("用户名输入的格式不正确！");
			//使用event进行判断，但是推荐使用return的方式进行中断事件，但也注意事件应该绑定到form表单的onsubmit事件上也需要return，但是不要绑定到submit提交按钮上否则阻止不了return事件
			//event.returnValue=false; 中断事件
			return false;
		}
		var Item=/^[a-z]|[1-9]{6,16}$/;
		if(!Item.exec(document.getElementById("Mid").value)){
			alert("密码输入的格式不正确！");
			return false;
		}
		if(document.getElementById("Mid").value!=document.getElementById("Pid").value){
			alert("二次输入的密码不一致！");
			return false;
		}
		var Phone=/^1[3-9]\d{9}$/;
		if(!Phone.exec(document.getElementById("Sid").value)){
			alert("手机号格式不正确！");
			return false;
			
		}
		var Born=/^(19\d{2}|20\d{2})(0?[1-9]|1[0-2])(0?[1-9]|[1-2]\d|3[0-1])$/;
		if(!Born.exec(getElementById("BornDate").value)){
			alert("生日格式不正确");
			return false;
		}
		return true;
	}
</script>

HTML5的方式验证表单

placeholder：提示，并且获取焦点

required：不允许为空

pattern：正则表达式

上面有一些小的案例 案例上有注释，可以看看

结尾呢，还是希望大家在以后的生活中，学习中，不断的学习，进步，更正自己，鞭策自己，祝你我都能达到自己的目标和理想生活

我是一个小白.
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
贵美注册页面
qq_43689043的博客
04-13 1896
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贵美注册页面</title> </head> <body> <form auction="login.html" method="post"> <table> <tr> <td>登录名:&
JavaScript表单验证和提交(结合正则表达式)
java_xxoo_android的专栏
12-07 3418
表单验证： 1> 在用户输入信息完成后，验证用户数据的数据是否符合某个要求，根据是否符合要求，提示不同的信息。 2>若用户输入的信息有一项不合格，则阻止表单提交。(注意:表单组件name属性值为非空时表单递交才能将组件的value值传出去. 所以一般添加表单组件时最好加上name属性,给组件一个名字,以便于表单提交传值成功) 3>如何阻止表单的提交： 实例: 希望实
贵美商城表单验证代码
MZ199290的博客
09-23 5107
贵美商城 body{ border:0px; padding:0px; margin:0px auto; font:12px Tahoma; } div,ul,li,dt,dl { float:left; margin:0px auto; padding:0px; } li{ list-style:none; } a:link {c
注册页面代码
编码青年的专栏
08-14 1738
贵美商城 function check() { /*名字的验证*/ var user = $("#fname").val(); if (user == "") { alert("名字不能为空"); retur
贵美商城网站
12-20
贵美商城网站，是一个静态的网站但能实现一些基本功能
验证注册页面信息（JavaScript）
热门推荐
weixin_48112113的博客
07-19 1万+
1. 任务要求 1）正则表达式的使用； 2）如何获取表单元素？ 3）函数的应用； 4）掌握String对象的创建； 5）掌握String对象的常用方法； 6）表单验证的方法。 2. 需求说明 根据所给素材制作注册页面，使用JavaScript制作文本提示特效，验证页面数据的有效性，要求如下： （1）使用表单form的onsubmit事件，根据验证函数的返回值是true或false来决定是...
详解jquery validate实现表单验证 （正则表达式）
10-20
本文将深入讲解如何使用jQuery Validate结合正则表达式实现高效且灵活的表单验证。 首先，`validate()`是jQuery Validate插件的核心方法，用于初始化验证行为。你可以设置`rule`来定义验证规则，如`required`表示...
常用JavaScript正则表达式汇编与示例详解
12-13
目前收集整理了21个常用的javaScript正则表达式，其中包括用户名、密码强度、整数、数字、电子邮件地址（Email）、手机号码、身份证号、URL地址、 IP地址、 十六进制颜色、 日期、 微信号、车牌号、中文正则等。表单...
mtracer2.0正则表达式验证工具
09-07
**mtracer2.0正则表达式验证工具详解** 在信息技术领域，正则表达式（Regular Expression，简称regex）是一种强大的文本处理工具，用于搜索、替换、提取或验证字符串模式。正则表达式广泛应用于数据验证、文本分析...
贵美商城html+css+js完整示例代码
05-13
贵美商城html+css+js完整示例代码,可运行
jquery实现网站注册页面验证信息
04-04
用jquery实现网站注册页面验证信息，内容很完善的哦
贵美商城源代码（包含素材）
09-17
贵美商城源代码（包含素材）这是我们上机课做的项目，分享一下。
正则表达式详解
07-17
1. **JavaScript**：在浏览器端，JavaScript的`String.prototype.match()`, `String.prototype.replace()`, `String.prototype.search()`等方法都支持正则表达式。 2. **Python**：Python的`re`模块提供了全面的...
基于PHP+Ajax实现表单验证的详解
12-19
【基于PHP+Ajax实现表单...总结，基于PHP+Ajax的表单验证是一个综合运用JavaScript事件处理、DOM操作、正则表达式和服务器端通信的过程，它能提供即时反馈，提高用户交互的流畅性，同时也保证了数据的有效性和安全性。
【贵美商城】制作贵美注册页
qq_44759710的博客
05-20 2752
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="css/1.css" type="text/css" rel="stylesheet" /> </head> <body margin-top:50px;" background="images/login_bg.gif" ;ba
使用文本输入提示的方式验证贵美网站的注册页面
qq_36074092的博客
05-03 9516
贵美商城 body{ border:0px; padding:0px; margin:0px auto; font:12px Tahoma; } div,ul,li,dt,dl { float:left; margin:0px auto; padding:0px; } li{ list-style:none; } a:link {c
使用JavaScript实现注册页面并验证
最新发布
weixin_69420643的博客
09-21 5964
使用JavaScript实现注册页面并验证
【JavaScript】案例1：使用JS完成注册页面校验
专注于Java领域开发 关注我 带你玩转Java
07-30 7416
使用JS完成注册页面校验
正则表达式与表单验证：RegExp对象详解
通过学习正则表达式，开发者能够编写出更简洁、高效的代码，提高表单验证的严谨性。例如，可以使用正则表达式即时提示用户输入的电子邮箱格式错误，或者在用户离开文本框时验证内容。同时，结合数组，可以实现省市级...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值