码迷，mamicode.com
首页 > Web开发 > 详细

第六章 jQuery操作表单

时间：2014-11-24 18:53:22      阅读：245      评论：0      收藏：0      [点我收藏+]

标签：style   blog   http   io   ar   color   os   使用   sp   

http://www.cnblogs.com/shuibing/p/4087177.html

1.单行文本框的应用

bubuko.com,布布扣
bubuko.com,布布扣
<!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>
bubuko.com,布布扣

　　2.多行文本框高度变化

bubuko.com,布布扣
bubuko.com,布布扣
<!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>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!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>
bubuko.com,布布扣

　　3.复选框应用

bubuko.com,布布扣
bubuko.com,布布扣
<!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>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
<!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>
bubuko.com,布布扣

　　4.下拉框左右选择

bubuko.com,布布扣 View Code

　　5.表单验证

bubuko.com,布布扣
<!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 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("注册成功,密码已发到你的邮箱,请查收.");
            });

            //重置
            $(‘#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>

第六章 jQuery操作表单

标签：style   blog   http   io   ar   color   os   使用   sp   

原文地址：http://www.cnblogs.com/shenming/p/4119056.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！