zoukankan html css js c++ java

第五章（jQuery对表单、表格的操作及更多应用）（5.1 表单应用）

5.1 表单应用

文本框是表单域中最基本的元素------获取和失去焦点改变样式

创建一个表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <style type="text/css">
        body{
            font: normal 12px/17px Arial;
        }
        div{
            padding: 2px;
        }
        input, textarea{
            width: 12em;
            border: 1px solid #888;
        }
        
    </style>
</head>
<body>
    <form action="#" method="POST" id="regForm">
        <fieldset>
            <legend>个人信息</legend>
            <div>
                <label for="username">名称：</label>
                <input type="text" id="username" name="">
            </div>
            <div>
                <label for="pass">密码：</label>
                <input type="password" id="pass" name="">
            </div>
            <div>
                <label for="msg">详细信息：</label>
                <textarea id="msg"></textarea>
            </div>
        </fieldset>
    </form>
<script type="text/javascript">
 

</script>

</body>
</html>

效果：当文本框获取焦点，颜色变化，失去焦点，恢复样式

CSS：

        input:focus , textarea:focus{
            border: 1px solid #f00;
            background: #fcc;
        }

但是 IE 6 并不支持除了 :hover 之外的其他伪类选择器。可以使用 jQuery

首先创建一个类名为 focus 样式

.focus{
            border: 1px solid #f00;
            background: #fcc;
        }

然后添加获取和失去焦点事件

 $(function(){
     $(":input").focus(function(){
         $(this).addClass("focus");
     }).blur(function(){
         $(this).removeClass("focus")
     });
 })

5.1.2 多行文本框应用

1 高度变化

如果所示，放大放小按钮控制

首先创建表单

    <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>
</head>
<body>
    <form action="">
        <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>

思路：

①单击“放大”，如果高度小于500px ，则在原有高度基础上加 50px

②单击“放小”，如果高度大于50px，则在原有高度上减去50px。

$(function(){
    var $comment = $("#comment");
    $(".bigger").click(function(){
        if($comment.height()<500){
            //重新设置高度，在原有基础上加 50
            $comment.height($comment.height()+50);
        }
    });
    $(".smaller").click(function(){
        if($comment.height()>50){
            //重新设置高度，在原有的基础上减50
            $comment.height($comment.height()-50);
        }
    });
})

添加缓冲效果，让变化效果更圆滑，不呆滞

$comment.height($comment.height()+50);

//改为
$comment.animate({height:"+=50"},400);

因此，当单击“当大”按钮后，评论框高度会在 0.4秒内增大50px；

在动画的过程中，需要判断评论框是否正处于动画，如果处于动画过程中，则不追加其他动画，以免造成动画队列不必要的积累

$(function(){
    var $comment = $("#comment");
    $(".bigger").click(function(){
        if(!$comment.is(":animated")){
        if($comment.height()<500){
            //重新设置高度，在原有基础上加 50
            $comment.animate({height:"+=50"},400)
            }
        }
    });
    var $comment = $("#comment");
    $(".smaller").click(function(){
        if(!$comment.is(":animated")){
        if($comment.height()>50){
            //重新设置高度，在原有基础上加 50
            $comment.animate({height:"-=50"},400)
            }
        }
    });
})

2 滚动条高度变化

在多行文本框中，还有另一个应用，通过控制多行文本框的滚动条变化，使文本框内容滚动。

与控制高度方法相同，使用 scrollTop 替换即可。

HTML

<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>
</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>

jQuery

    $(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);
            }
        });
    });

点击向上或者向下时，可以滚动显示

5.1.3 复选框应用

对复选框最基本的应用，就是对复选框进行全选、反选和全不选等操作，复杂的操作需要与选项挂钩，来达到各种级联反应效果

创建一个复选框表单

    <form action="">
        你爱好的运动？<br/><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/><br/>
        <input type="button" id="CheckedAll" value="全 选" name="">
        <input type="button" id="CheckedNo" value="全不选" name="">
        <input type="button" id="CheckedRev" value="反 选" name="">
        <input type="button" id="send" value="提 交" name="">
    </form>

如果需要使复选框处于选中或者不选状态，必须通过控制元素的 checked 属性来打到目的，如果属性 checked 的值为 true，说明被选中，如果值为 false，说明没被选中，因此可以基于这个属性来完成需求。

全选

找到“全选”按钮，绑定单击事件，然后使用选择符寻找符合要求的复选框“[namt=items]:checkbox”，最后通过attr() 方法来设置属性checked值

$("#CheckedAll").click(function(){
    $('[name=items]:checkbox').attr('checked',true);
})

全不选

$("#CheckedNo").click(function(){
    $('[name=items]:checkbox').attr('checked',false);
})

反选

需要循环每个复选框进行设置，取它们值的反值，可以使用“！”非运算符。

反选操作

$("#CheckedRev").click(function(){
    $('[name=items]:checkbox').each(function(){
        $(this).attr("checked",!$(this).attr("checked"));
    })
})

使用jQuery 可能有些复杂，可以使用原声 javascript

$("#CheckedRev").click(function(){
    $('[name=items]:checkbox').each(function(){
        this.checked = !this.checked;
    })
})

复选框被选中后，用户单击“提交”按钮，需要将选中的选项值输出，可以通过 val() 方法获取选中的值

$("#send").click(function(){
    var str = "你选中的是：
";
    $('[name=items]:checkbox:checked').each(function(){
        str += $(this).val()+"
";
    });
    alert(str);
})

♥ 用一个复选框控制全选 / 全不选

HTML

    <form action="">
        你爱好的运动？<br/><br/>
        <input type="checkbox" id="CheckedAll" name="">全选/全不选<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/><br/>
        <input type="button" id="send" value="提 交" name="">
    </form>

首页需要对另一个复选框控制

    $("#CheckedAll").click(function(){
        if(this.checked){
            $('[name=items]:checkbox').attr("checked",true);
        }else{
            $('[name=items]:checkbox').attr("checked",false);
        }
    })

通过上述发下，所有复选框的 checked 属性的值和控制全选的复选框的 checked 属性值是相同的，因此可以省略 if 判断，直接赋值

    $("#CheckedAll").click(function(){
        $("[name=items]:checkbox").attr("checked",this.checked);
    })

当单击 id 为 “CheckedAll” 的复选框后，复选框被选中，当在复选框组里取消某一个选项的选中状态时，复选框并没有被取消选中状态，此时需要把它和复选框联系起来。

思路如下：

方法一

① 对复选框绑定单击事件

② 定义一个flag变量，默认为 true

③ 循环复选框组，当有没被选中的项时，则把变量flad值设置为 false

④ 根据变量 flag 值来设置“CheckedAll” 的复选框是否选中

（1）如果 flag 为 true，说明复选框组都被选中

（2）如果 flag 为 false，说明复选框组至少有一个未被选中

// 设置全选/全不选 功能键
$("#CheckedAll").click(function(){
        if(this.checked){
            $('[name=items]:checkbox').attr("checked",true);
        }else{
            $('[name=items]:checkbox').attr("checked",false);
        }
    })

// 修改后
$('[name=items]:checkbox').click(function(){
    var flag = true;
    $('[name=items]:checkbox').each(function(){
        if(!this.checked){
            flag = false;
        }
    });
    $("#CheckedAll").attr('checked',flag);
})

方法二

（1）对复选框组绑定单击事件

（2）判断复选框的总数是否与选中的复选框数量相等

（3）如果相等，则说明全选，否则为不全选

//全选
     $("#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);
})

5.1.4 下拉应用

<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>
</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>
<script type="text/javascript">
    
</script>
    
</body>

需要实现功能

（1）将选中的选项添加给对方

（2）将全部选项添加给对方

（3）双击某个选项将其添加给对方

① 先获取下拉列表中被选中的选项，然后将当前下拉列表中选中的选项删除，最后将删除的选项添加给对方

/*    $("#add").click(function(){
        var $options = $('#select1 option:selected'); //获取选中的项
        var $remove = $options.remove();            //删除下拉列表中选中的项
        $remove.appendTo('#select2');
    });*/

    // 删除和添加可以使用 sppendTo() 直接完成，左边到右边......上述代码简化为
    $("#add").click(function(){
        var $options = $('#select1 option:selected'); //获取选中的项
        $options.appendTo('#select2');
    })

完整代码

    $("#add").click(function(){
        var $options = $('#select1 option:selected'); //获取选中的项
        $options.appendTo('#select2');
    });
    $("#remove").click(function(){
        var $options = $('#select2 option:selected'); //获取选中的项
        $options.appendTo('#select1');
    });

②将全部项添加给对方。和第①步只是对象不同

    //从左到右
    $("#add_all").click(function(){
           var $options = $('#select1 option'); //获取选中的项
           $options.appendTo('#select2');
       });
       //从右到左 
    $("#remove_all").click(function(){
        var $options = $('#select2 option'); //获取选中的项
        $options.appendTo('#select1');
    });

③双击某个选项将其添加给对方

首先绑定双击事件

$("#select1").dblclick(function(){     // dblclick   绑定双击事件
      //将选中项添加给对方
})

