首页 > 代码库 > 第六章 jQuery操作表单

第六章 jQuery操作表单

  1.单行文本框的应用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">body{    font:normal 12px/17px Arial;}div{    padding:2px;} input, textarea {      width: 12em;      border: 1px solid #888;}.focus {      border: 1px solid #f00;     background: #fcc;} </style><!--   引入jQuery --><script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script><script type="text/javascript">    $(function(){        $(":input").focus(function(){              $(this).addClass("focus");              if($(this).val() ==this.defaultValue){                    $(this).val("");                         }         }).blur(function(){             $(this).removeClass("focus");             if ($(this).val() == ‘‘) {                $(this).val(this.defaultValue);             }        });    })    </script></head><body>    <form action="" method="post" id="regForm">        <fieldset>            <legend>个人基本信息</legend>                <div>                    <label  for="username">名称:</label>                    <input id="username" type="text" value="名称" />                </div>                <div>                    <label for="pass">密码:</label>                    <input id="pass" type="password" value="密码" />                </div>                <div>                    <label for="msg">详细信息:</label>                    <textarea id="msg" rows="2" cols="20">详细信息</textarea>                </div>        </fieldset>    </form></body></html>
View Code

  2.多行文本框高度变化

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        *        {            margin: 0;            padding: 0;            font: normal 12px/17px Arial;        }        .msg        {            width: 300px;            margin: 100px;        }        .msg_caption        {            width: 100%;            overflow: hidden;            margin-bottom: 1px;        }        .msg_caption span        {            display: block;            float: left;            margin: 0 2px;            padding: 4px 10px;            background: #898989;            cursor: pointer;            color: white;        }        .msg textarea        {            width: 300px;            height: 80px;            height: 100px;            border: 1px solid #000;        }    </style>    <!--   引入jQuery -->    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            var $comment = $(#comment);  //获取评论框            $(.bigger).click(function () { //放大按钮绑定单击事件                if (!$comment.is(":animated")) { //判断是否处于动画                    if ($comment.height() < 500) {                        $comment.animate({ height: "+=50" }, 400); //重新设置高度,在原有的基础上加50                    }                }            })            $(.smaller).click(function () {//缩小按钮绑定单击事件                if (!$comment.is(":animated")) {//判断是否处于动画                    if ($comment.height() > 50) {                        $comment.animate({ height: "-=50" }, 400); //重新设置高度,在原有的基础上减50                    }                }            });        });    </script></head><body>    <form action="" method="post">    <div class="msg">        <div class="msg_caption">            <span class="bigger">放大</span> <span class="smaller">缩小</span>        </div>        <div>            <textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>        </div>    </div>    </form></body></html>
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        *        {            margin: 0;            padding: 0;            font: normal 12px/17px Arial;        }        .msg        {            width: 300px;            margin: 100px;        }        .msg_caption        {            width: 100%;            overflow: hidden;            margin-bottom: 1px;        }        .msg_caption span        {            display: block;            float: left;            margin: 0 2px;            padding: 4px 10px;            background: #898989;            cursor: pointer;            color: white;        }        .msg textarea        {            width: 300px;            height: 80px;            height: 100px;            border: 1px solid #000;        }    </style>    <!--   引入jQuery -->    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            var $comment = $(#comment); //获取评论框            $(.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></head><body>    <form action="" method="post">    <div class="msg">        <div class="msg_caption">            <span class="up">向上</span> <span class="down">向下</span>        </div>        <div>            <textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>        </div>    </div>    </form></body></html>
View Code

  3.复选框应用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <!--   引入jQuery -->    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            //全选            $("#CheckedAll").click(function () {                $([name=items]:checkbox).attr(checked, true);            });            //全不选            $("#CheckedNo").click(function () {                $([type=checkbox]:checkbox).attr(checked, false);            });            //反选            $("#CheckedRev").click(function () {                $([name=items]:checkbox).each(function () {                    //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。                    //$(this).attr("checked", !$(this).attr("checked"));                    //直接使用JS原生代码,简单实用                    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></head><body>    <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="乒乓球" />乒乓球    <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></body></html>
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title> <!--   引入jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script>$(function(){     //全选     $("#CheckedAll").click(function(){            if(this.checked){                 //如果当前点击的多选框被选中                 $(input[type=checkbox][name=items]).attr("checked", true );            }else{                                                 $(input[type=checkbox][name=items]).attr("checked", false );            }     });     $(input[type=checkbox][name=items]).click(function(){               var flag=true;               $(input[type=checkbox][name=items]).each(function(){                    if(!this.checked){                         flag = false;                    }               });               if( flag ){                     $(#CheckedAll).attr(checked, true );               }else{                     $(#CheckedAll).attr(checked, false );               }     });      //输出值    $("#send").click(function(){        var str="你选中的是:\r\n";        $(input[type=checkbox][name=items]:checked).each(function(){            str+=$(this).val()+"\r\n";        })        alert(str);    });})  </script></head><body><form>   你爱好的运动是?<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></body></html> 
View Code

  4.下拉框左右选择

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        *        {            margin: 0;            padding: 0;        }        div.centent        {            float: left;            text-align: center;            margin: 10px;        }        span        {            display: block;            margin: 2px 2px;            padding: 4px 10px;            background: #898989;            cursor: pointer;            font-size: 12px;            color: white;        }    </style>    <!--   引入jQuery -->    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <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></head><body>    <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">选中添加到右边&gt;&gt;</span> <span id="add_all">全部添加到右边&gt;&gt;</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">&lt;&lt;选中删除到左边</span> <span id="remove_all">&lt;&lt;全部删除到左边</span>        </div>    </div></body></html>
View Code

  5.表单验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <link href="css/style.css" rel="stylesheet" type="text/css" />    <!--   引入jQuery -->    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <script type="text/javascript">//<![CDATA[        $(function () {            //如果是必填的,则加红星标识.            $("form :input.required").each(function () {                var $required = $("<strong class=‘high‘> *</strong>"); //创建元素                $(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 one rror"> + 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 one rror"> + 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("注册成功,密码已发到你的邮箱,请查收.");            });            //重置            $(#res).click(function () {                $(".formtips").remove();            });        })//]]>    </script></head><body>    <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></body></html>

PS:参考文献《锋利的jQuery》

第六章 jQuery操作表单