详解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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
Vue3.x源码调试的实现方法
Oct 13 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
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
js下利用控制器载入对应脚本
2010/07/17 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
python Opencv将图片转为字符画
2021/02/19 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2014年民政工作总结
2014/11/26 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA