jQuery整理笔记七----几个经典表单应用

最新推荐文章于 2021-08-31 08:58:27 发布
最新推荐文章于 2021-08-31 08:58:27 发布
阅读量145 收藏
点赞数
分类专栏： jQuery整理笔记七----几个经典表单应用 文章标签： jquery ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gdn_wolf/article/details/84602752
版权
[color=red]原文：http://blog.csdn.net/caohaicheng/article/details/24802613
[/color]

1、文本框获得(失去)焦点
当文本框获得输入焦点时,将该文本框高亮显示，算不得一个应用，只是一个小技巧，可以提高用户体验。
[html] view plaincopy在CODE上查看代码片派生到我的代码片
<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body{
font:normal 12px/17px Arial;
}
div{
padding:2px;
}
input, textarea {
width: 12em;
border: 1px solid #888;
}
.focus {
border: 1px solid #f00;
background: #fcc;
}
</style>
<!-- 引入jQuery -->
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
if($(this).val() ==this.defaultValue){
$(this).val("");
}
}).blur(function(){
$(this).removeClass("focus");
if ($(this).val() == '') {
$(this).val(this.defaultValue);
}
});
})
</script>
</head>
<body>
<form action="" method="post" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username">名称:</label>
<input id="username" type="text" value="名称" />
</div>
<div>
<label for="pass">密码:</label>
<input id="pass" type="password" value="密码" />
</div>
<div>
<label for="msg">详细信息:</label>
<textarea id="msg" rows="2" cols="20">详细信息</textarea>
</div>
</fieldset>
</form>
</body>
</html></span>

效果图：

2、Elastic弹性文本域
Elastic是一款功能专一的表单插件，他可以控制页面内表单域(<textarea>)标签高度自动伸缩，以适应包含的文本。应用这个插件的时候页面需要引入jquery.elastic.source.js。
插件下载地址：点击进入下载页面
[html] view plaincopy在CODE上查看代码片派生到我的代码片
<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="jquery.elastic.source.js" type="text/javascript" ></script>
<script type="text/javascript">
//页面加载方法
$(function(){
$("textarea").elastic();//应用弹性文本框
})
</script>
</head>

<body>
<textarea name="" rows="2" cols="43">
沁园春·雪
北国风光，千里冰封，万里雪飘。

望长城内外，惟余莽莽；大河上下，顿失滔滔。

山舞银蛇，原驱蜡象，欲与天公试比高。

须晴日，看红装素裹，分外妖娆。

江山如此多娇，引无数英雄竞折腰。

惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。

一代天骄，成吉思汗，只识弯弓射大雕。

俱往矣，数风流人物，还看今朝。
</textarea>
</body>
</html></span>

效果图：

我们最初设置的<textarea>标签的rows属性值为2 ,随着文本内容的增多高度会自动增加，当然了，随着内容的减少也可以高度降低的。
3、Autotab自动Tab文本框
Autotab也是一款功能专一的表单插件，它提供了自动跳格的功能，当用户输入的字符数一旦超过已定义的最大长度，则会根据事先设置的目标自动跳转到相应元素上，省却了
用户按【Tab】键的麻烦。最典型的应用就是输入IP地址、软件激活码等地方了，我们做的web项目中也有很多地方可以用到这插件，对于提高用户体验还是很有帮助的。
使用时需要引入jquery.autotab.js,下载地址：点击进入下载页面
[html] view plaincopy在CODE上查看代码片派生到我的代码片
<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="jquery.autotab.js" type="text/javascript"></script>
<script type="text/javascript">
//页面加载方法
$(function(){
$('#autotab').submit(function(){
return false;
})
$('#autotab :input').autotab_magic();//为页面文本框绑定autotab插件
})
</script>
</head>

