【JQuery Mobile移动应用开发实战】JQuery Mobile基础——表单元素的使用

最新推荐文章于 2022-04-29 23:10:33 发布
最新推荐文章于 2022-04-29 23:10:33 发布
阅读量528 收藏 2
点赞数
文章标签： jquery html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lht964249279/article/details/122782455
版权

文章目录

4. 表单元素的使用

如果说按钮控件负责应用中大部分响应功能，那么应用中的一切数据交互都要通过表单实现。QQ的登录界面和短信的输入界面都用到了表单控件。相对于单一的按钮，表单的形式又比较复杂，包括文本编辑框、搜索框、滑动条，开关、单选按钮、复选框及列表菜单等内容。

主要知识点包括：

  • 数据的提交，利用表单元素获取数据的方法
  • 更强大的交互功能，利用表单元素控制页面的属性
  • 页面中控件排列的技巧

4.1 简单的QQ登录界面

利用文本编辑框制作的登录界面：

<!DOCTYPE html>     

<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=1"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>  
<style type="text/css">
.ui-icon-round{ background-image:url(round.png);}
</style>    
<script>
function but_click()
{
	var temp1=$("#zhanghao").val();
	if(temp1=="账号：")
	{
		alert("请输入QQ号码！")
	}
	else
	{
		var zhanghao=temp1.substring(3,temp1.length);
		var temp2=$("#mima").val();
		if(temp2=="密码：")
		{
			alert("请输入密码！");
		}
		else
		{
			var mima=temp2.substring(3,temp2.length);
			alert("提交成功"+"你的QQ号码为"+zhanghao+"你的QQ密码为"+mima);
		}
	}
}
</script>
</head>               
<body>
	<div data-role="page">
		<div data-role="content">
			<img src="http://img.itful.com/uploads/allimg/091209/0012204349-0.png" style="width:50%; margin-left:25%;"/>
			<form action="#" method="post"> 
				<input type="text" name="zhanghao" id="zhanghao" value="账号："  />
				<input type="text" name="mima" id="mima" value="密码："  />
				<a href="#" data-role="button" data-theme="b" id="login" onclick="but_click();">登录</a>
			</form>
		</div>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述
本例使用了表单控件中的文本编辑框。文本编辑框是表单元素中最简单的一种。

使用表单元素之前先在页面中加入表单标签：

<form action="#" method="post">
    <!--中间插入数据-->
</form>

只有这样标签内的控件才会被JQuery Mobile默认读取为表单元素，action属性指向的是接受提交数据的地址，当数据被提交时，就会发送到这里。method属性标注了数据提交的方法，有post和get两种方法可用。

form中所有表单元素都是使用input标签来表示的，可利用type属性来对它们加以区别，如本例中的文本编辑框type属性是text。另外还给每个控件加入相应的name和id，用于对提交的数据进行处理。

tip：为了便于维护，最好将name和id设为相同的值。

可以利用编辑框的id来获取控件，然后利用val()方法获取编辑框的内容，在这里限制了编辑框的值不能为空，实际上应该利用正则表达式限制账号只能为数字，并且使密码内容隐藏。

注：虽然JQuery Mobile为开发者封装了可以控制内容的编辑框，但是为了保证应用的安全性，防止部分别有用心的用户绕过过滤而造成破坏，必须保证在后台对提交的数据进行二次过滤，确保数据没有被恶意提交。

4.2 手机调查问卷

用文本编辑框制作简单的调查问卷：

