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的一些总结
Nov 03 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
安装vue-cli的简易过程
May 22 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
JS中==、===你分清楚了吗
Mar 04 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 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获取当前url的具体方法全面解析
2013/11/26 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
js实现时钟定时器
2020/03/26 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
学校节能减排倡议书
2014/05/16 职场文书
三严三实心得体会范文
2014/10/13 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
施工安全员岗位职责
2015/04/11 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS