对文本框最用的操作就是当用户选中文本框时它的颜色变化，当失去焦点时恢复为原来的样式。
首先定义一个焦点的样式
.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方法就行了。
接下来对多选框进行操作。
<form action="#">
你爱好的运动是？<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="乒乓球" />乒乓球<br />
<input type="button" id="CheckedAll" value="全选">
<input type="button" id="CheckedNo" value="全不选">
<input type="button" id="CheckedRev" value="反选">
<input type="button" id="send" value="提交">
</form>
按下这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);
});
});
对于表单的操作还有一个最常用的就是表单验证。比如我们有以下代码
<form action="#" >
<div class="int">
<label for="username">用户名：</label>
<input type="text" id="username" class="required" />
</div>
<div class="sub">
<input type="submit" value="提交" id="send"/>
</div>
</form>
我们想要把用户名设置为必须输入的项，在显示的时候在用户名文本框后加上*字符。在输入用户名的时候至少需要输入6个字符，如果用户停止输入的时候发现少于6个字符则提醒用户。还有在用户提交的时候如果用户名输入符合规范则不提交。
$(document).ready(function(){
$("form :input.required").each(function(){
var $required = $("<strong>*</strong>");
$(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("<span class=\"msg error\">" + errorMsg + "</span>");
} else {
var okMsg = "输入正确";
$parent.append("<span class=\"msg\">" + okMsg + "</span>");
}
}
}).keyup(function(){
$(this).triggerHandler("blur");
});
$("#send").click(function(){
$("form .required:input").trigger("blur");
var error = $("form .error").length;
if(error){
return false;
}
alert("成功");
});
});