改变文本框的获得焦点的样式
复制代码 代码如下:
个人基本信息
名称：
首先在css中添加一个类名为focus的样式。
css代码如下：
复制代码 代码如下:
.focus {
border: 1px solid #f00;
background: #fcc;
}
然后为文本框添加获取和失去焦点事件
复制代码 代码如下:
$(function(){
$(:input).focus(function(){
$(this).addclass(focus);
}).blur(function(){
$(this).removeclass(focus);
});
});
多行文本框的作用
设置评论框的最小高度和最大高度：
复制代码 代码如下:
放大
缩小
多行文本框高度变化
1,当单击“放大”按钮后，如果评论框的高度小于500px,则在原有高度的基础上增加50px;
2.当单击“缩小”按钮后，如果评论框的高度大于50px,则在原有高度的基础上减少50px;
复制代码 代码如下:
$(function(){
var $comment = $('#comment'); //获取评论框
$('.bigger').click(function(){
if(!$comment.is(:animated)){ //判断是否处于动画
if($comment.height() $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);
})
})
复选框的应用
基本应用：对复选框进行全选，反选，全不选操作。
复制代码 代码如下:
你爱好的运动？
足球
篮球
羽毛球
乓球球
//全选
$(#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 = 你选中的是： \n;
$('[name=items]:checkbox:checked').each(function(){
str += $(this).val()+'\r\n'})
alert(str);
);