综合jQuery在表单中的应用

发布时间：2020-04-07 16:14:39 来源：网络阅读：452 作者：lflianglan 栏目：web开发
<!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" /> 
<meta http-equiv="refresh" content="600;url=单行文本框.html" /> 
<meta name="description" content="jquery表单应用中的单行文本框应用" /> 
<meta name="keywords" content="jQuery,表单，单行文本框，多行文本框，滚动条的高度，复选框的应用，下拉框的应用，表单验证" /> 
<title>表单应用</title> 
<style type="text/css"> 
    /*input:hover,textarea:hover{border:1px solid #f00; pink;} IE6不支持这样的伪类，因此使用一下jquery来实现* / 
    .focus{border:1px solid #f00; pink;} < /span>
    .msg{border:1px solid #666;} 
    .bigger,.smaller,.up,.down{cursor:pointer;} 
    #msg{width:auto; height:150px;} 
    #select1,#select2{width:100px; height:200px; float:left;} 
    .arrow span{display:block; height:50px; line-height:50px; cursor:pointer;} 
</style> 
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
        //单行文本框应用 
        $("input:lt(2)").focus(function(){ 
            $(this).addClass("focus"); 
        }).blur(function(){ 
            $(this).removeClass("focus"); 
        }) 
         
        //多行文本框应用 
        var $msg=$("#msg"); 
        $(".bigger").click(function(){ 
            if(!$msg.is(":animated")){ 
                if($msg.height()<500){ 
                    $msg.animate({height:"+=50"},400); 
                }; 
            } 
        }); 
        $(".smaller").click(function(){ 
            if(!$msg.is(":animated")){ 
                if($msg.height()>50){ 
                    $msg.animate({height:"-=50"},400); 
                } 
            } 
        }) 
         
        //滚动条的高度 
        $(".up").click(function(){ 
            if(!$msg.is(":animated")){ 
                $msg.animate({scrollTop:"-=10"},400); 
            } 
        }); 
        $(".down").click(function(){ 
            if(!$msg.is(":animated")){ 
                $msg.animate({scrollTop:"+=10"},400); 
            } 
        }) 
         
        //复选框的应用 
        //全选 
        $("#checkedAll").click(function(){ 
            $("[name=items]:checkbox:lt(4)").prop("checked",true); 
        }); 
        //全不选 
        $("#checkedNo").click(function(){ 
            $("[name=items]:checkbox:lt(4)").prop("checked",false); 
        }); 
        //反选 
        $("#checkedRev").click(function(){ 
            $("[name=items]:checkbox:lt(4)").each(function(){ 
                /*$(this).attr("checked",!$(this).attr("checked"));//jquery方法显得有点复杂，下面是js方法*/ 
                this.checked=!this.checked; 
            }) 
        }); 
        //发送 
        $("#send").click(function(){ 
            var str="你选中的是：\r\n";//\r\n是换行符 
            $("[name=items]:checkbox:checked").each(function(){ 
                str+=$(this).val()+"\r\n"; 
            }); 
            alert(str); 
        }); 
        //用复选框来做全选与全部选 
        $("#selectedAll").click(function(){ 
            /*if(this.checked){ 
                $("[name=items]:checkbox:gt(3)").prop("checked",true); 
            }else{ 
                $("[name=items]:checkbox:gt(3)").prop("checked",false); 
            }*/ 
            //以上方法可以简写为： 
            $("[name=items]:checkbox:gt(3)").prop("checked",this.checked); 
        }); 
        //是按钮复选框和其他复选框联动起来 
        $("[name=items]:checkbox:gt(3)").click(function(){ 
            /*var flag=true;   //联动方法一： 
            $("[name=items]:checkbox").each(function(){ 
                if(!this.checked){ 
                    flag=false; 
                } 
            }); 
            $("#selectedAll").prop("checked",flag);*/ 
            //联动方法二： 
            var $tmp=$("[name=items]:checkbox:gt(3)");//定义一个临时变量 
            //使用filter()方法筛选出选中的复选框，并直接给selectedAll赋值 
            $("#selectedAll").prop("checked",$tmp.length==$tmp.filter(":checked").length); 
            //判断复选框的总数是否与选中的复选框数量相等 
             
        }); 
         
        //下拉菜单的应用 
        //左边到右边 
        $("#add1").click(function(){ 
            /*var $options=$("#select1 option:selected");//获取到选中的相 
            var $remove=$options.remove();  //删除下拉列表中选中的相 
            $remove.appendTo("#select2");   //追加给右边的下拉列表*/ 
            //删除和追加这两个步骤可以由appendTo直接完成，以上方法可以写为： 
            var $options=$("#select1 option:selected"); 
            $options.appendTo("#select2"); 
        }); 
        $("#add1_all").click(function(){ 
            var $options=$("#select1 option");//获取所有选项 
            $options.appendTo("#select2"); 
        }); 
        $("#select1").dblclick(function(){//绑定双击事件 
            var $options=$("option:selected",this); 
            $options.appendTo("#select2"); 
        }); 
        //右边到左边 
        $("#add2").click(function(){ 
            var $options=$("#select2 option:selected"); 
            $options.appendTo("#select1"); 
        }); 
        $("#add2_all").click(function(){ 
            var $options=$("#select2 option"); 
            $options.appendTo("#select1"); 
        }); 
        $("#select2").dblclick(function(){ 
            var $options=$("option:selected",this); 
            $options.appendTo("#select1"); 
        }); 
         
        //表单验证 
        $("input.required").each(function(){ 
            var $required=$("<strong class='high'>*</strong>"); 
            $(this).parent().append($required); 
        }).blur(function(){ 
            var $parent=$(this).parent(); 
            $parent.find(".formtips").remove(); 
            //验证用户名 
            if($(this).is("#username")){ 
                if(this.style==""||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>"); 
                }; 
            }; 
        }); 
    }) 
