详解jQuery简单的表单应用

大致介绍

接下来的这几个博客是对前面所学知识的一个简单的应用，来加深理解

单行文本框

只介绍一个简单的样式：获取和失去焦点改变样式

基本结构：

<form action="#" method="post" id="regFrom">
 <fieldset>
 <legend>个人基本信息</legend>
 <div>
 <label for="username">名称：</label>
 <input id="username" type="text" />
 </div>
 <div>
 <label for="pass">密码：</label>
 <input id="pass" type="passward" />
 </div>
 <div>
 <label for="msg">详细信息：</label>
 <textarea id="msg" ></textarea>
 </div>
 </fieldset>
 </form>

在CSS中添加一个类为focus的样式

.focus{
 border: 1px solid #f00;
 background: #fcc;
 }

然后为文本框添加获取和失去焦点事件

$(function(){
 $(':input').focus(function(){
 $(this).addClass('focus');
 }).blur(function(){
 $(this).removeClass('focus');
 });
 });

效果

多行文本框应用

1、高度变化

改变多行文本框的高度

基本结构：

<form action="#" method="POST" id="regFrom">
 <div class="msg">
 <div class="msg_caption">
 <span class="bigger">放大</span>
 <span class="small">缩小</span>
 </div>
 <div>
 <textarea id="comment" rows="8" cols="20">
  多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，多行文本框，
 </textarea>
 </div>
 </div>
 </form>

要实现的功能：

　　1、当单击“放大”按钮后，如果评论框的高度小于500px，则在原有的高度的基础上增加50px

　　1、当单击“缩小”按钮后，如果评论框的高度大于50px，则在原有的高度的基础上减少50px

添加事件：

$(function(){
 var $comment = $('#comment');
 $('.bigger').click(function(){
 if($comment.height() < 500){
 $comment.height( $comment.height() + 50 );
 }
 });
 $('.small').click(function(){
 if($comment.height() > 50){
 $comment.height( $comment.height() - 50 ); 
 }
 });
 });

效果：

2、滚动条高度变化

添加事件：

$(function(){
 var $comment = $('#comment');
 $('.bigger').click(function(){
 if(!$comment.is(':animated')){
 $comment.animate({scrollTop : '-=50'},400);
 }
 });
 $('.small').click(function(){
 if(!$comment.is(':animated')){
 $comment.animate({scrollTop : '+=50'},400);
 }
 });
 });

效果：

复选框应用

对复选框的基本应用，就是对复选框进行全选、反选和全部选等操作

基本样式：

<form action="#" method="POST" id="regFrom">
 <p>你爱好的运动</p>
 <input type="checkbox" name="items" value="足球" />足球
 <input type="checkbox" name="items" value="篮球" />篮球
 <input type="checkbox" name="items" value="羽毛球" />羽毛球
 <input type="checkbox" name="items" value="乒乓球" />乒乓球
 <br />
 <input type="button" id="CheckedAll" value="全 选" />
 <input type="button" id="CheckedNo" value="全不选" />
 <input type="button" id="CheckedRev" value="反 选" />
 <input type="button" id="send" value="提 交" />
 </form>

添加全选按钮和全不选事件

$('#CheckedAll').click(function(){
 $('[name=items]:checkbox').attr('checked',true);
 });
 $('#CheckedNo').click(function(){
 $('[name=items]:checkbox').attr('checked',false);
 });

添加反选事件

 $('#CheckedRev').click(function(){
 $('[name=items]:checkbox').each(function(){
 this.checked = !this.checked;
 });
 });

添加提交事件：输出选中的值

var str = "你选中的是：\r\n";
 $('#send').click(function(){
 
 $('[name=items]:checkbox:checked').each(function(){
 str += $(this).val() + "\r\n";
 });
 alert(str);
 });

效果：

下拉框应用

基本结构：

<div class="centent">
 <select multiple id="select1" style="width:100px;height:160px;">
 <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>
 </select>
 <div>
 <span id="add">选中添加到右边&gt;&gt;</span><br />
 <span id="add_all">全部添加到右边&gt;&gt;</span>
 </div>
 </div>
 <div class="centent">
 <select multiple id="select2" style="width:100px;height:160px;"></select>
 <div>
 <span id="remove">&lt;&lt;选中删除到左边</span><br />
 <span id="remove_all">&lt;&lt;全部删除到左边</span>
 </div>
 </div>

实现的功能：

1、将选中的选项添加给对方

 $('#add').click(function(){
 var $options = $('#select1 option:selected');
 $options.appendTo($('#select2'));
 });

2、全部的选项添加给对方

 $('#add_all').click(function(){
 var $options = $('#select1 option');
 $options.appendTo($('#select2'));
 });

3、双击某个按钮将其添加给对方

$('#select1').dblclick(function() {
 var $options = $('option:selected');
 $options.appendTo($('#select2'));
 });

效果：

表单应用

基本结构：