<body>
<h1>jQuery整理笔记七</h1>
<h2>Autotab自动Tab文本框</h2>
<form method="post" action="" id="autotab">
<label>请输入验证码：
<input type="text" name="num1" id="num1" maxlength="3" size="3">
<input type="text" name="num2" id="num2" maxlength="3" size="3">
<input type="text" name="num3" id="num3" maxlength="3" size="3">
<input type="text" name="num4" id="num4" maxlength="3" size="3">
<input type="text" name="num5" id="num5" maxlength="3" size="3">
<input type="text" name="num6" id="num6" maxlength="3" size="3">
</form>
</body>
</html></span>

除了可以限定输入长度外，还可以通过autotab_filter()方法限定输入的字符类型，这个方法还能过滤大写、小写、空格、字母等，具体的用到了现查吧。
如果将上面的js改成：
[html] view plaincopy在CODE上查看代码片派生到我的代码片
<span style="font-family:SimSun;font-size:12px;">$(function(){
$('#autotab').submit(function(){
return false;
});
$('#autotab :input').autotab_magic().autotab_filter('numeric');
})</span>
就是只能输入数字了。
4、passwordStrength密码强度指标
passwordStrength插件能够根据用户输入的密码,以图形化方式显示密码的强度。
[html] view plaincopy在CODE上查看代码片派生到我的代码片
<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>passwordStrength</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="passwordStrength.js"></script>
<script type="text/javascript">
$(function(){
$('input[name="password"]').passwordStrength();
})
</script>
<style type="text/css">
.is0{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;margin:10px 0 0 104px;}
.is10{background-position:0 -7px;}
.is20{background-position:0 -14px;}
.is30{background-position:0 -21px;}
.is40{background-position:0 -28px;}
.is50{background-position:0 -35px;}
.is60{background-position:0 -42px;}
.is70{background-position:0 -49px;}
.is80{background-position:0 -56px;}
.is90{background-position:0 -63px;}
.is100{background-position:0 -70px;}

#autotab input { width:138px; }
</style>
</head>
<body>
<h1>jQuery整理笔记七</h1>
<h2>表单开发（Forms）</h2>
<hr />
<h3>passwordStrength密码强度指标</h3>
<form action="" method="post" id="autotab" class="p1">
<label>请输入密码：
<input type="password" name="password" />
<div id="passwordStrengthDiv" class="is0"></div>
</label>
</form>
</body>
</html></span>
上例用到一个图片：

执行效果图：

