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 相关文章推荐
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 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 Ajax中文乱码问题解决方法
2009/02/27 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
JavaScript 格式字符串的应用
2010/03/29 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
js函数调用的方式
2014/05/06 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
PyTorch安装与基本使用详解
2020/08/31 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
有个性的自我评价范文
2013/11/15 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
学校实习推荐信
2015/03/27 职场文书
Redis入门教程详解
2021/08/30 Redis
PYTHON InceptionV3模型的复现详解
2022/05/06 Python