《锋利的jQuery》读书笔记 —— jQuery对表单、表格的操作

·单选文本框应用（获得焦点时，加了个特殊的样式，失去焦点时还原，兼容所有浏览器）
$(":input").focus(function(){ this.addClass("inputFocus"); })
           .blur(function(){ this.removeClass("inputFocus"); });

·多行文本框的应用（放大、缩小多行文本框的高度，限制最大500px，兼容所有浏览器）
var $txt = $("#textArea");
$(".bigger").click(function(){
    if( $txt.height() < 500) $txt.height( $txt.height() + 50 );
    //if( $txt.height() < 500) $txt.animate({height:"+=50"}, 500 );
});
$(".smaller").click(function(){
    if( $txt.height() > 100) $txt.height( $txt.height() - 50 );
    //if( $txt.height() < 500) $txt.animate({height:"-=50"}, 500 );
});

·复选框的应用（实现全选、全不选、反选）
$("#btnCheckedAll").click(function(){ //全选
    $("[name=items]:checkbox").attr("checked", true);
});
$("#btnCheckedNone").click(function(){ //全不选
    $("[name=items]:checkbox").attr("checked", false);
});
$("#btnCheckedRev").click(function(){ //反选
    $("[name=items]:checkbox").each(function(){
        $(this).attr("checked", !$(this).attr("checked"));
        //this.checked = !this.checked;
    }
});

·下拉框的应用（将一个下拉列表的选中项搬至另一个下拉列表）
$("#btnAdd").click(function(){ //将选中选项搬过去
    $("#mySelect1 option:selected").appendTo("#mySelect2");
});
$("#btnAddAll").click(function(){ //将全部选项搬过去
    $("#mySelect1 option").appendTo("#mySelect2");
});
$("#mySelect1").dblclick(function()[ //双击项搬过去
    $("#mySelect1 option:selected").appendTo("#mySelect2");
}

·表单验证
<form>
    <div>
        <label>用户名：</label>
        <input type="text" id="txtUid" class="required" value="" />
    </div>
</form>
$("form :input.required").each(function(){ //往每个class有required样式的input元素后面添加*号
    $(this).parent().append( $("<span class='star'>*</span>") );
});
$("form :input.required").blur(function(){ //失去焦点时验证域
    if( this.value == "" ){
        $(this).parent().append( $("<span class='error'>必填字段</span>") );
    }
    else{
        $(this).parent().append( $("<span class='success'>验证正确</span>") );
        $(this).parent().find(".error").remove();
    }
}).keyup(function(){ //用户每点一个键触发
    $(this).triggerHandler("blur");
}).focus(function(){ //控制有焦点时触发
    $(this).triggerHandler("blur");
});
$("#btnSubmit").click(function(){
    $("form :input.required").trigger("blur"); //让所有需要验证的域失去焦点
    var errNum = $("form .error").length;
    if( errNum ){
        alert("有验证字段失败，请重新填写");
        return false;
    }
});

·表格应用
$("tr:odd").addClass("oddTr"); //给奇数行添加oddTr样式
$("tr:even").addClass("evenTr"); //给偶数行添加evenTr样式

$("tr:contains('王五')").addClass("highlightTr"); //查找包含“王五”的行，添加highlightTr样式

$("tr").click(function(){
    $(this).addClass("selectedTr") //给当前行添加选中样式
           .siblings().removeClass("selectedTr") //反选移除选中样式
           .end() //结束，返回$(this)，否则则是反选的行
           .find(':radio").attr("checked",true); //在当前行查找单选框，选中它
});