5、formToWizard表单填充向导
这个是什么意思呢？其实我们实际见的也很多，有很多网站填写注册信息的时候是分步进行的，比方说，先填写个人信息，然后再填写工作信息...然后一起提交。这就避免了庞
大的信息量都在一个页面上进行填写。
formToWizard就是解决这个问题的一个小插件，插件下载地址:点击进入下载页面
[html] view plaincopy在CODE上查看代码片派生到我的代码片
<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="formToWizard.js"></script>
<script type="text/javascript">
//页面加载方法
$(function(){
$("#form1").formToWizard({ submitButton: 'SaveAccount' })
})
</script>
<style type="text/css">
#wrap { margin:1em 4em; font-size:12px; padding:1em 1em; border:solid 1px #fff; }
fieldset { border:none; width:320px; }
legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold; }
label { display:block; margin:15px 0 5px; }
input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #000; }
.prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none; }
.prev:hover, .next:hover { background-color:#000; text-decoration:none; }
.prev { float:left; }
.next { float:right; }
#steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px; }
#steps li { font-size:24px; float:left; padding:10px; color:#b0b1b3; }
#steps li span { font-size:11px; display:block; }
#steps li.current { color:#000; }
#makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px; }
#makeWizard:hover { background-color:#000; }
</style>
</head>

<body>
<div id="wrap">
<form id="form1" action="">
<fieldset>
<legend>登录信息</legend>
<label for="Name">昵称</label>
<input id="Name" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
<label for="Password">密码</label>
<input id="Password" type="password" />
</fieldset>
<fieldset>
<legend>公司信息</legend>
<label for="CompanyName">公司名称</label>
<input id="CompanyName" type="text" />
<label for="Website">公司网址</label>
<input id="Website" type="text" />
<label for="CompanyEmail">公司邮箱</label>
<input id="CompanyEmail" type="text" />
</fieldset>
<fieldset>
<legend>个人信息</legend>
<label for="NameOnCard">真实姓名</label>
<input id="NameOnCard" type="text" />
<label for="CardNumber">身份证号</label>
<input id="CardNumber" type="text" />
<label for="CreditcardMonth">发卡日期</label>
<select id="CreditcardMonth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="CreditcardYear">
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
</select>
<label for="Address1">地址1</label>
<input id="Address1" type="text" />
<label for="Address2">地址2</label>
<input id="Address2" type="text" />
<label for="City">城市</label>
<input id="City" type="text" />
<label for="Country">国家</label>
<select id="Country">
<option value="CA">Canada</option>
<option value="US">United States of America</option>
<option value="GB">United Kingdom (Great Britain)</option>
<option value="AU">Australia</option>
<option value="JP">Japan</option>
</select>
</fieldset>
<div>
<input id="SaveAccount" type="button" value="提交表单" />
</div>
</div>
</form>
</body>
</html>
</span>

效果图：


6、checkbox复选框(全选反选等操作)
以前经常用，不说了。
7、下拉框的应用
这回先看个图：

大家肯定都见过类似效果的网页，怎么实现的呢,代码很简单：
[html] view plaincopy在CODE上查看代码片派生到我的代码片
<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
div.centent {
float:left;
text-align: center;
margin: 10px;
}
span {
display:block;
margin:2px 2px;
padding:4px 10px;
background:#898989;
cursor:pointer;
font-size:12px;
color:white;
}
</style>
<!-- 引入jQuery -->
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//移到右边
$('#add').click(function() {
//获取选中的选项，删除并追加给对方
$('#select1 option:selected').appendTo('#select2');
});
//移到左边
$('#remove').click(function() {
$('#select2 option:selected').appendTo('#select1');
});
//全部移到右边
$('#add_all').click(function() {
//获取全部的选项,删除并追加给对方
$('#select1 option').appendTo('#select2');
});
//全部移到左边
$('#remove_all').click(function() {
$('#select2 option').appendTo('#select1');
});
//双击选项
$('#select1').dblclick(function(){ //绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo('#select2'); //追加给对方
});
//双击选项
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1');
});
});
</script>

</head>
<body>
<div class="centent">
<select multiple="multiple" id="select1" style="width:100px;height:160px;">
<option value="1">曹操</option>
<option value="2">曹昂</option>
<option value="3">曹丕</option>
<option value="4">曹彰</option>
<option value="5">曹植</option>
<option value="6">曹熊</option>
<option value="7">曹仁</option>
<option value="8">曹洪</option>
<option value="9">曹休</option>
<option value="10">曹真</option>
<option value="11">曹爽</option>
</select>
<div>
<span id="add" >选中添加到右边>></span>
<span id="add_all" >全部添加到右边>></span>
</div>
</div>
<div class="centent">
<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
<option value="12">曹芳</option>
</select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
</body>
</html></span>

