jQuery对表单的操作代码集合

 更新时间:2011年04月06日 23:24:03   作者:  
jQuery对表单的操作代码集合,学习jquery的朋友可以参考下。
改变文本框的获得焦点的样式
复制代码 代码如下:

<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);
);

相关文章

  • 初窥JQuery-Jquery简介 入门了解篇

    初窥JQuery-Jquery简介 入门了解篇

    JQuery是一种非常灵活的脚本库,JQuery库为Web脚本编程提供了通用的抽象层,已经是比较流行的js框架了。
    2010-11-11
  • jQuery插件bgStretcher.js实现全屏背景特效

    jQuery插件bgStretcher.js实现全屏背景特效

    可以自动动态更换网页背景图片的jQuery插件bgstretcher.js,sharejs.com推荐的这个插件,可以自定义多种方式让网页背景自动切换,效果流畅,非常难得,调用代码也非常简单。
    2015-06-06
  • jquery进行数组遍历如何跳出当前的each循环

    jquery进行数组遍历如何跳出当前的each循环

    通过 jquery 的循环方法进行数组遍历,但是当不符合条件时,怎么跳出当前循环,解决方法如下,需要的朋友可以参考下
    2014-06-06
  • 基于jQuery实现的向下滑动二级菜单效果代码

    基于jQuery实现的向下滑动二级菜单效果代码

    这篇文章主要介绍了基于jQuery实现的向下滑动二级菜单效果代码,通过jquery鼠标事件控制针对页面元素的链式操作实现菜单切换的功能,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • jQuery 操作 HTML 元素和属性的方法

    jQuery 操作 HTML 元素和属性的方法

    这篇文章主要介绍了jQuery 操作 HTML 元素和属性的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • jQuery操作value值方法介绍

    jQuery操作value值方法介绍

    这篇文章介绍了jQuery操作value值的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • JQuery实现倒计时按钮的实现代码

    JQuery实现倒计时按钮的实现代码

    页面中需要实现某个按钮点击完后,禁用它,并显示倒计时。这个默认是3秒,代码很简单
    2012-03-03
  • jQuery实现给input绑定回车事件的方法

    jQuery实现给input绑定回车事件的方法

    这篇文章主要介绍了jQuery实现给input绑定回车事件的方法,结合实例形式分析了2种常用的事件绑定操作技巧,需要的朋友可以参考下
    2017-02-02
  • jQuery 限制输入字符串长度

    jQuery 限制输入字符串长度

    这篇文章主要介绍了jQuery限制输入字符串长度的方法,实例讲解,非常实用,需要的朋友可以参考下。
    2016-06-06
  • JQuery Tips(4) 一些关于提高JQuery性能的Tips

    JQuery Tips(4) 一些关于提高JQuery性能的Tips

    如今咱祖国已经崛起了..电脑的配置也是直线上升.可是js的性能问题依然不可小觑..尤其在万恶的IE中..js引擎速度本来就慢..如果JS如果再写不好,客户端多开几个窗口假死肯定是家常便饭了.废话不说了,下面说说js性能提升的一些小Tips.
    2009-12-12

最新评论