<form methos="post" action="">
 <div class="int">
 <label for="username">用户名</label>
 <input type="text" id="username" class="required" />
 </div>
 <div class="int">
 <label for="email">邮箱</label>
 <input type="text" id="email" class="required" />
 </div>
 <div class="int">
 <label for="personinfo">个人资料</label>
 <input type="text" id="personinfo" />
 </div>
 <div class="sub">
 <input type="submit" value="提交" id="send" />
 <input type="reset" id="red" />
 </div>
 </form>

验证用户输入的是否正确

$('form :input').blur(function(){
 var $parent = $(this).parent();
 // 删除以前的提示元素
 $parent.find(".formtips").remove();
 // 验证用户名
 if($(this).is('#username')){
 if(this.value == '' || this.value.length < 6){
  var errorMsg = '请输入至少6位的用户名';
  $parent.append('<span class="formtips onError">'+errorMsg+' </span>');
 }else{
  var okMsg = '输入正确';
  $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
 }
 }
 // 验证邮箱
 if($(this).is('#email')){
 if(this.value == '' || (this.value != "" && !/.+@.+\.[a-zA-Z] {2,4}$/.test(this.value))){
  var errorMsg = '请输入正确的E-Mail地址';
  $parent.append('<span class="formtips onError">'+errorMsg+' </span>');
 }else{
  var okMsg = '输入正确';
  $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
 }
 }
 });

提交按钮绑定事件

// 提交按钮
 $('#send').click(function(){
 $('form .required:input').trigger('blur');
 var numError = $('form .onError').length;
 if(numError){
  return false;
 }
 alert("注册成功");
 });

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# jquery  # 表单应用  # 初探jquery——表单应用范例  # 给对方  # 复选框  # 请输入  # 则在  # 单击  # 文本框  # 全选  # 不选  # 的是  # 基础上  # 将其  # 双击  # 这几个  # 表单  # 绑定  # 是否正确  # 滚动条  # 注册成功  # 基础上增加  # 下拉框 

相关文章： 网站按钮制作软件,如何实现网页中按钮的自动点击？  上海网站制作网页,上海本地的生活网站有哪些？最好包括生活的各个方面的？  高端网站建设与定制开发一站式解决方案 中企动力  建站之星后台密码遗忘或太弱？如何重置与强化？  长春网站建设制作公司,长春的网络公司怎么样主要是能做网站的？  网站制作的步骤包括,正确网址格式怎么写？  威客平台建站流程解析：高效搭建教程与设计优化方案  建站之星2.7模板快速切换与批量管理功能操作指南  贸易公司网站制作流程,出口贸易网站设计怎么做？  如何快速辨别茅台真假？关键步骤解析  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  如何快速配置高效服务器建站软件？  如何在Tomcat中配置并部署网站项目？  如何在阿里云ECS服务器部署织梦CMS网站？  c# Task.Yield 的作用是什么 它和Task.Delay(1)有区别吗  学校免费自助建站系统：智能生成+拖拽设计+多端适配  小视频制作网站有哪些,有什么看国内小视频的网站，求推荐？  如何彻底删除建站之星生成的Banner？  如何在VPS电脑上快速搭建网站？  ,石家庄四十八中学官网？  宝华建站服务条款解析：五站合一功能与SEO优化设置指南  C++中的Pimpl idiom是什么，有什么好处？（隐藏实现）  山东云建站价格为何差异显著？  临沂网站制作企业,临沂第三中学官方网站？  移民网站制作流程,怎么看加拿大移民官网？  上海网站制作网站建设公司,建筑电工证网上查询系统入口？  深圳企业网站制作设计,在深圳如何网上全流程注册公司？  网站制作软件有哪些,制图软件有哪些？  如何选择服务器才能高效搭建专属网站？  如何在腾讯云服务器上快速搭建个人网站？  如何在橙子建站上传落地页？操作指南详解  成都网站制作价格表,现在成都广电的单独网络宽带有多少的，资费是什么情况呢？  高端智能建站公司优选：品牌定制与SEO优化一站式服务  怀化网站制作公司,怀化新生儿上户网上办理流程？  高性价比服务器租赁——企业级配置与24小时运维服务  如何通过.red域名打造高辨识度品牌网站？  建站之星logo尺寸如何设置最合适？  深圳防火门网站制作公司,深圳中天明防火门怎么编码？  模具网站制作流程,如何找模具客户？  网站插件制作软件免费下载,网页视频怎么下到本地插件？  保定网站制作方案定制,保定招聘的渠道有哪些？找工作的人一般都去哪里看招聘信息？  如何选择香港主机高效搭建外贸独立站？  寿县云建站：智能SEO优化与多行业模板快速上线指南  成都网站制作报价公司,成都工业用气开户费用？  建站主机系统SEO优化与智能配置核心关键词操作指南  ,在苏州找工作，上哪个网站比较好？  如何在Golang中实现微服务服务拆分_Golang微服务拆分与接口管理方法  建站之星如何快速更换网站模板？  哈尔滨网站建设策划,哈尔滨电工证查询网站？  如何通过VPS建站无需域名直接访问？