<!DOCTYPE html>     
   
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>调查问卷 </title>     
<meta name="viewport" content="width=device-width, initial-scale=1"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>  
</head>               
<body>
	<div data-role="page">
		<div data-role="header">
			<h1>调查问卷</h1>				<!--先加上一个头部栏和标题-->
		</div>
		<div data-role="content">
			<form action="#" method="post"> 
				<!-- placeholder属性的内容会在编辑框内以灰色显示-->
					<input type="text" name="xingming" id="xingming" placeholder="请输入你的姓名："/>
	        			<!--当data-clear-btn的值为true时，当该编辑框被选中-->
					<!--可以单击右侧的按钮将其中的内容清空-->
					<input type="tel" name="dianhua" id="dianhua" data-clear-btn="true" placeholder="请输入你的电话号码：">
					<label for="adjust">请问您对本书有何看法？</label>
					<!—这里用到了textarea而不是input-->
					<textarea name="adjust" id="adjust"></textarea>
					<!—通过for属性与textarea进行绑定-->
					<label for="where">请问您是在哪里得到这本书的？</label>
					<!--使用label时要使用for属性指向其对应控件的id-->
					<textarea name="where" id="where"></textarea>
					<a href="#" data-role="button">提交</a>
			</form>
		</div>
    </div>
</body>
</html>

运行结果如下：
在这里插入图片描述
textarea是一种定义了多行文本的文本编辑控件，可以根据其中的内容自动调整自身高度，同时也可以通过拖曳的方式对其大小进行调整。

type属性：

  • search——将在编辑框左侧生成带有搜索按钮的图标。
  • number——默认编辑框输入内容是数字。
  • date——默认编辑框输入内容是日期。
  • month——默认编辑框输入内容是月数。
  • week——默认编辑框输入内容是周一至周日的某一天。
  • time——默认编辑框输入内容是时刻。
  • datetime——默认编辑框输入内容是日期+时间。
  • tel——默认编辑框输入内容是电话号码。
  • email——默认编辑框输入内容是邮件地址。
  • url——默认编辑框输入内容是网址。
  • password——默认编辑框输入内容转化为圆点显示。
  • file——默认编辑框可以通过单击来选取设备中的文件。

注：一个优秀的应用至少要经过前端利用JavaScript，后台利用脚本语言(如PHP)进行至少两层的过滤，才能够保证不会因某些用户恶意构造的数据造成破坏。

4.3 精准的进度控制

用滑动条控制播放进度：

<!DOCTYPE html>     

<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=1"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script> 
<style type="text/css">
.ui-icon-round{ background-image:url(round.png);}
</style>    
</head>               
<body>
	<div data-role="page" data-theme="a">
		<div data-role="header">
			<a href="#">返回</a>
			<h1>音乐播放器</h1>
		</div>
		<div data-role="content">
			<div data-role="controlgroup">
				<a href="#" data-role="button">no air</a>
				<a href="#" data-role="button">
					<img src="1.jpg" style="width:80%;"/>
				</a>
				<a href="#" data-role="button">no air</a>
				<a href="#" data-role="button">Jordon spark</a>
			</div>
			<form>
				<input name="jindu" id="jindu" min="0" max="100" value="50" type="range">
			</form>
			<div data-role="controlgroup" data-type="horizontal">
				<a href="#" data-role="button">后退</a>
				<a href="#" data-role="button">播放</a>
				<a href="#" data-role="button">暂停</a>
				<a href="#" data-role="button">后退</a>
			</div>
		</div>
		<div data-role="footer">
			<h1>暂无歌词</h1>
		</div>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述

4.4 多彩的调色板

利用滑动条控制数据，如利用一组滑动条控制背景颜色：

<!DOCTYPE html>     
  
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=1"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script> 
<script>
function set_color()
{
	var red = $("#red").val();
	var green = $("#green").val();
	var blue =$("#blue").val();
	var color = "RGB("+red+","+green+","+blue+")";
	$("div").css("background-color",color);
}
</script>   
</head>               
<body>
	<div data-role="page" onclick="al();">
		<div data-role="header">
			<h1>调色板</h1>
		</div>
		<div data-role="content">
		</div>
		<div data-role="footer">
			<form>
				<input name="red" id="red" min="0" max="255" value="0" type="range" onchange="set_color();" />
				<input name="green" id="green" min="0" max="255" value="0" type="range" onchange="set_color();" />
				<input name="blue" id="blue" min="0" max="255" value="0" type="range" onchange="set_color();" />
			</form>
		</div>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述
屏幕上三个滑动条分别代表RGB颜色中的一个，通过拖到它们可以改变红蓝绿这三种颜色的值，从而改变整体颜色。

4.5 熄灯，请闭眼

