zoukankan html css js c++ java

第六章 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 = "你选中的是：
";
                $('[name=items]:checkbox:checked').each(function () {
                    str += $(this).val() + "
";
                })
                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="你选中的是：
";
        $('input[type=checkbox][name=items]:checked').each(function(){
            str+=$(this).val()+"
";
        })
        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=" 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=" 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 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>

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

查看全文

相关阅读:
了解Javascript的函数调用和'this'
js 实现简单收起功能
 页面跳转，form方式提交参数或数据
 查看图片大图效果
 2018phpstom 破解码
 JDK安装
 java 语法释义
 java的特性
 CSS(属性）
CSS(层叠样式表概述）

原文地址：https://www.cnblogs.com/shuibing/p/4087177.html