然后可以通过 $("option:selected",this)方法来获取被选中的选项

    //从左到右
    $("#select1").dblclick(function(){
        var $options = $('option:selected',this);
        $options.appendTo('#select2');
    });
    //从右到左
    $("#select2").dblclick(function(){
        var $options = $('option:selected',this);
        $options.appendTo('#select1');
    });

5.1.5 表单验证

创建表单

<style type="text/css">
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
    background:#FFE0E9 ;
    padding-left:25px;
}
.onSuccess{
    background:#E9FBEB ;
    padding-left:25px;
}
.high{
    color:red;
}
</style>
</head>
<body>
    <form action="" method="POST">
        <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>

需要在必填文本框后面加上红色 * 标识

$(function(){

    $("form :input.required").each(function(){
        var $required = $("<strong class='high'> *</strong>");  //创建元素
        $(this).parent().append($required);
    });
    
})

当用户在“用户名”文本框填写完信息后，将光标焦点从“用户名”移除，需要判断用户是否符合验证规则，移除邮箱，也需要验证邮箱规则，需要添加失去焦点事件。

$("form :input").blur(function(){    //为表单元素添加失去焦点事件
   //.....验证函数
})

验证表单元素步骤如下：

① 判断当前失去焦点的元素是“用户名”还是“邮箱”，然后分别处理

② 如果是“用户名”，判断元素的长度是否小于6，如小于6，则用红色提醒，反之则用绿色提醒

③ 如果是“邮箱”，判断元素的值是否符合邮箱格式，如果不符合，则用红色，反之绿色提醒

④ 将提醒信息追加到当前元素的父元素的最后。

$('form :input').blur(function(){  // 为表单元素添加失去焦点事件
             var $parent = $(this).parent();
             //验证用户名
             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>');
                }
             }
        })

由于每次在元素失去焦点后，都会创建一个新的提醒元素，然后将它追加到文档中。会出现多次提醒信息，因此，需要在创建提醒元素之前，将当前元素以前的提醒元素删除，可以使用 remove() 方法完成

 $('form :input').blur(function(){  // 为表单元素添加失去焦点事件
             var $parent = $(this).parent();
             $parent.find(".formtips").remove(); //去掉先前的提醒
    // ......省略函数
})

在表单提交时，需要对表单必须填写的元素进行一次整体验证，可以使用 trigger() 方法来触发 blur 事件，如果填写错误，红色提醒。如果用户名和邮箱都不正确，那么就会有2处错误，即有两个 class 为“onError” 的元素，因此可以根据 class 为“onError” 元素的长度来判断是否可以提交。如果长度为 0，即 true, 说明已经可以提交了，如果长度大于0 ，即 false，说明有错误，需要阻止表单提交，阻止表单提交可以直接用 “return false” 语句。

//提交，最终验证。
   $('#send').click(function(){
        $("form :input.required").trigger('blur');
        var numError = $('form .onError').length;
        if(numError){
          return false;
        } 
           alert("注册成功,密码已发到你的邮箱,请查收.");
   });

重置数据

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

完整代码：

$(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>');
                }
             }
        });

        //提交，最终验证。
         $('#send').click(function(){
                $("form :input.required").trigger('blur');
                var numError = $('form .onError').length;
                if(numError){
                    return false;
                } 
                alert("注册成功,密码已发到你的邮箱,请查收.");
         });

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

每次输入完字段元素失去焦点后才会提醒是否输入正确，现在设置输入时即提醒输入是否正确

需要给表单绑定 keyup和focus 事件，keyup 事件在用户每次松开按键时触发，实现即时提醒， focus事件在元素得到焦点时候触发，也可以实现即时提醒。

$('form :input').blur(function(){
        //失去焦点处理函数
        //....省略
    }).keyup(function(){
        $(this).triggerHandler("blur");
    }).focus(function(){
        $(this).triggerHandler("blur");
})

trigger("blur")不仅会触发为元素绑定的 blur 事件，也会触发浏览器默认的 blur 事件，即不能将光标定位到文本框上，而 triggerHandler("blur") 只会触发为元素绑定的 blur 事件，而不会触发浏览器默认的blur 事件。

完整代码：

$(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(); 
         });
})

查看全文

相关阅读:
ES6 数组下
 ES6 ---数组（上部分)
ES6---函数
 ES6---字符串
 自适应网页设计（Responsive Web Design）
HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用？
mysql潜在的危险kill
shell脚本加密
 Linux安全知识总结
 nginx 解决400 bad request 的方法（转载）

原文地址：https://www.cnblogs.com/cimuly/p/7156900.html