jQuery对表单的操作

对文本框最用的操作就是当用户选中文本框时它的颜色变化，当失去焦点时恢复为原来的样式。

首先定义一个焦点的样式

.focus{
  border: 1px solid #f00;
  background: #f00;
}

然后为元素设置focus和blur事件的响应函数。

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

对于textarea也可以这么使用，我们也可以通过jQuery动态改变textarea的高度。html页面设置2个按扭，点击这两个按钮可以增加或者减少textarea的高度。我们为这2个按钮增加鼠标点击事件就可以

var $comment = $("#comment");
 $(".bigger").click(function(){
  if($comment.height() < 500){
    $comment.height($comment.height() + 50);
  }
});
$(".smaller").click(function(){
  if($comment.height() > 50){
    $comment.height($comment.height() - 50);
  }
});

对于textarea还有一个操作，也就是滚动条上下滚动的操作，也和上面一样，只是把height方法改成scrollTop方法就行了。

接下来对多选框进行操作。

你爱好的运动是？

  足球
  篮球
  羽毛球    
  乒乓球

  
  
  
  

按下这4个按钮分别进行相应的操作：

$(document).ready(function(){
  $("#CheckedAll").click(function(){
    $("form input[name=items]:checkbox").prop("checked", "checked");
  });
    
  $("#CheckedNo").click(function(){
    $("form input[name=items]:checkbox").prop("checked", false);
  });
    
  $("#CheckedRev").click(function(){
    $checked = $("form input[name=items]:checkbox");
    $checked.each(function(){
      $(this).prop("checked", !$(this).prop("checked"));
    });
  });
    
  $("#send").click(function(){
    var str = "你选中的是\n";
    $("form input[name=items]:checkbox:checked").each(function(){   
      str += $(this).val() + "\n";
    });
    alert(str);
  });
});

对于表单的操作还有一个最常用的就是表单验证。比如我们有以下代码

  

    用户名：
    
  
  

    
  

我们想要把用户名设置为必须输入的项，在显示的时候在用户名文本框后加上*字符。在输入用户名的时候至少需要输入6个字符，如果用户停止输入的时候发现少于6个字符则提醒用户。还有在用户提交的时候如果用户名输入符合规范则不提交。

$(document).ready(function(){
    $("form :input.required").each(function(){
        var $required = $("*");
        $(this).parent().append($required);
    });
    
    $("form input").blur(function(){
        var $parent = $(this).parent();
        if($(this).is("#username")){
            $parent.find(".msg").remove();
            if(this.value == "" || this.value.length < 6){
                var errorMsg = "请输入至少6位用户名";
                $parent.append("" + errorMsg + "");
            } else {
                var okMsg = "输入正确";
                $parent.append("" + okMsg + "");
            }
        }
    }).keyup(function(){
        $(this).triggerHandler("blur");
    });
    
    $("#send").click(function(){
        $("form .required:input").trigger("blur");
        var error = $("form .error").length;
        if(error){
            return false;
        }
        alert("成功");
    });
});