用开关控件设置夜间模式：

<!DOCTYPE html>     
 
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=1"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script> 
<script>
$(document).ready(function(){
	setInterval(function(){
		var myswitch = $("select");
		var i=myswitch[0].selectedIndex;
		if(i==1)
		{
			$("div").css("background-color","black");
		}
		else
		{
			$("div").css("background-color","white");
		}
	},50);
});
</script>   
</head>               
<body>
	<div data-role="page">
		<div data-role="header">
			<h1>开关控件的使用</h1>
		</div>
		<div data-role="content" style="height:430px;">
			<div data-role="fieldcontain">
				<select name="slider" id="slider" data-role="slider">
					<option value="off">关</option>
					<option value="on">开</option>
				</select> 
			</div>
		</div>
	</div>
</body>
</html>

效果如下：
在这里插入图片描述
使用开关时，在页面添加一组select标签，在其中加入两个option标签，当页面完成加载后，这两个option值将成为这个开关的两种状态。另外select标签需要包裹在一个div标签中，同时设置属性data-role="fieldcontain。

在使用时，可以通过select标签来获取开关控件，这样获得的是一个数组，但是开关中仅有数组的第一个元素可以使用，即范例中的myswitch[0]，可以通过它的selectedIndex属性获取哪个选项被选中，就可以得知开关有没有被打开。

4.6 做一道选择题

利用单选按钮做选择题：

<!DOCTYPE html>     
  
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=1"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script> 
</head>               
<body>
	<div data-role="page">
		<div data-role="header">
			<h1>第一题</h1>
		</div>
		<div data-role="content" style="height:430px;">
			<fieldset data-role="controlgroup">
				<legend>哪一个术语定义了电信运营商承诺每秒通过单个PVC的字节数？</legend>
				<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1"/>
				<label for="radio-choice-1">访问速率</label>
				<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
				<label for="radio-choice-2">BECN</label>
				<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
				<label for="radio-choice-3">CIR</label>
				<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
				<label for="radio-choice-4">FECN</label>
				<input type="radio" name="radio-choice" id="radio-choice-5" value="choice-5" />
				<label for="radio-choice-5">标头速率</label>
			</fieldset>
		</div>
</body>
</html>

效果如下：
在这里插入图片描述
首先使用< fieldset data-role=“controlgroup” >标签将单选按钮中的内容包含在里面，然后包含在legend中的内容为问题。每一个选项都要设置属性name="radio-choice"且属性id必须唯一。

4.7 多项选择题

利用复选框做多项选择题：

<!DOCTYPE html>     
    
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=1"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script> 
</head>               
	<body>
		<div data-role="page">
			<div data-role="header">
				<h1>第一题</h1>
			</div>
			<div data-role="content" style="height:430px;">
				<!--实现方法与单选框几乎一样-->
				<fieldset data-role="controlgroup">
					<legend>哪一个术语定义了电信运营商承诺每秒通过单个PVC的字节数？</legend>
				<!--type属性的值变成了checkbox-->
				<input type="checkbox" name="checkbox-choice" id="checkbox-choice-1" value="checkbox-1"/>
					<label for="checkbox-choice-1">访问速率</label>
				<input type="checkbox" name="checkbox-choice" id="checkbox-choice-2" value="checkbox-2" />
					<label for="checkbox-choice-2">BECN</label>
				<input type="checkbox" name="checkbox-choice" id="checkbox-choice-3" value="checkbox-3" />
					<label for="checkbox-choice-3">CIR</label>
				<input type="checkbox" name="checkbox-choice" id="checkbox-choice-4" value="checkbox-4" />
					<label for="checkbox-choice-4">FECN</label>
				<input type="checkbox" name="checkbox-choice" id="checkbox-choice-5" value="checkbox-5" />
					<label for="checkbox-choice-5">标头速率</label>
				</fieldset>
			</div>
	</body>

</html>

效果如下：
在这里插入图片描述
只需要将单选框中的 type="radio"改为type="checkbox"即可。

4.8 请问先生需要什么服务

JQuery Mobile制作的自助服务系统：