代码实现的功能：
1)、将选中的选项添加给对方
2)、将全部选项添加给对方
3)、双击某个选项将其添加给对方
gdn_wolf
关注
专栏目录
jQuery整理笔记二----jQuery选择器整理
曹海成的专栏
04-19 2661
一、基本选择器 1、ID选择器 JavaScript提供了原生方法实现在DOM中选择指定ID值得元素。用法如下： var element=document.getElementById("id"); jQuery简化了其操作： var $element=$("#id"); 实际上就是 jQuery对javaScript进行了一下包装，jQuery的ID选择方法在执行效率上要低于JavaS
jQuery学习笔记之 Ajax操作篇（一） - 数据加载
10-25
在jQuery中，我们可以通过几个专门的函数来实现不同格式数据的加载。 ##### 加载HTML片段 使用`.load()`方法可以加载服务器上的HTML片段，并将其插入到指定的DOM元素中。例如，我们可以在按钮的点击事件中使用`....
jQuery中$.fn的用法示例介绍
qq_26472621的博客
10-20 257
1.jquery 我不理解$. 还有 $.fn的含义 这个是jquery插件的形式，举个例子： <div id="myDiv"></div> (function($){ $.fn.extend({ test:function(){ alert($(this).attr('id')); } }) })(jQuery) $...
用JavaScript实现的简单Wizard
new is I
03-12 213
本文链接：http://blog.csdn.net/kongxx/article/details/7343529 今天分享一个自己几年前用JavaScript写的Wizard，代码不多，另外我也没有添加任何样式，因为毕竟如果有人要用一般还都是会设计自己的样式的。 下面是Wizard的JavaScript代码，代码比较简单，就不多做解释了，wizard.js代码内容如下： xx = {}; xx....
jquery wizard
diao21的博客
11-09 177
function deviceWizardAdd() { $.ajax({ type: "get", url: "./deviceWizardAdd.jsp", cache: false, success: function(jsp){ $("body").append(jsp); $("#S...
jQuery整理笔记七----几个经典表单应用 .
saywangse的专栏
05-15 467
登录 | 注册 收藏成功 确定 收藏失败，请重新收藏 确定 标题 标题不能为空 网址 标签 摘要 公开 取消收藏 全部设为已读查看所有通知
《锋利的jQuery》的读书笔记 -- jQuery应用实例
我飞故我在的专栏
11-12 1042
jQuery应用实例
jQuery入门笔记总结-pink老师
jxmchou的博客
08-31 1752
jquery入门笔记整理
jQuery整理笔记2----jQuery选择整理
weixin_34120274的博客
08-14 69
一个、基本的选择 1、ID选择器 JavaScript提供了原生方法实如今DOM中选择指定ID值得元素。使用方法例如以下： var element=document.getElementById("id"); jQuery简化了其操作： var $element=$("#id"); 实际上就是 jQuery对javaScript进行了一下包装，jQuery的ID选择方法在...
jQuery整理笔记五----jQuery事件
曹海成的专栏
04-26 3221
jQuery中的事件 一、事件 1、加载DOM $(document).ready() 这个第一节里详细介绍了 2、事件绑定 jQuery定义了bind()方法作为统一的接口，用来为每一个匹配元素绑定事件处理程序。其基本语法如下： bind(type,[data],fn); 其中参数type表示事件类型，参数data是可选参数,它可以作为event.data属
JQuery 学习笔记 element属性控制
10-29
根据提供的HTML代码示例，我们可以看到几个具体的`.attr()`方法的应用实例： 1. **在文本输入框中显示`div`的`id`属性值** - 方法1：`$("#aAttr1").click(function(){ $(":text").attr("value", $("#divTest")....
jQuery学习总结笔记
05-08
jQuery 是一个广泛使用的 JavaScript 库，它通过简化 DOM 操作、事件处理、动画效果和Ajax交互，极大地提高了前端开发的效率。jQuery 以其简洁的API和良好的浏览器兼容性深受开发者喜爱，尤其在需要支持旧版IE浏览器...
JQuery笔记(表单验证).
03-01
JQuery 是一个流行的JavaScript库，它极大地简化了网页的交互和动态化操作。在Web开发中，表单验证是必不可少的一环，确保用户输入的数据符合预期格式和规则。`jQuery Validate` 插件就是用于此类任务的一个强大工具...
手工标注的包含两层类别结构的网页分类数据集_Hierarchical-WebSite-Theme-DataSet_SCU.zip
10-01
手工标注的包含两层类别结构的网页分类数据集_Hierarchical-WebSite-Theme-DataSet_SCU
基于粒子群算法的电力系统最优潮流 以IEEE30节点的六机为对象，建立考虑功率平衡、机组爬坡约束、出力限制约束的电力系统经济调
10-01
基于粒子群算法的电力系统最优潮流 以IEEE30节点的六机为对象，建立考虑功率平衡、机组爬坡约束、出力限制约束的电力系统经济调度模型，采用粒子群算法对模型进行求解，得到六个机组的最优运行计划，确定系统最优运行成本。 这段程序主要是一个基于粒子群优化算法（PSO）的电力系统调度程序。它用于优化电力系统中火电、风电和光伏发电机组的出力，以实现最小化发电成本和最小化失负荷量的目标。 该程序的主要功能是根据给定的负荷数据、初始机组出力和风光发电数据，通过PSO算法求解最优的机组出力方案。它涉及到的领域是电力系统调度和优化。 程序的主要思路如下： 1. 首先，定义了一些参数，如最大迭代次数、搜索空间维数、粒子个数等。 2. 然后，加载了电力系统的一些数据，包括机组的发电成本、负荷数据、风电数据和光伏数据。 3. 接下来，使用PSO算法对每个小时的机组出力进行优化，得到最优的机组出力方案。 4. 计算每个小时的发电成本、失负荷量、弃风弃光量等指标。 5. 绘制机组出力曲线、风电出力曲线、光伏出力曲线、负荷曲线和成本变化曲线。 程序中还包含一个名为"pso"的子函数，用于实现PSO算法的主要
基于微信小程序的四六级词汇的开题报告.docx
10-01
基于微信小程序的四六级词汇的开题报告.docx
【超强组合】基于matlab黑翅鸢算法BKA-BP-Adaboost数据分类预测【含Matlab源码 8146期】.zip
10-01
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2023b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化-BP-Adaboost数据分类预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化-BP-Adaboost数据分类预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化-BP-Adaboost数据分类预测 4.4.3 灰狼算法GWO/狼群算法WPA优化-BP-Adaboost数据分类预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化-BP-Adaboost数据分类预测 4.4.5 萤火虫算法FA/差分算法DE优化-BP-Adaboost数据分类预测 4.4.6 其他优化算法优化-BP-Adaboost数据分类预测
批处理修复桌面异常图标
最新发布
10-01
在Windows 操作系统中，用户可能会遇到各种与桌面图标相关的问题，如图标重叠、图标不显示或者图标之间的间距异常。"Win桌面图标修复工具"正是为了解决这些困扰用户的问题而设计的。这个工具能够有效地帮助用户修复这些问题，使Windows 的桌面环境恢复正常，提供更加整洁、有序的视觉体验。 1. **图标重叠问题**：在某些情况下，由于系统错误或第三方应用的冲突，Windows 11桌面的图标可能出现重叠现象，导致用户难以正常访问或区分各个图标。Win11桌面图标修复工具通过重新排列和定位桌面图标，自动解决这种重叠问题，让用户能够清晰地看到每个图标的完整内容。 2. **图标不显示**：有时候，部分桌面图标可能因系统更新、驱动程序冲突或文件损坏而不显示。该工具能检测并修复可能导致图标不显示的潜在问题，如缓存文件损坏或注册表错误，恢复图标显示，确保用户可以正常使用所有应用程序。 3. **图标间距过大或过小**：在Windows 中，用户可能发现图标之间的间距突然变得过大或过小，这可能是系统设置出现问题或被意外更改。修复工具会调整桌面图标的间距，使其恢复到默认状态。
JQuery学习笔记：选择符与DOM操作详解
以下将详细介绍几个关键知识点： 1. **选择符与DOM操作**: - $()函数是jQuery的核心，它能替代传统的for循环，通过选择器获取页面中的元素，并将结果封装为一个jQuery对象。这种方式可以避免多个jQuery库之间的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值