jQuery对表单的操作代码集合


Posted in Javascript onApril 06, 2011

改变文本框的获得焦点的样式

<form action="#" method="POST" id="regForm"> 
<fieldset> 
<legend>个人基本信息</legend> 
<div> 
<label for="username">名称:</label> 
<input id="username" type="text"> 
</div> 
</fieldset> 
</form>

首先在css中添加一个类名为focus的样式。
css代码如下:
.focus { 
border: 1px solid #f00; 
background: #fcc; 
}

然后为文本框添加获取和失去焦点事件
$(function(){ 
$(":input").focus(function(){ 
$(this).addClass("focus"); 
}).blur(function(){ 
$(this).removeClass("focus"); 
}); 
});

多行文本框的作用
设置评论框的最小高度和最大高度:
<form> 
<div class="msg"> 
<div class="msg_caption"> 
<span class="bigger">放大</span> 
<span class="smaller">缩小</span> 
</div> 
<div> 
<textarea id="comment" rows="8" cols="20">多行文本框高度变化</textarea> 
</div> 
</div> 
</form>

1,当单击“放大”按钮后,如果评论框的高度小于500px,则在原有高度的基础上增加50px;
2.当单击“缩小”按钮后,如果评论框的高度大于50px,则在原有高度的基础上减少50px;
$(function(){ 
var $comment = $('#comment'); //获取评论框 
$('.bigger').click(function(){ 
if(!$comment.is(":animated")){ //判断是否处于动画 
if($comment.height() < 500){ 
$comment.animate({height : "+=50"}, 400); 
} 
} 
}) 
$('.smaller').click(function(){ 
if(!$comment.is(":animated")){ //判断是否处于动画 
if($comment.height() > 50){ 
$comment.animate({height : "-=50"}, 400); 
} 
} 
}) 
})

滚动条高度的变化
控制多行文本框滚动条的变化:
$(function(){ 
var $comment = $('#comment'); 
$('.up').click(function(){ 
if($comment.is(":animated")){ 
$comment.animate({scrollTop : "-=50"}, 400); 
} 
}) 
$('.down').click(function(){ 
if($comment.is(":animated")){ 
$comment.animate({scrollTop : "+=50"}, 400); 
}) 
})

复选框的应用
基本应用:对复选框进行全选,反选,全不选操作。
<form> 
你爱好的运动?<br/> 
<input type="checkbox" name="items" value="足球"/>足球 
<input type="checkbox" name="items" value="篮球"/>篮球 
<input type="checkbox" name="items" value="羽毛球"/>羽毛球 
<input type="checkbox" name="items" value="乒乓球"/>乓球球 
<input type="button" id="CheckedAll" value="全选"/> 
<input type="button" id="CheckedNo" value="全不选"/> 
<input type="button" id="CheckedRev" value="反选"/> 
<input type="button" id="send" value="提 交"/> 
//全选 
$("#CheckedAll").click(function(){ 
$('[name=items]:checkbox').attr('checked',true); 
}); 
//全不选 
$("#CheckedNo").click(function(){ 
$('[name=items]:checkbox').attr('checked',false); 
}); 
//反选 
$("#CheckedNo").click(function(){ 
$('[name=items]:checkbox').each(function(){ 
this.checked = !this.checked; 
})); 
//提交按钮 
$("#send").click(function(){ 
var str = "你选中的是:\r\n"; 
$('[name=items]:checkbox:checked').each(function(){ 
str += $(this).val()+'\r\n'}) 
alert(str); 
);
Javascript 相关文章推荐
JQuery筛选器全系列介绍
Aug 27 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
js实现消息滚动效果
Jan 18 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 #Javascript
jquery常用技巧及常用方法列表集合
Apr 06 #Javascript
jQuery参数列表集合
Apr 06 #Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 #Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 #Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 #Javascript
jQuery中绑定事件的命名空间详解
Apr 05 #Javascript
You might like
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
AngularJS基础知识笔记之表格
2015/05/10 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
Python实现堆排序的方法详解
2016/05/03 Python
如何用python整理附件
2018/05/13 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
pygame实现打字游戏
2021/02/19 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
python批量修改xml属性的实现方式
2020/03/05 Python
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
大专计算机个人求职的自我评价
2013/10/21 职场文书
我的求职计划书
2014/01/10 职场文书
《长征》教学反思
2014/04/27 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
党员个人自我评价
2015/03/03 职场文书