<!DOCTYPE html>     
   
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=1"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script> 
</head>               
<body>
	<div data-role="page">
		<div data-role="header">
			<h1>请问需要什么服务</h1>
		</div>
		<div data-role="content" style="height:430px;">
			<div data-role="fieldcontain">
　 				<select name="select" id="select" data-native-menu="false">
　　 				<option value="please">请选择您需要的服务：</option>
					<option value="choice1">我需要开水</option>
　　 				<option value="choice2">我需要食物</option>
　　 				<option value="choice3">我需要报纸和杂志</option>
　　 				<option value="choice4">我需要一点零食</option>
					<option value="choice5">屋里太脏了，来打扫一下</option>
					<option value="choice5">消费金额查询</option>
					<option value="choice5">账单查询</option>
					<option value="choice5">人工服务</option>
　  			</select>
			</div>
		</div>
</body>
</html>

效果如下：
在这里插入图片描述
在这里插入图片描述

4.9 对话框中的表单

<!DOCTYPE html>     
   
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>对话框中的表单</title>     
<meta name="viewport" content="width=device-width, initial-scale=1"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script> 
</head>               
<body>
	<div data-role="page">
		<div data-role="header">
			<h1>请点击登录按钮</h1>
		</div>
		<div data-role="content" style="height:430px;">
			<a href="#popupLogin" data-rel="popup" data-role="button">登录</a>
			<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
				<form>
					<div style="padding:10px 20px;">
						<h3>请输入用户名和密码</h3>
						<label for="un" class="ui-hidden-accessible">用户名:</label>
						<input name="user" id="un" value="" placeholder="用户名" type="text">
						<label for="pw" class="ui-hidden-accessible">Password:</label>
						<input name="pass" id="pw" value="" placeholder="密码" type="password">
						<button type="submit" data-icon="check" data-theme="b">登录</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
</html>

效果如下：
在这里插入图片描述
还可以通过修改div中的style属性设置对话框的高度和宽度。