</script> 
</head> 
 
<body> 
    <form action="#" method="post" id="regForm"> 
        <fieldset><!--该标签将表单内的相关元素分组--> 
            <legend>个人基本信息</legend><!--该标签为<fieldset>/<figure>/<details>等标签定义标题--> 
            <div id=""> 
                <label for="username">名称：</label> 
                <input type="text" id="name" /> 
            </div> 
            <div> 
                <label for="pass">密码：</label> <!--for 属性规定 label 与哪个表单元素绑定。--> 
                <input type="password" id="pass" /> 
            </div> 
            <div class="msg"> 
                <div> 
                    <span class="bigger">放大</span> 
                    <span class="smaller">缩小</span> 
                    <span class="up">向上</span> 
                    <span class="down">向下</span> 
                </div> 
                <label for="msg">详细信息：</label> 
                <textarea id="msg">多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。   多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。 
                </textarea> 
            </div> 
        </fieldset>  
        <fieldset> 
            <legend>你爱好的运动是？</legend> 
            <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="提  交" /> 
        </fieldset> 
        <fieldset> 
            <legend>你喜爱的水果是？</legend> 
            <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="checkbox" id="selectedAll" value="全选/全部选" />全选/全不选 
            <input type="button" id="send2" value="提  交" /> 
        </fieldset> 
        <fieldset> 
            <legend>下拉框的应用</legend> 
            <select multiple id="select1"> 
                <option>选项1</option> 
                <option>选项2</option> 
                <option>选项3</option> 
                <option>选项4</option> 
                <option>选项5</option> 
                <option>选项6</option> 
                <option>选项7</option> 
                <option>选项8</option> 
            </select> 
            <div class="arrow" style="float:left"> 
                <span id="add1">选中添加到右边>></span> 
                <span id="add1_all">全部添加到右边>></span> 
                <span id="add2"><<选中添加到左边</span> 
                <span id="add2_all"><<全部添加到左边</span> 
            </div> 
            <select multiple id="select2"> 
            </select> 
        </fieldset> 
        <fieldset> 
            <legend>表单验证</legend> 
            <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="send3" /><input type="reset" id="res" /> 
            </div> 
        </fieldset> 
    </form> 
</body> 
</html>
注意：1、<fieldset>标签是使表单相关元素分组；
2、<legend>标签是为<fieldset>、<figure>、<details>变浅定义标题用的；
3、<label>标签中的for 属性规定 label 与哪个表单元素绑定。
向AI问一下细节
综合jQuery在表单中的应用

猜你喜欢

最新资讯

相关推荐

相关标签
