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 相关文章推荐
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
小程序中设置缓存过期的实现方法
Jan 14 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
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
一个用php实现的获取URL信息的类
2007/01/02 PHP
一个数据采集类
2007/02/14 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
Python显示进度条的方法
2014/09/20 Python
wxPython窗口中文乱码解决方法
2014/10/11 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
python实现银行实战系统
2020/02/26 Python
python中setuptools的作用是什么
2020/06/19 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
设计毕业生简历中的自我评价
2013/10/01 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
装修活动策划方案
2014/08/27 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
mysql中between的边界,范围说明
2021/06/08 MySQL
Python 发送SMTP邮件的简单教程
2021/06/24 Python