shen子怡
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
《构建跨平台APP-jQuery.Mobile移动应用实战》 PDF
08-27
jQuery Mobile是目前*流行的跨平台移动开发框架，本书以实例驱动讲解的方式，让零基础的读者也能轻松掌握jQuery Mobile下的应用开发。本书分为4篇，*篇是移动开发入门篇，介绍了jQuery Mobile、HTML 5和移动开发的...
【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile界面综合实战
lht964249279的博客
02-05 2206
《jQuery Mobile移动应用开发实战》学习笔记
【初探移动前端开发04】jQuery Mobile (中)
weixin_34279184的博客
07-13 91
前言 昨天我们一起学习了一部分jquery mobile的知识，今天我们继续。 这些是些很基础的东西，有朋友觉得这个没有其它的好，但是学习下不吃亏嘛，我反正也不会一起学习基础啦。 例子请使用手机查看哦 内容区域格式布局 网格布局 jquery mobile提供一种多列布局功能，由于移动设备的屏幕大小原因，一般情况还是不要使用多列布局啦。 jquery mobile提供一种css样式规...
《jQuery Mobile入门经典》—— 1.7　练习
weixin_33933118的博客
05-02 115
本节书摘来异步社区《jQuery Mobile入门经典》一书中的第1章，第1.7节，作者：【美】Phil Dutson，更多章节内容可以访问云栖社区“异步社区”公众号查看。 1.7　练习 jQuery Mobile入门经典1．下载本章介绍的一些程序并安装它们。感受一下，哪一款能最好地适合个人的开发风格，哪一款满足个人或公司的预算。 2．调查一下您的国家或...
PHP + MySQL 学习笔记（七）--- jQuery 及 jQuery Mobile 简介 + 两个 练习
weixin_45889834的博客
01-01 404
Query简介 虽然JavaScript强大而灵活，具有大量内置函数，您仍然需要其他代码层来处理无法通过本机或CSS实现的简单事情，例如动画，事件处理和异步通信。 而且，由于多年来的各种浏览器大战，令人沮丧和烦人的浏览器不兼容问题一去不复返，有时还是通过乏味的JavaScript代码才能确保网页在所有设备上的外观相同，解决近年来发布的各种浏览器和版本之间的所有差异。一言以蔽之，还是噩梦。 为了填补这些空白，已经开发了许多功能库（其中许多功能还提供了对DOM的轻松挂钩），以最大程度地减少浏览器之间的差异并促进
构建跨平台APP jQuery Mobile移动应用实战代码
02-01
**jQuery Mobile：构建跨平台APP的移动应用实战代码** jQuery Mobile 是一个强大的前端框架，专为构建触屏优化的移动应用程序而设计。它基于 jQuery 库，提供了丰富的 UI 控件和响应式布局，使得开发者可以轻松创建...
jQuery Mobile框架中的表单组件基础使用教程
10-22
jQuery Mobile框架主要针对移动端的Web UI设计,其中丰富的表单组件调用起来也是相当方便,接下来就为大家整理了一份jQuery Mobile框架中的表单组件基础使用教程,需要的朋友可以参考下
jquery mobile 移动应用
05-27
在移动应用开发领域，jQuery Mobile 是一款强大的框架，它专为触摸设备设计，能够帮助开发者快速构建响应式、跨平台的移动界面。结合 Android 平台，jQuery Mobile 提供了一种高效的方法，使得开发者可以使用 HTML、...
55个jQuery表单美化/增强插件
qq513666573的专栏
09-28 801
作web开发的人都知道，浏览器默认的表单样式，其实是很难看，很古板的，无论设计多优秀的页面，一旦使用这样的表单，设计效果无疑要大大折扣的。下面这55个jQuery表单(Form)插件，有些可以用于美化表单，有些可以用于增强表单现有的功能。 Niceforms v2
基于Jquery Mobile的用户登录 注冊的 Demo
09-27
基于Jquery Mobile的用户登录 注冊的 Demo
jQuery手机端注册登录页面代码.zip
07-04
jQuery手机端注册登录页面代码是一款基于jquery mobile实现的手机端注册登陆页面特效。
jquerymobile 漂亮界面源代码 这个demo看完基本就会了
05-21
jquerymobile 漂亮界面源代码 这个demo看完基本就会了
JQueryMobile与后台通信
12-29
运用Jquery Mobile与后台通信的一个例子，通过Jquery Mobile解决手机跨平台问题
jQuery Mobile（布局和表单）
04-14
jQuery Mobile（布局和表单）
jQuery mobile ——制作表单
qq_45935715的博客
04-29 2137
请运用jQuery mobile功能，将以下关于问卷调查的表单(Form)页面完成，请注意网页版面的调整，使得手机画面能够工整与美观。请同学完成此网页内容与相应所需的java script。
jquery mobile ajax 实例,jQuery Mobile中的AJAX表单提交
weixin_32328999的博客
08-06 202
Jasper..15如果使用自定义submit事件处理程序处理表单提交,则可以在同一页面上处理验证://bind an event handler to the submit event for your login form$(document).on('submit', '#form_id', function (e) {//cache the form element for use in ...
jQuery Mobile中无法提交表单的解决方法
周祥平程序专栏
06-14 1689
姓： 名：
JqueryMobile试题
咖喱辣椒
05-09 715
1.动态添加checkbox <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min...
Jquery Mobile的表单提交方式
东方白
09-02 3007
因为之前没用过Jquery Mobile，因此被一个问题难住了，原因是表单提交后的页面样式不对，我一看发现居然继承了上个页面的css样式，查了半天也没查出个所以然，于是乎改了另外一种方式提交，用js的form.submit()方式提交，发现居然好了，但留着疑问总不好啊，于是去请教Alvinte，最后终于解决鸟！下面是jquery官方的说明。 Jquery Mobile会自动通过ajax处
使用jQuery Mobile构建跨平台移动应用实战
4. **触摸友好的UI组件**：jQuery Mobile提供了一系列预定义的UI元素，如导航栏、表单、按钮等，这些组件优化了触摸交互，简化了移动应用界面的构建。 5. **数据同步**：jQuery Mobile支持内容同步更新发布，这在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值