5.1 《锋利的jQuery》jQuery对表单的操作

1. 获取焦点和失去焦点改变样式
2. 改变文本框/滚动条高度
3. 复选框应用
4. 下拉框应用
5. 表单验证

tip1：

注意使用<label>的for标签，对应input的id。（for 属性规定 label 与哪个表单元素绑定。）

tip2:

注意：jquery从1.6版本开始，哪些属性应该用attr()访问，哪些应该用prop()访问。

第一个原则：只添加属性名称该属性就会生效应该使用prop();

第二个原则：只存在true/false的属性应该使用prop();

按照官方说明，如果是设置disabled和checked这些属性，应使用prop()方法，而不是attr()方法。

1、获取焦点和失去焦点改变样式

input:focus,textarea:focus{
            border: 1px solid #ff3300;
            background-color: #fcc;
        }
        /*IE6并不支持除超链接元素之外的:hover伪类选择符。*/

so，

$(":input").focus(function(){
            $(this).addClass("focus");
        }).blur(function(){
            $(this).removeClass("focus");
        });
//        :input表示选择表单中的input,select,textarea,button元素，input仅仅选择input元素。

2、改变文本框/滚动条高度

        var $comment=$("#commnet");
        $(".bigger").click(function(){
            if($comment.is(":animated")){
//                if($comment.height()<500){
//                    $comment.animate({height:"+=50"},400);
//                }  //高度变大
                $comment.animate({scrollTop:"-=50"},400); //向上滚动
            }
        });
        $(".smaller").click(function(){
            if($comment.is(":animated")){
//                if($comment.height()>50){
//                    $comment.animate({height:"-=50"},400);
//                }   //高度变小
                $comment.animate({scrollTop:"+=50"},400); //向下滚动
            }
        })

3、复选框应用

    <form action="#" method="post" id="regForm">
        你爱好的运动是？
        <input type="checkbox" id="CheckAll">全选/全不选
        <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="CheckRev" value="反选">
        <input type="button" id="send" value="提交">
    </form>

    $(function () {
//        全选/全不选
        $("#CheckAll").click(function () {
            $("[name=items]:checkbox").prop("checked", this.checked);
        });
//        反选
        $("#CheckRev").click(function () {
            $("[name=items]:checkbox").each(function () {
                this.checked = !this.checked;
            })
        });
//        提交
        $("#send").click(function () {
            var str = "你选择中的是:";
            $("[name=items]:checkbox:checked").each(function () {
                str += $(this).val() + "/";
            })
            alert(str);
        })
//        跟全选联动
        $("[name=items]:checkbox,#CheckRev").click(function(){  //#CheckRev添加了反选的联动
            var flag=true;
            $("[name=items]:checkbox").each(function(){
                if(!this.checked){
                    flag=false;
                }
            });
            $("#CheckAll").prop("checked",flag);
        })
    });

4、下拉框应用

<div class="fz">
    <div class="content l">
        <select multiple id="select1" style="width: 100px; height: 160px;">
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
            <option value="5">选项5</option>
            <option value="6">选项6</option>
            <option value="7">选项7</option>
            <option value="8">选项8</option>
        </select>
        <div>
            <span id="add">选中添加到右边&gt;&gt;</span><br/>
            <span id="add_all">全部添加到右边&gt;&gt;</span>
        </div>
    </div>
    <div class="content l">
        <select multiple id="select2" style="width: 100px; height: 160px;"></select>
        <div>
            <span id="remove">&lt;&lt;选中删除到左边</span><br/>
            <span id="remove_all">&lt;&lt;全部删除到左边</span>
        </div>
    </div>
</div>

    $(function () {
//        选中添加到右边
        $("#add").click(function(){
            var $option=$("#select1 option:selected");
//            var $remove=$option.remove();
//            $remove.appendTo("#select2");
//            删除和追加可以用appendTo()方法直接完成
            $option.appendTo("#select2");
        });
//        全部添加到右边
        $("#add_all").click(function(){
            var $option=$("#select1 option");
            $option.appendTo("#select2");
        });
//        双击添加到右边
        $("#select1").dblclick(function(){
            var $option=$("option:selected",this);
            $option.appendTo("#select2");
        })
    });

5、表单验证：

 <form method="post" action="">
        <div class="int">
            <label for="username">用户名：</label>
            <input type="text" id="username" class="required">
        </div>
        <div class="int">
            <label for="email">邮箱：</label>
            <input type="text" id="email" class="required">
        </div>
        <div class="int">
            <label for="personinfo">个人资料：</label>
            <input type="text" id="personinfo">
        </div>
        <div class="sub">
            <input type="submit" value="提交" id="send"> <input type="reset" id="res">
        </div>
    </form>

    $(function () {
        $("form :input.required").each(function(){
            var $required=$("<strong class='red'>*</strong>");
            $(this).parent().append($required);
        });
        $("form :input").blur(function(){
            $parent=$(this).parent();
            $parent.find(".formtips").remove();
//            验证用户名
            if($(this).is("#username")){
                if(this.value==""||this.value.length<6){
                    var errorMsg="请输入至少6位数的用户名";
                    $parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
                }else{
                    var okMsg="输入正确";
                    $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
                }
            }
//            验证邮箱
            if($(this).is("#email")){
                if(this.value==""||this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)){
                    var errorMsg="请输入正确的email";
                    $parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
                }else{
                    var okMsg="输入正确";
                    $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
                }
            }
        }).keyup(function(){                //新增，keyup()用户每次松开按键的时候触发
            $(this).triggerHandler("blur");  //trigger()不仅会触发为元素绑定的blur事件，也会触发浏览器默认的blur事件，
            // 即不能将光标定位到文本框上。而triggerHander("blur")只会触发为元素绑定的blur，而不触发浏览器默认的blur事件
        }).focus(function(){               //新增，focus()元素得到焦点的时候触发
            $(this).triggerHandler("blur");
        });
//        表单提交
        $("#send").click(function(){
            $("form .required:input").trigger("blur");
            var numError=$("form .onError").length;
            if(numError){
                return false;
            }else{
                alert("注册成功！");
            }
        })
    });