详解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 相关文章推荐
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
koa-router源码学习小结
Sep 07 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 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
如何用PHP实现插入排序?
2013/04/10 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
基于Django的python验证码(实例讲解)
2017/10/23 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
对python 自定义协议的方法详解
2019/02/13 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
Django中FilePathField字段的用法
2020/05/21 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
品管员岗位职责
2013/11/10 职场文书
公务员转正考察材料
2014/02/07 职场文书
创业计划书之书店
2019/09/10 职场文书
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers