您的位置:首页 > Web前端 > JQuery

jQuery对表单、表格的操作及更多应用

2016-04-21 13:47 537 查看
一、单行文本框应用——获取和失去焦点改变样式

$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
});


二、多行文本框应用

1、高度变化

$(function(){
var $comment=$('#comment');     //获取评论框
$('.bigger').click(function(){           //"放大"按钮绑定单击事件
if(!$comment.is(":animated")){        //判断是否处于动画
if($comment.height()<500)
{  //重新设置高度,在原有的基础上加50
$comment.animate({height:"+=50"},400);
}
}
})

$('.smaller').click(function(){           //"缩小"按钮绑定单击事件
if(!$comment.is(":animated")){        //判断是否处于动画
if($comment.height()>50)
{  //重新设置高度,在原有的基础上减50
$comment.animate({height:"-=50"},400);
}
}
});

});


2、滚动条高度变化

$(function(){
var $comment=$('#comment');     //获取评论框
$('.up').click(function(){           //"向上"按钮绑定单击事件
if(!$comment.is(":animated")){        //判断是否处于动画
$comment.animate({scrollTop:"-=50"},400);
}
})

$('.smaller').click(function(){           //"缩小"按钮绑定单击事件
if(!$comment.is(":animated")){        //判断是否处于动画
$comment.animate({scrollTop:"+=50"},400);
}
});

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: