详解jQuery简单的表单应用


Posted in Javascript onDecember 16, 2016

大致介绍

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

单行文本框

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

基本结构:

<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');
 });
 });

效果

详解jQuery简单的表单应用

多行文本框应用

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 ); 
 }
 });
 });

效果:

详解jQuery简单的表单应用

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);
 }
 });
 });

效果:

详解jQuery简单的表单应用

复选框应用

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

基本样式:

<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);
 });

效果:

详解jQuery简单的表单应用

下拉框应用

基本结构:

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

效果:

详解jQuery简单的表单应用

表单应用

基本结构:

<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("注册成功");
 });

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
JS求平均值的小例子
Nov 29 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 #Javascript
简单三步实现报表页面集成天气
Dec 15 #Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 #Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 #Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 #Javascript
javascript数组去重方法分析
Dec 15 #Javascript
JS碰撞运动实现方法详解
Dec 15 #Javascript
You might like
在Windows版的PHP中使用ADO
2006/10/09 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
TensorFlow实现iris数据集线性回归
2018/09/07 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python虚拟环境完美部署教程
2019/08/06 Python
python读取指定字节长度的文本方法
2019/08/27 Python
python实现宿舍管理系统
2019/11/22 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
大学军训感言1000字
2014/02/25 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
学生期末评语大全
2014/04/30 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
平安建设汇报材料
2014/12/29 职场文书