單行文本框應用

<style type="text/css">
        .focus{
            border: 1px solid #000;
            background-color: #fcc;
        }
    </style>
<form action="#" method="post" id="regForm">
        <fieldset>
            <legend>個人基本信息</legend>
            <div>
                <label for="username">名稱：</label>
                <input id="username" type="text" name="">
            </div>
            <div>
                <label for="pass">密碼：</label>
                <input id="pass" type="password">
            </div>
            <div>
                <label for="msg">詳細信息：</label>
                <textarea id="msg"></textarea>
            </div>
        </fieldset>
    </form>
//獲取和失去焦點改變樣式
    <script>
        $(function(){
            $(":input").focus(function(){
                $(this).addClass("focus");
            }).blur(function(){
                $(this).removeClass("focus");
            });
        });
    </script>

多行文本框應用

<form action="#" method="post" id="">
        <div class="msg">
            <div class="msg_caption">
                <span class="bigger">放大</span>
                <span class="smaller">縮小</span>
                <span class="up" >向上</span>
                <span class="down" >向下</span>
            </div>
            <div>
                <textarea id="comment" rows="8" cols="20">
                    多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，多行文本框高度變化，
                </textarea>
            </div>
        </div>
    </form>
    <script>
    //多行文本框應用
        $(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);
                    }
                }
                
            });
            //滾動條高度變化
            $('.up').click(function(){
                if(!$comment.is(':animated')){
                    $comment.animate({scrollTop: "-=50"}, 400);
                }
            })
            $('.down').click(function(){
                if(!$comment.is(':animated')){
                    $comment.animate({scrollTop: "+=50"}, 400);
                }
            })
        });
    </script>

復選框應用(一)

<form method="post" 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="網(wǎng)球"／>網(wǎng)球
        <input type="checkbox" name="items" value="排球"／>排球
        <input type="checkbox" name="items" value="桌球"／>桌球

        <input type="button" id="checkall" value="全選"／>
        <input type="button" id="checkno" value="全不選"／>
        <input type="button" id="checkback" value="反選"／>
        <input type="button" id="send" value="提交"／>
    </form>
    <script>
        $('#checkall').click(function(){
            $('[name=items]:checkbox').attr('checked', true);
        });
        $('#checkno').click(function(){
            $('[name=items]:checkbox').attr('checked', false);
        });
        $('#checkback').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);
        })
    </script>

復選框應用(二)

<form method="post" action="">
   你愛好的運動是？
    <input type="checkbox" id="CheckedAll" />全選/全不選<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="send" value="提　交"/> 
</form>
 <script type="text/javascript">
$(function(){
     //全選
     $("#CheckedAll").click(function(){
            //所有checkbox跟著全選的checkbox走。
            $('[name=items]:checkbox').attr("checked", this.checked );
     });
     $('[name=items]:checkbox').click(function(){
                //定義一個臨時變量，避免重復使用同一個選擇器選擇頁面中的元素，提升程序效率。
                var $tmp=$('[name=items]:checkbox');
                //用filter方法篩選出選中的復選框。并直接給CheckedAll賦值。
                $('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length);

            /*
                //一行做過多的事情需要寫更多注釋。復雜選擇器還可能影響效率。因此不推薦如下寫法。
                $('#CheckedAll').attr('checked',!$('[name=items]:checkbox').filter(':not(:checked)').length);
            */
     });
      //輸出值
    $("#send").click(function(){
        var str="你選中的是：\r\n";
        $('[name=items]:checkbox:checked').each(function(){
            str+=$(this).val()+"\r\n";
        })
        alert(str);
    });
});
  </script>

建議把上例中 attr()改成prop()

下拉框應用

<div class="centent">
        <select multiple="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>
        </select>
        <div>
            <span id="add" >選中添加到右邊>></span>
            <span id="add_all" >全部添加到右邊>></span>
        </div>
    </div>

    <div class="centent">
        <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
            <option value="8">選項8</option>
        </select>
        <div>
            <span id="remove"><<選中刪除到左邊</span>
            <span id="remove_all"><<全部刪除到左邊</span>
        </div>
    </div>
<script type="text/javascript">
$(function(){
    //移到右邊
    $('#add').click(function() {
    //獲取選中的選項，刪除并追加給對方
        $('#select1 option:selected').appendTo('#select2');
    });
    //移到左邊
    $('#remove').click(function() {
        $('#select2 option:selected').appendTo('#select1');
    });
    //全部移到右邊
    $('#add_all').click(function() {
        //獲取全部的選項,刪除并追加給對方
        $('#select1 option').appendTo('#select2');
    });
    //全部移到左邊
    $('#remove_all').click(function() {
        $('#select2 option').appendTo('#select1');
    });
    //雙擊選項
    $('#select1').dblclick(function(){ //綁定雙擊事件
        //獲取全部的選項,刪除并追加給對方
        $("option:selected",this).appendTo('#select2'); //追加給對方
    });
    //雙擊選項
    $('#select2').dblclick(function(){
       $("option:selected",this).appendTo('#select1');
    });
});
</script>

表單驗證

<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>
<script type="text/javascript">
//<![CDATA[
$(function(){
        //如果是必填的，則加紅星標識.
        $("form :input.required").each(function(){
            var $required = $("<strong class='high'> *</strong>"); //創(chuàng)建元素
            $(this).parent().append($required); //然后將它追加到文檔中
        });
         //文本框失去焦點后
        $('form :input').blur(function(){
             var $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 = '請輸入正確的E-Mail地址.';
                      $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                }else{
                      var okMsg = '輸入正確.';
                      $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                }
             }
        }).keyup(function(){
           $(this).triggerHandler("blur");
        }).focus(function(){
           $(this).triggerHandler("blur");
        });//end blur

        
        //提交，最終驗證。
         $('#send').click(function(){
                $("form :input.required").trigger('blur');
                var numError = $('form .onError').length;
                if(numError){
                    return false;
                } 
                alert("注冊成功,密碼已發(fā)到你的郵箱,請查收.");
         });

        //重置
         $('#res').click(function(){
                $(".formtips").remove(); 
         });
})
//]]>
</script>