详解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学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
浅谈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的FTP学习(二)[转自奥索]
2006/10/09 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
Vue SSR 组件加载问题
2018/05/02 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
医院办公室主任职责
2013/12/29 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
小学生倡议书范文
2014/05/13 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS