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