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 相关文章推荐
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
JS功能代码集锦
May 04 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
Array.filter中如何正确使用Async
Nov 04 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与javascript对多项选择的处理
2006/10/09 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
php权重计算方法代码分享
2014/01/09 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
详解原生JS动态添加和删除类
2019/03/26 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
python继承和抽象类的实现方法
2015/01/14 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
python实现人机猜拳小游戏
2020/02/03 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
小学三年级数学教学反思
2014/01/31 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
幼儿园教师求职信
2015/03/20 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL