jQuery对表单的操作代码集合
jQuery对表单的操作代码集合
发布时间:2016-12-30 来源:查字典编辑
摘要:改变文本框的获得焦点的样式复制代码代码如下:个人基本信息名称:首先在css中添加一个类名为focus的样式。css代码如下:复制代码代码如下...

改变文本框的获得焦点的样式

复制代码 代码如下:

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

<div>

<span>放大</span>

<span>缩小</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 = "你选中的是:rn";

$('[name=items]:checkbox:checked').each(function(){

str += $(this).val()+'rn'})

alert(str);

);

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类